Absolute y Flexbox en React Native

Me gustaría poner una barra blanca que ocuparía todo el ancho en la parte inferior de la pantalla. Para hacerlo, pensé en usar el absoluteposicionamiento con los flexboxparámetros heredados .

Con el siguiente código, renderiza algo como esto .

Aquí está mi código:

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'
  },
});

Soy nuevo en el estilo en CSS y no todas las propiedades están disponibles en React-Native. Así que se agradece cualquier ayuda, gracias :)

Ok, resuelto mi problema, si alguien pasa por aquí está la respuesta:

Solo tenía que agregar left: 0,y top: 0,a los estilos, y sí, estoy cansado.

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

El primer paso sería agregar

position: 'absolute',

luego, si desea que el elemento tenga el ancho completo, agregue

left: 0,
right: 0,

luego, si desea poner el elemento en la parte inferior, agregue

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

si desea colocar el elemento en la parte superior, reemplácelo bottom: 0portop: 0

Esta solución funcionó para mí:

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