Skip to content

Instantly share code, notes, and snippets.

@akulsr0
Last active April 12, 2023 10:32
Show Gist options
  • Save akulsr0/691d4d4f7d79bfbea2dc1cda383ef19e to your computer and use it in GitHub Desktop.
Save akulsr0/691d4d4f7d79bfbea2dc1cda383ef19e to your computer and use it in GitHub Desktop.
React Native UI App - React Navigation Bottom Tabs
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// npm i @react-navigation/bottom-tabs react-native-elements
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Icon } from 'react-native-elements';
function TabA() {
return (
<View style={styles.container}>
<Text style={styles.text}>Tab A</Text>
</View>
);
}
function TabB() {
return (
<View style={styles.container}>
<Text style={styles.text}>Tab B</Text>
</View>
);
}
function TabC() {
return (
<View style={styles.container}>
<Text style={styles.text}>Tab C</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function ReactNavigationBottomTabs() {
return (
<Tab.Navigator
tabBarOptions={
{
// Default Color is blue you can change it by following props
// activeTintColor: '#ff4757',
// inactiveTintColor: '#ff6b81',
// Default Background Color is white you can change it by following props
// activeBackgroundColor: '#ced6e0',
// inactiveBackgroundColor: '#ced6e0',
}
}
>
<Tab.Screen
name='Tab A'
component={TabA}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name='home' color={color} size={size} />
),
}}
/>
<Tab.Screen
name='Tab B'
component={TabB}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name='message' color={color} size={size} />
),
}}
/>
<Tab.Screen
name='Tab C'
component={TabC}
options={{
tabBarIcon: ({ color, size }) => (
<Icon name='person' color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 40,
fontWeight: 'bold',
},
});
@Petasco
Copy link

Petasco commented Aug 31, 2022 via email

@akulsr0
Copy link
Author

akulsr0 commented Aug 31, 2022

@Petasco Ask on stackoverflow and share that link with me on - https://akulsrivastava.com/contact

@Petasco
Copy link

Petasco commented Aug 31, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment