Styles are different on IOS and Android in React Native - react-native

Question

My render function is as follows :
render() {
return (
<View style={styles.container}>
<Camera
style={styles.camera}
ref={(cam) => {
this.camera = cam;
}}
onZoomChanged={this.onZoomChanged.bind(this)}
onFocusChanged={this.onFocusChanged.bind(this)}
torchMode={this.state.torch}
flashMode={this.state.flash}>
{this.imageOverlay()}
</Camera>
<View style={styles.commandBar}>
<TouchableHighlight onPress={this.fromLocal.bind(this)}>
<View style={styles.capture}>
<Icon .../>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this.takePicture.bind(this)}>
<View style={styles.captureN}>
<Icon style={{transform: [{rotate: '90deg'}],}} .../>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this.onTorchToggle.bind(this)}>
<View style={styles.capture}>
<Icon ... />
</View>
</TouchableHighlight>
</View>
</View>
);
}
I removed I few TouchableHighlight from the code above to make te code smaller.
And the styles are as follows:
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
camera: {
justifyContent: 'flex-end',
alignItems: 'center',
width: dw.width,
height: dw.height,
flexDirection:'column'
},
commandBar: {
flex: 0,
bottom: 85,
flexDirection: 'row',
alignItems: 'center',
justifyContent: "center"
},
capture: {
backgroundColor: '#444',
opacity: 0.7,
borderRadius: 5,
padding: 8,
paddingTop: 5,
paddingBottom: 5,
width: 55,
marginLeft: 8,
alignItems: 'center',
transform: [{rotate: '90deg'}],
},
firstCapture: {
marginLeft: 0
},
captureN: {
backgroundColor: '#444',
opacity: 0.7,
borderRadius: 5,
padding: 10,
width: 60,
marginLeft: 8,
alignItems: 'center'
},
imageContainer: {
flexDirection: 'row',
alignItems: 'flex-end'
},
innerImage: {
flex: 0,
height: dw.width,
width: dw.height,
marginBottom: 170,
resizeMode: 'contain',
transform: [{rotate: '90deg'}]
}
});
I want to take the photo with an image overlay in the landscape mode. On IOS it works fine, it looks as :
But on Android it doesn't work, I'm getting the screen as follows:
Any idea how to solve it?

Answer 1

Maybe you could try using different styles for Android and iOS with Platform. For example:
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });
Source: React Native Platform