Layout a button from superview's bottom in react-native

Question

I wanna render a button in react native like this:

Hear is my code :

    class Test extends Component {
      render() {
        return (
          <View>
            <TouchableHighlight style={{marginBottom:20,height:40,backgroundColor:'blue',justifyContent:'center'}}>
            <Text style={{alignSelf:'center',color:'white'}}>Login</Text>
            </TouchableHighlight>          
          </View>
        );
      }
   }

But the render result for mentioned above is :

How to modify my code？

Answer 1

Use position: 'absolute' in this case, like:

loginButton: {
   position:'absolute',
   bottom: 0,
   height:40,
   backgroundColor:'blue',
   justifyContent:'center',
   width: width
 }

and render should be:

render() {
   return (
      <View style={styles.loginButton}>
         <TouchableHighlight>
            <Text style={styles.loginButtonText}>Login</Text>
         </TouchableHighlight>          
      </View>
   );
}

Here is the full working code: https://rnplay.org/apps/6qMTdA