CODEWITHSUNDEEP
androidreactjsreact-native
Jithin Varghese
Jithin Varghese

Reputation: 2228

Images are not fit in android react native

I have a splash screen that displays an image at the center. The image is perfectly visible and fit in iphone. But in android the image is cropped and some portion from top and bottom is not seen.

const win = Dimensions.get('window');
const ratio = win.width / 817;

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.logoContainer}>
                <Image
                    style={styles.logo}
                    resizeMode={'contain'}
                    source={require('../../../assets/logo.png')}
                />
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#0d2c4f',
    justifyContent: 'center'
},
logoContainer: {
    textAlign: 'center',
    paddingLeft: 20,
    paddingRight: 20
},
logo: {
    width: win.width,
    height: 123 * ratio,
    resizeMode: 'contain'
}
});

Why the images are different in iphone and android, is there anything else to be done in my code. How to fix the image in android. Really need help.

Upvotes: 1

Views: 76

Answers (1)

hong developer
hong developer

Reputation: 13926

You can try Platform 

const win = Platform.OS === 'ios' ? Dimensions.get('window') : Dimensions.get('screen')
resizeMode={'contain'}
...
logo: {
    width: win.width,
    height: 123 * ratio

Upvotes: 1

Related Questions