Trouble with react native layout - react-native

Question

I have a problem with my react native layout iPhone 5c.
But iPhone 7 and iPad look good.
How to fix it?
My buttons code:
_renderButton(title, onPress, active) {
var style = (active) ? styles.activeButtonText : styles.buttonText;
return (
<TouchableHighlight style={styles.button} onPress={onPress}>
<Text style={style}>
{title}
</Text>
</TouchableHighlight>
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.controls}>
{this._renderButton("LISTEN", () => {this._playOriginalAudio()})}
{this._renderButton(this.state.recordingText, () => {this._record()}, this.state.recording )}
{this._renderButton("LISTEN TO RECORDING", () => {this._play()} )}
{this._renderButton("SUBMIT", () => {this._send()} )}
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#2b608a",
},
controls: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
button: {
padding: 20
},
disabledButtonText: {
color: '#eee'
},
buttonText: {
fontSize: 20,
color: "#fff"
},
activeButtonText: {
fontSize: 20,
color: "#B81F00"
},
points: {
backgroundColor: 'transparent',
position: 'absolute',
top: 72,
left: 56,
width: 90,
textAlign: 'center',
color: '#69d2e7',
fontSize: 50,
fontWeight: "100"
},
headerText: {
paddingBottom: 10,
fontSize: 20,
color: "#69d2e7"
}
});
I've tried to test app with iPhone 5 simulator, and I have no any style problem. Looks like the problem only with real iPhone 5 device. Maybe it is bug.

Answer 1

It might help to see your specific style sheet, but I am guessing you would benefit by importing the Dimensions module that React Native provides.
Dimensions Module
Then you can get the height and width of the device your app is running on, to change the styles appropriately.