let's create tab navigation in React native application
1. install expo-cli to create expo apps:
npm install -g expo-cli@latest
2. install react-native-screens and react-native-safe-area-context:
npm install @react-navigation/native
3. Installing dependencies into an Expo managed project
npx expo install react-native-screens react-native-safe-area-context
4. create expo project named "navig":
npx create-expo-app navig
5. Installing the native tab navigation library:
npm install @react-navigation/bottom-tabs
Login.js:
import { Button, StyleSheet, Text, View } from 'react-native';
export default function Login(props)
{
return (
<View>
<Text>login screen</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
},
});
Home.js
import { Button, StyleSheet, Text, View } from 'react-native';
export default function Home(data) {
return (
<View>
<Text>home screen</Text>
</View>
)
}
App.js :
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './Components/Home';
import Login from './Components/Login';
const Tab=createBottomTabNavigator()
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="home" component={Home}/>
<Tab.Screen name="login now" component={Login}/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
},
});
0 Comments