StyleSheet /CSS : Placing Components in React Native

Question

I am working on a React Native App . The components are vertically center as I desire but are all aligned on the bottom and can't get them move up towards the top of the screen.

Please take a look at the layout screen (attached here).

How can I get them to move up top?

Please Note : The yellow color in the screen is to figure out how far the component's view stretches. I could not figure out to adjust the 'yellow' view. The 'yellow' view is only suppose to consist the donut/menu button .

<View style={styles.container}>


                    <TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
                         <Image
                             source={menu}
                            style={{width: 25, height: 25, marginLeft: 5}}
                         />
                      </TouchableOpacity>



                        <TextInput style={styles.addText} placeholder="Add New Item"/>



                            <Button style = {styles.submitButton} title = "Add" />


                       <TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
                            <Text style={{fontSize:14}}> Take Picture </Text>
                        </TouchableOpacity>


                            {this.state.isCameraVisible ? this.takePicture() : null }



                    </View>

        );
    }

}

const styles = StyleSheet.create ({

       container:{
           flex:1,
           flexDirection: 'column',
           alignItems:'center',
           flexGrow: 1,
           justifyContent: 'center',
           backgroundColor: 'blue'

       }, 

       drawerButton:{
        flex:1,
        flexDirection:'row',
        alignSelf:'flex-start',
        backgroundColor:'yellow'    
       },

        menuButton: {
            height:50,
            flex:1,
            flexDirection:'column',
            alignSelf:'flex-start',
            backgroundColor:'yellow',



        },

        addText:{

            flex:1,
            flexDirection:'column',
            justifyContent:'center',
            backgroundColor:'white',
            borderBottomColor: 'black',
            borderBottomWidth: 2,
            alignSelf:'center',
            maxHeight:50,

          },

        submitButton:{

            justifyContent:'center'
        },

        pictureButton:{
            backgroundColor:'white',
            justifyContent: 'center',

        },

});

Thank you

Answer 1

You have given flex:1 inside the style={styles.drawerButton}, thats why its taking up the entire space and other things are pushed to the end of the screen, please remove flex:1 from that, and also remove justifyContent: 'center' from container style. Then all the content will be moved to the top