react-native button not visible

Question

I'm trying to make a simple login screen where i have 2 TextInputs and a button inside a view.

The TextInputs are visible,but the button is not visible when i keep it inside the view

Below is the code for the login screen

import React, { Component } from 'react';

import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Button
} from 'react-native';


export default class Login extends Component {

    constructor(props) {
         super(props);
        this.state = {};
    }

    onButtonPress= () => {
        Alert.alert('Button has been pressed!');
        };

    render() {
    return (
        <View style={{flexDirection: 'column', padding: 20}}>

            <View style={{justifyContent: 'center',alignItems: 'center',height:250}}>
                <Image style={{height:100}} source={require('../img/jpeg.jpg')} />
            </View>

            <View style={{flex:1}}>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1,marginBottom:10}}
                    onChangeText={(text) => this.setState({text})}          
                    value={this.state.text}
                    placeholder="Username"
                 />
                 <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(password) => this.setState({password})}          
                    value={this.state.password}
                    placeholder="Password"
                    password={true} 
                 />
                  <Button 
                    onPress={()=> {this.onButtonPress()}}
                    title='Add ToDo'
                    style={{height:40,backgroundColor:'#1e90ff'}}/>         


            </View >   

      </View>
    );
  }

}

adding the height is also not working. if i remove the button and add it outside the view then i becomes visible

Screenshots

It's a simple thing and not working.

Answer 1

you forgot to add flex:1 at your root view

<View style={{flex:1,flexDirection: 'column', padding: 20}}>