4

I am using React Native with bottom tabs doing switches between native-stack tab screens. For the most part it is okay, but the tab switch is a bit jarring and sometimes gets a bit laggy for more complex screens.

How do I introduce some form of transition when I click on the different tabs so it does not appear as jarring?

I know about How do I animate React Navigation transitions using createBottomTabNavigator? but that is done through fade animation. What I am looking for is specifically a slide transition with each screen being native stack navigators.

Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265
  • Have you come across this: https://stackoverflow.com/questions/69227294/how-do-i-animate-react-navigation-transitions-using-createbottomtabnavigator – Aleksandar Zoric Apr 29 '22 at 08:08
  • yes I am looking specifically for slide transition which is a bit more difficult because the tabs screens are isolated components – Archimedes Trajano Apr 29 '22 at 17:31

1 Answers1

0

try wrapping the screen with <Animated.View>

and styling transform for animation sliding

for ex:

<Animated.View // Special animatable View
  style={{
    flex: 1,
    opacity: fadeAnim,

    transform: [{
      translateX: fadeAnim.interpolate({
        inputRange:[0,1],
        outputRange: [SCREEN_WIDTH,1],
        extrapolate:'clamp'
      })
    }],
    // Bind opacity to animated value
  }}>
  {props.children}
</Animated.View>

screen width you can get from Dimension

const SCREEN_WIDTH = Dimensions.get('window').width

or u can customize sliding for vertical with Dimension height

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Ebe toni
  • 9
  • 3
  • would this not cause problems with Native Headers and ScrollView/FlatList since it expects the top level of the screen to be a ScrollView/FlatList? – Archimedes Trajano Sep 06 '22 at 05:54