CODEWITHSUNDEEP
react-nativereact-animatedreact-native-reanimated
Butri
Butri

Reputation: 457

Using Animated.timing() API in React Native to slide in/out content

I have a screen in my React Native app that show/hide content based on some toggle buttons using Hooks. Everything is working fine but I'd like to improve the UI and add some animation to slide in the new content and slide out the old one.

Here's my code...

const [activeSwitch, setActiveSwitch] = useState(0);
...
return (
  <Scrollview>
    {activeSwitch === 1 ? (
      <View>
        <Text>SCREEN 1</Text>
      </View>
    ) : null}
    {activeSwitch === 2 ? (
      <View>
        <Text>SCREEN 2</Text>
      </View>
    ) : null}
    {activeSwitch === 3 ? (
      <View>
        <Text>SCREEN 3</Text>
      </View>
    ) : null}
  </Scrollview>
)}

I'm setting the state using setActiveSwitch() based on which button I click.

I've never worked with the Animation API before and tried to look at the documentation here but could not make it to work. Any help would be appreciated.

Upvotes: 2

Views: 460

Answers (1)

Martinocom
Martinocom

Reputation: 330

Kinda similar to my own recent question where I need to command a PageSlider with two buttons.

Anyway, if ScrollView is used for Vertical/Horizontal scrolling (because components are very long) it's ok, but I'd rather include the ScrollView inside the children itself, rather than wrapping everything with a single ScrollView. If it's used for animations, remove it, since it's useless.

Then, remember that activeSwitch will re-render the whole page and your JSX is somehow long. You could refactor your code to get an easy helper function to get your component visible.

const getComponent() => {
  switch(activeSwitch) {
    case 1: return (<Screen1 />);
    case 2: return (<Screen1 />);
    ...
    default: return null;
  }
}

...

return <ScrollView>{getComponent()}</ScrollView>

Then to animate your view in Reanimated 3 you can leverage on props like Entering and Exiting that will animate the layout for you, when parts of the screens gets conditionally rendered:

<Screen1 entering={FadeIn} exiting={FadeOut} />

Docs: https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations

Upvotes: 0

Related Questions