react native border bottom code example

Example 1: border bottom react native

It seems borderBottom doesn't work for the Text component. You can either add a View wrapper and supply borderBottom to it or add a TextInput and make editable={false}

<View style={styles.headerWrapper}>
    <Text style={styles.header}> Registration </Text>
 </View>
...

headerWrapper: {
    borderBottomColor: 'red',
    borderBottomWidth: 2,
    marginBottom: 30,
},
header: {
    fontSize: 36,
    alignSelf: 'auto',
    color: 'red',

},

Example 2: create bottom navigation bar react native

Copyimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {  return (    <Tab.Navigator>      <Tab.Screen name="Home" component={HomeScreen} />      <Tab.Screen name="Settings" component={SettingsScreen} />    </Tab.Navigator>  );}

Example 3: react native material bottom tabs

yarn add react-navigation-material-bottom-tabs react-native-paper