Function not filling whole screen - react-native

Question

Im trying to make an app for the weather in a certain place in the world given by lat and long. The thing is that when I check the screen the applicaction only shows like 1/5 in the center of the screen with the function executed to show the temperature.
Can't upload pictures because of my reputation. But imagine this is the screen: [----|||----] only the ||| portion shows.
I dont know much about react-native so im just searching and doing whatever somebody else do, i have tried forcing a view style "global" for the class but it seems itdoesnt work if you dont put it inside the render, return section which i cant move, atleast to the places i tried.
Didn't include the code inside the functions.
class WeatherScreen extends React.Component {
state = {
isLoading: true,
temperature: 0,
weatherCondition: null,
error: null
};
componentDidMount() {
...
}
fetchWeather(lat, lon) {
fetch(....
}
render() {
const { isLoading, weatherCondition, temperature } = this.state;
return (
<View style={styles.container}>
{isLoading ? (
<View style={styles.loadingContainer}>
<Text style={styles.loadingText}>Fetching The Weather</Text>
</View>
) : (
<Weather weather={weatherCondition} temperature={temperature}/>
)}
</View>
);
}
}
export default WeatherScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

Do not apply alignItems and justifyContent to the main screen, it will bring your screen to center. If you want your content in the center then add these properties to children View of main container/View.
Also get screen width and height from react-native dimensions and add them to main container style(height, width).
Try this
import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
class YourClass extends Component {
...your code ...
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
height: height,
width: width
},
});