perform card navigation with react-native-tab-view stationary? - react-native

Question

I am currently using react-navigation and react-native-tab-view. If I want to navigate to another screen, but keep the tab view at the same place, how would I do that?

Answer 1

Using the React Navigation and React Native Tab View tutorials, you can rewrite the default React Native App.js file to look like the React Native Tab View's TabViewExample component. Wrap the TabViewExample component in React Navigation's NavigationContainer component.
Then. wrap the TabViewExample's FirstRoute component in Stack.Navigator component, move the FirstRoute component's code to a new component, e.g. FirstRouteScreen, and add another component to the FirstRoute's component, e.g. DetailsScreen. These will be the two screens that you want to navigate between whilst keeping the tab view at the same place.
Add a button to the FirstRouteScreen component which will allow you to navigate to the DetailsScreen.
The following is what it should look like:
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import React from "react";
import { Button, Dimensions, StyleSheet, Text, View } from "react-native";
import "react-native-gesture-handler";
import { SceneMap, TabView } from "react-native-tab-view";
function FirstRouteScreen({navigation}) {
return (
<View style={[styles.scene, { backgroundColor: "#ff4081" }]}>
<Text>First Route</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate("Details")}
/>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
</View>
);
}
const FirstRoute = () => (
<Stack.Navigator initialRouteName="First Route">
<Stack.Screen
name="First Route"
component={FirstRouteScreen}
options={{ title: "Overview" }}
/>
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: "#673ab7" }]}>
<Text>Second Route</Text>
</View>
);
const initialLayout = { width: Dimensions.get("window").width };
const Stack = createStackNavigator();
export default function App() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: "first", title: "First" },
{ key: "second", title: "Second" },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<NavigationContainer>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
scene: {
flex: 1,
},
});
References:
Github. satya164/react-native-tab-view: A cross-platform Tab View component for React Native. https://github.com/satya164/react-native-tab-view. (Accessed November 22, 2020)
React Navigation. Getting started | React Navigation. https://reactnavigation.org/docs/getting-started. (Accessed November 22, 2020)
React Navigation. Hello React Navigation | React Navigation. https://reactnavigation.org/docs/hello-react-navigation. (Accessed November 22, 2020)
Moving between screens | React Navigation. https://reactnavigation.org/docs/navigating. (Accessed November 22, 2020)