React Native: White space around image - react-native

Question

I am not able to remove white space around the "PRACTICIA" logo image and so my buttons are being pushed down to the bottom. Can someone please help me with this? My code is here
My screenshot is down at the bottom. Here is the code for the entire app, its in the app.js file.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import {
Button,
FormLabel,
FormInput,
FormValidationMessage,
Divider } from 'react-native-elements';
import { CardSection } from './src/components/CardSection';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'PRACTICIA'
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Image
style={{ flex: 1, height: 100, width: undefined }}
resizeMode="contain" source={require('./images/practicialogo.png')}
/>
<Text style={styles.textStyle}>Sign up as a...</Text>
<Divider style={{ height: 10, backgroundColor: 'white' }} />
<Button
raised
backgroundColor="#3399ff"
borderRadius={20}
onPress={() => navigate('Teacher')}
title="TEACHER"
/>
<Divider style={{ height: 10, backgroundColor: 'white' }} />
<Button
raised
backgroundColor="green"
borderRadius={20}
onPress={() => navigate('Parent')}
title="PARENT"
/>
<Divider style={{ height: 10, backgroundColor: 'white' }} />
<Button
raised
backgroundColor="brown"
borderRadius={20}
onPress={() => navigate('Student')}
title="ADULT STUDENT (18+)"
/>
<Text style={styles.text2Style}>Already Registered?</Text>
<Button
raised
flex='2'
backgroundColor="grey"
borderRadius={20}
onPress={() => navigate('Login')}
title="Login"
/>
</View>
);
}
}
class TeacherSignUp extends React.Component {
static navigationOptions = {
title: 'TEACHER SIGN UP',
};
render() {
return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Divider style={{ height: 20, backgroundColor: 'white' }} />
<Text style={styles.textStyle}>Sign Up</Text>
<FormLabel>Email</FormLabel>
<FormInput />
<FormLabel>Password</FormLabel>
<FormInput />
<FormLabel>First Name</FormLabel>
<FormInput />
<FormLabel>LastNme</FormLabel>
<FormInput />
<Divider style={{ height: 10, backgroundColor: 'white' }} />
<Button
raised
backgroundColor="brown"
borderRadius={0}
// onPress={() => navigate()}
title="SUBMIT"
/>
</View>
);
}
}
class ParentSignUp extends React.Component {
static navigationOptions = {
title: 'PARENT SIGN UP',
};
render() {
return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Text>Sign Up</Text>
</View>
);
}
}
class StudentSignUp extends React.Component {
static navigationOptions = {
title: 'ADULT STUDENT SIGN UP',
};
render() {
return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Text>Sign Up</Text>
</View>
);
}
}
class Login extends React.Component {
static navigationOptions = {
title: 'LOGIN',
};
render() {
return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<FormLabel>Email/Username</FormLabel>
<FormInput />
<FormLabel>Password</FormLabel>
<FormInput />
<Divider style={{ height: 10, backgroundColor: 'white' }} />
<Button
raised
backgroundColor="grey"
borderRadius={0}
// onPress={() => navigate()}
title="SUBMIT"
/>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Teacher: { screen: TeacherSignUp },
Parent: { screen: ParentSignUp },
Student: { screen: StudentSignUp },
Login: { screen: Login },
});
export default class App extends React.Component {
render() {
return <SimpleApp />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
},
textStyle: {
alignSelf: 'center',
color: '#617189',
fontSize: 20,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
text2Style: {
alignSelf: 'center',
color: '#617189',
fontSize: 14,
fontWeight: '300',
paddingTop: 10,
paddingBottom: 10
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
here is the screenshot, there should not be that much white space around the logo:
Here is the, image, which does not have that much white space, so i dont understand where the white space is coming from:

Answer 1

Thanks All,
I believe the answer lies in the flex property. giving the image a prop of flex:1 will take up the entire container. So i played around with giving it a relative value and started with "1 / 2" (according to EsLint, those spaces in fraction are required). this at once solved the problem! I then played around with making the fraction larger and larger (3 / 4, 4 / 5, 7 / 8 etc.) till i got to where i wanted to be. This seemed to solve the issue. Result is below. Not sure its the only solution or even the best solution but it seems to work. Happy to receive feedback and commentary.
Revised line of code:
style={{ flex: 7 / 8, height: undefined, width: undefined }}