Absolute and Flexbox in React Native

Question

I would like to put a white bar which would take all of the width at the bottom of the screen  To do so I thought about using absolute positioning with the inherited flexbox parameters    With the following code it renders something like this    Here is my code    var NavigationBar   React createClass     render  function         return       lt View style  navigationBarStyles navigationBar  gt          Icon 1  Icon 2         lt  View gt                  var Main   React createClass     render  function         return         lt View style  mainStyles container  gt             lt NavigationBar   gt         lt  View gt                  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 styling in CSS and not all the properties are available in React-Native  So any help is appreciated  thanks

User · Answer

The first step would be to add  position   absolute     then if you want the element full width  add   left  0  right  0    then  if you want to put the element in the bottom  add  bottom  0     don t need set top  0   if you want to position the element at the top  replace bottom  0 by top  0

User · Answer

This solution worked  for me   tabBarOptions          showIcon  true        showLabel  false        style            backgroundColor    000           borderTopLeftRadius  40          borderTopRightRadius  40          position   relative           zIndex  2          marginTop  -48

User · Answer

Ok  solved my problem  if anyone is passing by here is the answer    Just had to add left  0  and top  0  to the styles  and yes  I m tired    position   absolute   left      0  top       0

[javascript] Absolute and Flexbox in React Native

Examples related to javascript

Examples related to css

Examples related to react-native