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.