[FIXED] How can I implement swipe up navigation with Stacks in react-native similar to TikTok?

Issue

In App.tsx, I have:

export default function App() {

  const Stack = createNativeStackNavigator();


  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='feed' screenOptions={{ headerShown: false, gestureDirection: 'vertical' }}>
        <Stack.Screen name="feed" component={IvoryFeedScreen} />
        <Stack.Screen name="home" component={HomeScreen} />

      </Stack.Navigator>

    </NavigationContainer>
  );
}

How can I have these stacks swipe-up-able like in TikTok?

Solution

you can use react-native-pager-view to implement scroll same like tiktok

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';

const MyPager = () => {
  return (
    <PagerView style={styles.pagerView} initialPage={0}>
      <View key="1" style={styles.page}>
        <Text>First page</Text>
      </View>
      <View key="2" style={styles.page}>
        <Text>Second page</Text>
      </View>
    </PagerView>
  );
};

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
  page: {
    flex: 1,
  },
});

Answered By - Muhammad Numan
Answer Checked By - - Jay B. (ReactFix Admin)