In this source code i mention on how to right-sidebar to left-sidebar through react navigation and Time duration set in React navigation

rightsidebar.md

Right to Left Side bar with Time Duration

afterSignIn: {
    screen: MyApp,
    navigationOptions: ({ navigation }) => ({
      headerRight: <View style={{ flexDirection: "row" }}>
        <Iconss name="search1" size={22} style={{ marginRight: 21, color: "white" }} />
        <Icon name="ios-cloud-done" size={22} style={{ marginRight: 15, color: "white" }} />
        <Icons name="dots-three-vertical" size={22} style={{ marginRight: 9, color: "white" }} />
      </View>,
      headerLeft: <Icon name="md-menu" onPress={navigation.openDrawer} size={29} style={{ marginLeft: 20, color: "white" }} />,
      headerTitle: "Text Scanner",
      headerStyle: {
        backgroundColor: '#56CCF2',
        fontSize: 30
      },
      headerTintColor: '#fff',
    })
  }
}, {
  initialRouteName: "HomePage",
  mode: 'modal',
  defaultNavigationOptions: {
    gesturesEnabled: true,
  },
  **transitionConfig: () => ({
    transitionSpec: {
      duration: 800,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const height = layout.initHeight;
      const width = layout.initWidth;
      const translateX = position.interpolate({
        inputRange: [index - 1, index],
        outputRange: [width, 0],
      });

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });

      return { opacity, transform: [{ translateX }] };
    },
  }),**
});