React-native: How to make image Aspect Fill?

[VansonLeung]

How do I make a splash screen , which is supposed to be a fullscreen image

I need to scale it in aspect (for All screen sizes) and do not alter the scale ratio between width & height.

I need no empty gaps at the edge of the images (not Aspect Fit)

What CSS / Flexbox style should I set? Is it supported ???

[brentvatne]

resizeMode="cover"

https://facebook.github.io/react-native/docs/image.html#resizemode

[satya164]

resizeMode: cover zoomed in the image a bit too much for me. Also, it was giving warnings when I had content inside the Image component. The following worked for me,

import React from "react-native";

const {
    StyleSheet,
    View,
    Image
} = React;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        alignItems: "stretch"
    },
    cover: {
        flex: 1,
        width: null,
        height: null
    }
});

export default class FullScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image source={require("image!my_image")} style={styles.cover}>
                    ...
                </Image>
            </View>
        );
    }
}

[hossamghareeb]

resizeMode: 'contain'worked for me

contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

[atulmy]

If you want to fit to width (something like for a logo):

<Image
  resizeMode={'contain'}
  source={imageLogo}
  style={styles.logo}
 />

const styles = StyleSheet.create({
  logo: {
      width: '100%'
   }
})