How can you add slide transition when switching between tabs on React Bottom Tab Navigator?

user_242042 0
Viewed 1092

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.

react-navigation-bottom-tab react-native
1 Answers

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

user_112125780
Related