React native app doesn`t fill the whole screen - reactjs

Question

I can't get my app to fill the whole screen. Whatever i do, there is always a white bar on the bottom of the page. It's so strange because it works on some devices but not others. i'm going crazy over this!
Ive tried const { height, width } = Dimensions.get('window'); and setting the app height with that, and it actually worked once, but now i can't get it to work again. ive tried rewrapping everything in different ways, with different views and scrollviews.
ps.: i removed all functions and useless code so it's not too much code, but
here is my code
import React, { Component } from 'react';
import {
View,
Switch,
Text,
TextInput,
TouchableOpacity,
ImageBackground,
Image,
Linking,
StatusBar,
Dimensions,
} from 'react-native';
import { ScaledSheet } from 'react-native-size-matters';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
export default class App extends Component {
constructor() {
super();
};
}
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
keyboardShouldPersistTaps={'always'}
style={styles.teste}
showsVerticalScrollIndicator={false}>
<StatusBar backgroundColor="#50a9f3" />
<ImageBackground source={require('./background.png')} style={styles.imagemBackground}>
<View style={styles.campos}>
<Image
style={{ width: 110, height: 110, alignSelf: 'center' }}
source={require('./logo.png')}
/>
<View style={styles.item}>
<Text style={styles.texto}>M²s do ambiente</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={mQuadrado => this.setState({ mQuadrado })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de pessoas</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={pessoas => this.setState({ pessoas })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de eletrodomésticos</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={eqps => this.setState({ eqps })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de janelas </Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={jnls => this.setState({ jnls })}
/>
</View>
<View style={styles.switch}>
<Text style={styles.texto}>Recebe luz solar </Text>
<Switch
style={{ transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }] }}
thumbColor="#ffffff"
trackColor={{ true: '#c0c0c0' }}
value={this.state.switch}
onValueChange={value => this.setState({ switch: value })}
/>
</View>
<View style={styles.input}>
<TouchableOpacity style={styles.opacity} onPress={this.calcular}>
<Text style={styles.textoCalcular}>CALCULAR</Text>
</TouchableOpacity>
</View>
<View style={styles.resultadoBox}>
<Text style={styles.textoResultado}>Você precisará de</Text>
<Text style={styles.resultado}>{btu == '0' ? null : btu + '.000 BTUS'}</Text>
</View>
</View>
<View style={styles.banner}>
<TouchableOpacity
style={styles.bannerContainer}
onPress={() => Linking.openURL('https://matum.com.br/produtos-sisum/')}>
<Text style={styles.bannerTexto}>Gerencie suas manutenções preventivas e corretivas</Text>
<Text style={styles.bannerTexto}>Relatório PMOC simples</Text>
<Text style={styles.bannerTextoX}>Saiba mais</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</KeyboardAwareScrollView>
</View>
);
}
}
const { height, width } = Dimensions.get('window');
const heightCerto = height - StatusBar.currentHeight;
const styles = ScaledSheet.create({
container: {
flex: 1,
},
teste: {
flex: 1,
},
imagemBackground: {
flex: 1,
},
campos: {
flex: 95,
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: '20#s',
paddingTop: '12#s',
},
item: {
flex: 1,
},
switch: {
paddingTop: '15#s',
flexDirection: 'row',
justifyContent: 'flex-start',
flex: 1,
},
textoCalcular: {
fontSize: '15#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 2,
},
input: {
padding: '20#s',
alignItems: 'center',
flex: 1,
},
opacity: {
backgroundColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
borderColor: '#000000',
width: '190#s',
height: '39#s',
justifyContent: 'center',
alignItems: 'center',
},
resultadoBox: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(100,100,100,0.5)',
margin: 0,
borderColor: 'rgba(100,100,100,0.5)',
borderRadius: '10#s',
},
resultado: {
fontSize: '28#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
banner: {
flex: 10,
backgroundColor: 'rgba(140,140,140,0.5)',
margin: 0,
borderColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
alignSelf: 'stretch',
},
bannerContainer: {
alignItems: 'center',
},
bannerTexto: {
color: '#ffffff',
fontSize: '12#s',
},
bannerTextoX: {
color: '#50a9f3',
fontSize: '10#s',
textShadowColor: 'black',
textShadowRadius: 4,
},
inputText: {
fontSize: '12#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
height: '38#s',
},
texto: {
fontSize: '13#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 5,
},
textoResultado: {
fontSize: '16#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
});

Answer 1

I think you're talking about the image background but not totally sure. I was able to get it to stretch to the full height by adding the following height declaration:
imagemBackground: {
flex: 1,
height: height,
},
link to example: https://snack.expo.io/r1Y-zpwMH

Answer 2

You are using flex:1 many times in style that is the problem.
please give flex:1 in container style and remove all flex:1 in other styles instead of flex:1 you can use width and height in percentage.
like style={{width:'100%',height:'40%'}}.
Thank you!