Tip for Managing Static Images in React Native

November 8, 2019

Here's a quick and easy way to manage your static images that needs to get bundled into your mobile app when building with React Native.

Why I made this Component?

When I was working on my first mobile app using React Native, I ran into an issue where static images were not getting rendered on Android. Turns out if you are bundling static images for your App on Android, the images must be in the same root folder as the component that is using it.

This turned into a huge mess were the same images were getting required into different components. And if one of those images were updated, I would have to go and find which components where using it and update all of them. To solve this problem, I came up with the Figure component.

What is the Figure Component?

The Figure component is just a wrapper for the Image component that comes with React Native. This is the what the Figure component looks like:

import React from 'react';
import PropTypes from 'prop-types';
import { Image } from 'react-native';
import Images from './Images';

const Figure = (props) => {
  const img_styles = [props.sizes];

  if(props.custom_style != undefined) {
    img_styles.push(props.custom_style)
  }

  return <Image style={img_styles} source={Images[props.img_key]}/>
}

Figure.propTypes = {
  img_key: PropTypes.string.isRequired,
  sizes: PropTypes.shape({
    width: PropTypes.any.isRequired,
    height: PropTypes.any.isRequired,
  }),
  custom_style: PropTypes.object
}

export default Figure;

Pretty simple, right? Using the props that get passed down, it uses them to first build the styles and then it grabs the static image from an Images object.

How do I use this in my Projects?

1. Clone the repo down here: Figure Component Repo

2. Copy the Figure folder and add it to your mobile app's component directory.

3. Grab all of the static images that you want to use for your mobile app and add it into the Figure component's images directory.

4. Edit the Images.js file inside the Figure component and require all the assets that you've just added into the images directory.

/**
 * If you added an image called logo.png into the images folder, in the Images.js file, it
 * would look like this:
 */
export default {
  ...
  logo: require('./images/logo.png'),
  ...
}

5. Import the Figure component to the component you want to use it in.

import Figure from 'path_to_where_you_put_the_figure_component';

6. In your component's return, declare a Figure component.

...
return(
  <Figure
    img_key="logo" // Key you declared in the Images.js file
    sizes={{
      width: 200, // Image width in INT or percent(STRING) ie: "50%"
      height: 200 // Image height in INT or percent(STRING) ie: "80%"
    }}
    // Any valid React Native css values can go into this customStyle prop
    custom_style={{
      marginRight: 200,
      marginLeft: 200,
      marginBottom: 20
    }}
  />
)
...

From there, you should see your image displayed on the screen. That's it. Pretty simple like I said earlier. If you have any questions or run into any issues, please report them on Github and I will do my best to reply and address them. Till the next post!