lets create a react native application with top tab navigation
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 an expo project named "navig":
npx create-expo-app navig
5. install top-tab-nav
npm install @react-navigation/material-top-tabs react-native-tab-view
6. if you are using an expo project use this command:
npx expo install react-native-pager-view
Home.js
import { Button, StyleSheet, Text, View } from 'react-native';
export default function Home(data) {
return (
<View>
<Text>home screen</Text>
</View>
)
}
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: {
},
});
App.js
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Home from './Components/Home';
import Login from './Components/Login';
const Tab=createMaterialTopTabNavigator()
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator style={{marginTop:20}}>
<Tab.Screen name="home" component={Home}/>
<Tab.Screen name="login now" component={Login}/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
},
});
0 Comments