Absolute and Flexbox in real life

Question

I would like to put a white bar that will occupy the entire width at the bottom of the screen. To do this, I thought about using absolute positioning with inherited flexbox options.

With the code following it, something like this is displayed.

Here is my code:

 var NavigationBar = React.createClass({ render: function() { return( <View style={navigationBarStyles.navigationBar}> //Icon 1, Icon 2... </View> ); } }); var Main = React.createClass({ render: function() { return( <View style={mainStyles.container}> <NavigationBar /> </View> ); } }); var mainStyles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#456783', } }); var navigationBarStyles = StyleSheet.create({ navigationBar: { backgroundColor: '#FFFFFF', height: 30, position: 'absolute', flexDirection: 'row', bottom: 0, justifyContent: 'space-between' }, }); 

I'm new to CSS styling, and not all properties are available in React-Native. So any help is appreciated, thanks :)

Answer 1

Ok, solved my problem if someone passes by, here is the answer:

You just need to add the styles left: 0, and top: 0, , and yes, I'm tired.

 position: 'absolute', left: 0, top: 0, 

Answer 2

The first step is to add

 position: 'absolute', 

then if you want the whole element to be filled, add

 left: 0, right: 0, 

then if you want to put the item at the bottom add

 bottom: 0, // don't need set top: 0 

if you want to place the element at the top, replace bottom: 0 with top: 0

Answer 3

This solution worked for me:

 tabBarOptions: { showIcon: true, showLabel: false, style: { backgroundColor: '#000', borderTopLeftRadius: 40, borderTopRightRadius: 40, position: 'relative', zIndex: 2, marginTop: -48 } }