Actually, here’s the problem;
I use Navigation Tab in my project. But when I swipe left and right like on Instagram, I open messages and camera.
The problem is that I cannot confine this navigation both on the pages and in the home screen.
So messages and camera should not be visible. But when I make a slide, it should be trapped in HomeScreen in TabView.
enter image description here
layout.tsx
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';
import 'react-native-reanimated';
import { useColorScheme } from '@/hooks/useColorScheme';
import ContextProvider from '@/context/contextProvider';
import AnimatedSplashScreen from '@/components/splash/splash.component';
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [isSplashVisible, setSplashVisible] = useState(true);
useEffect(() => {
setTimeout(() => {
setSplashVisible(false)
}, 5300);
}, [])
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
{/* {isSplashVisible && (<AnimatedSplashScreen />)} */}
<ContextProvider>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="post-detail" options={{ headerShown: false, presentation: 'modal' }} />
<Stack.Screen name="post-threads" options={{ headerShown: false, presentation: 'modal', contentStyle: { backgroundColor: "transparent" } }} />
<Stack.Screen name="stories" options={{ headerShown: false, animation: "fade" }} />
<Stack.Screen name="+not-found" />
</Stack>
</ContextProvider>
</ThemeProvider>
);
}
[enter image description here][2]
I have uploaded photos so that the file structure can be fully understood. I apologise.