Search code examples
react-nativescreen-densitypixel-ratio

Requiring static images in React-Native

My RN app (v0.19.0, ios and android) requires a loading/splash screen (there can be occasionally some data to load at startup), so I am trying to understand how to provide the right set of images for this screen across various devices.

Code is:

  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={require('../assets/splash/Default.png')} resizeMode={Image.resizeMode.cover} />
      </View>
    );
  }

As far as I can tell, I need to provide a set of images with the right pixel ratio? How is that even relevant to the various screen sizes? Furthermore, RN docs only mention 2x and 3x, but docs on PixelRatio indicate there's also a 1.5 and 3.5? (And, how is that indicated in the file name? Is it [email protected]?) How do I account for portrait vs landscape orientation?

The docs seem surprisingly light on this topic.

Solution

  • react-native doesn't (IIRC) have any support for choosing image size based on orientation and size automatically.

    I would suggest instead that you build a 'SplashScreen' component and lay it out using flexbox as usual. That'll have the added benefit of saving you from having to provide dozens of images at different sizes!