React Native dark mode icons made easy with tintColor

Light and dark mode icons styled using Image component’s tintColor style property

In today’s, Today I Learn post, I wanted to share a small trick that I wish I knew earlier that will make working with dark mode icons a little easier in a React Native application.

React Native’s Image component comes with a really useful tintColor style property that can be really handy when working with Dark Mode. tintColor works by changing the colour of all the solid, non-transparent pixels to your desired colour of choice.

This means that if you have some icons in your application that you need to dynamically update for Dark Mode, instead of switching between two sets of icons:

const myIcon = darkMode
    ? require('./assets/my-icon-dark-mode.png')
    : require('./assets/my-icon-light-mode.png');

<Image style={styles.icon} source={myIcon} />

You can instead use a single version of the icon and add a tintColor style:

const iconColour = { tintColor: darkMode ? '#FFFFFF' : '#000000' } 

<Image style={[styles.icon, iconColour]} source={require('./assets/my-icon.png')} />

This will update the solid strokes and shapes of your icon with the selected tintColor. I certainly wish I knew about this trick a little sooner as it would have saved me some time of manually having to create light and dark mode versions of my icons!