Sometimes, we want to use Image with a local file with React Native.

In this article, we’ll look at how to use Image with a local file with React Native.

How to use Image with a local file with React Native?

To use Image with a local file with React Native, we can call require to retrieve the image and set that as the source prop’s value.

For instance, we write:

import * as React from 'react';
import { Image, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [text, setText] = React.useState();

  return (
    <View>
      <Image source={require('./assets/snack-icon.png')} />
    </View>
  );
}

to call require with a local image path.

And then we set that as the source value to display the image.

Conclusion

To use Image with a local file with React Native, we can call require to retrieve the image and set that as the source prop’s value.