Animations and gestures, future development

[msageryd]

I'm considering RNP as component lib for my app. Everything seems very neat and well thought out. I like it!

I do wonder if you have any plans on implementing more animations, or is this deliberately left to the users? As an example I would like to animate the Accordion. What would be your suggested way of doing this?

• In a forked/inherited component?
• As a PR to the lib?

What animation and gesture library do you plan on using going forward. The hype right now seems to be gesture-handler and reanimated, but I saw that you opted out of gesture-handler due to it being non accessible #703.

[jayu]

The goal of this library is to deliver components that follow Material UI guidelines. I think we are not going to implement animations that are not common for Material UI. But If you see any missing animation according to the MUI docs please open a new issue with a feature request. I'm not sure about accordion animation, for now, I cannot find anything in docs, but I'm for adding an animation

[wardjk87]

@msageryd if you want easy solution for List Accordion I added LayoutAnimation to the onPress event to get some animation for that component.

` <List.Accordion title="Notifications" left={props => <List.Icon {...props} icon="notifications" />} onPress={() => { LayoutAnimation.easeInEaseOut(); }}

`

If you want a more sophisticated solution, I used Animated Library to make a smoother sliding motion based off angular material collapsible and other material design expansion panels that have sliding in/out motion. Similarly, I liked angular-material implementation of material design input and so I created my own using Animated library instead of using react-native-paper implementation. The highlighted line doesn't just appear on focus but it grows like the specs demonstrate.

For the expanding accordion, I created a snack version of this functionality turned into a re-usable class component written in typescript: snack. This is not a functional snack app. It is just to present the functional code. I'm using the exact code in a functional app.

1) Make List.Accordion animated and wrap List.Item(s) in a view that will get the height to animate to. And create variables in the component to keep track of the animation.

const AnimatedList = Animated.createAnimatedComponent(List.Section);
   animatedHeight = new Animated.Value(72);
  open = false;
  listHeight = 0;

........

 <AnimatedList style={{height: this.animatedHeight, overflow: 'hidden'}}>
          <List.Accordion
            title="Notifications"
            onPress={this.toggle}
            left={props => <List.Icon {...props} icon="notifications" />}
          >
            <View onLayout={this._setMaxHeight.bind(this)} >
.... List.Items...

2) Method to get height of Accordion contents when expanded

 _setMaxHeight(event){
    this.listHeight = event.nativeEvent.layout.height;
  }

3) Method execute when accordion toggled. The Layout Animations fades the text as it slides in/out. The setTimeout is used to allow time for retrieving the size of the Layout after it has been added to the view by react-native-paper (otherwise it would be 0). 72 seems to be the default height for the Accordion header. The height of the list is added to this to get the final expanded height. A local property is used to keep track of the open/closed state of the accordion.

toggle() {
    LayoutAnimation.configureNext({
      create: {
        duration: 125,
        property: LayoutAnimation.Properties.opacity,
        type: LayoutAnimation.Types.easeIn,
      },
      delete: {
        duration: 80,
        property: LayoutAnimation.Properties.opacity,
        type: LayoutAnimation.Types.easeOut,
      }
    })
    setTimeout(() => {
      Animated.timing(
        this.animatedHeight,
        {
          duration: 750,
          toValue: !this.open ? this.listHeight + 72 : 72,
        })
        .start();
      this.open = !this.open;
    }, 100)
  }

I presume similar solutions could be created for other react-native-paper components

[wardjk87]

@jaysbytes is there any openness for PRs adding animation functionality to react-native-paper?

[wardjk87]

I've also modified the react-native-paper search bar to add chip functionality based on material design specs. I also have created a swipeable version of react-native-paper list item and react-native--swipe-list-view based on the material design animations.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[jayu]

We would like to have any animation that fits into Material Design guidelines. So i.e things like swipeable list items should not be included in the library. It would probably add more dependencies and this feature can be implemented by end-user with other libraries. But animated accordion is a nice to have thing, because this animation cannot be easily added to accordion by end user, and animated accordion is that kind of user experience practice, that app user would expect to have IMO. I believe this is a kind of standard, to have an animation for elements that can be expanded. On the other hand, actual implementation might be tricky and we might not want to have a hacky solution in paper's codebase, because someone has to maintain it later. In the case of accordion, react-native LayoutAnimation is worth trying https://facebook.github.io/react-native/docs/layoutanimation. It is not a perfect solution, but it might help in some cases.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.