Styles are different on IOS and Android in 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