How to position a child component in react native - react-native

Question

I am trying to position my bottomnavbar to the bottom of my screen, but is is not working?
I've been trying to set the position to absolute and then bottom: 0, but if I do it in the app.js component on or do it straight in the stylesheet of the bottomNavbar.js component, none of it works.
here is my app.js component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
And here is my BottomNavbar component:
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
},
});
export default BottomNavbar;
Now I would like the bottomnavbar to show up at the bottom of the phonescreen, but I cannot figure out how to do that.

Answer 1

Try this one
import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class BottomNavbar extends Component {
render() {
return (
<View style={styles.container}>
<Text>insights</Text>
<Text>Incidents</Text>
<Text>PLUS</Text>
<Text>Team Alerts</Text>
<Text>More</Text>
</View>
);
}
}
class App extends Component {
render() {
return (
<View style={styles.appContainer}>
{/* ...other components */}
<BottomNavbar />
</View>
);
}
}
const styles = StyleSheet.create({
appContainer: {
flex: 1,
},
container: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'grey',
position: 'absolute',
bottom: 0,
width: '100%',
height: 80,
},
});
AppRegistry.registerComponent('myApp', () => App);