Introduction

In React Native, using a variable for an image source depends on whether the image is bundled locally or loaded remotely. Remote URLs can be passed through variables directly. Local bundled images are different: require must be statically analyzable, so you cannot build the file path dynamically at runtime. That distinction is the key to solving most image-source questions in React Native.

Remote Images Can Use Variables Directly

If the source is a URL, just store it in a variable and pass it through the uri form.

1import React from "react";
2import { Image, View } from "react-native";
3
4export default function App() {
5  const imageUrl = "https://example.com/avatar.png";
6
7  return (
8    <View>
9      <Image
10        source={{ uri: imageUrl }}
11        style={{ width: 100, height: 100 }}
12      />
13    </View>
14  );
15}

This is fully dynamic. You can swap the URL based on props, state, or API data.

Local Images Cannot Use Dynamic require

This does not work:

const fileName = "avatar";
const image = require(`./images/${fileName}.png`);

React Native’s bundler needs to know local assets at build time. A runtime-computed path cannot be resolved the way a normal JavaScript string can.

That is why developers often see confusing errors when trying to treat local assets like ordinary strings.

Use a Lookup Object for Bundled Assets

The usual fix is to map keys to static require calls.

1import React from "react";
2import { Image } from "react-native";
3
4const images = {
5  avatar: require("./images/avatar.png"),
6  logo: require("./images/logo.png"),
7  banner: require("./images/banner.png"),
8};
9
10export default function Example() {
11  const imageKey = "avatar";
12
13  return (
14    <Image
15      source={images[imageKey]}
16      style={{ width: 100, height: 100 }}
17    />
18  );
19}

This keeps the choice dynamic while leaving each require static enough for the bundler.

Choose Images from Props or State

This pattern works naturally with props and state.

1function ProfileImage({ type }) {
2  const images = {
3    user: require("./images/user.png"),
4    admin: require("./images/admin.png"),
5  };
6
7  return (
8    <Image
9      source={images[type] ?? images.user}
10      style={{ width: 80, height: 80 }}
11    />
12  );
13}

The fallback matters because an unknown key would otherwise produce undefined, which breaks rendering.

Use Variables with Remote or Packaged Sources Correctly

A practical rule:

• remote image: source={{ uri: variable }}
• local bundled image: source={lookup[key]}

Trying to unify both into one naive string-based approach is where most bugs come from.

If you need both styles in one component, branch deliberately:

const source = isRemote
  ? { uri: imageUrl }
  : images[imageKey];

That makes the source type explicit.

Why React Native Works This Way

Bundled assets are processed during the app build so the platform can package and reference them efficiently. For that to work, Metro needs to see the asset references statically.

Remote URLs are different because they are not bundled into the app. They are resolved at runtime over the network, so a normal variable is fine.

Once you understand that build-time versus runtime difference, the API behavior makes much more sense.

Common Pitfalls

The most common mistake is attempting require(variable) for local image files. That will not work because the bundler cannot inspect the final path dynamically.

Another issue is forgetting to set width and height on the Image style. Even a correct source may appear invisible without dimensions.

Developers also sometimes assume remote and local sources use the same structure. They do not. Remote images use the uri object form, while local bundled assets use the result of require.

Finally, when using lookup objects, always handle missing keys so the UI does not crash on unexpected input.

Summary

• Remote image URLs can be stored in variables and used with source={{ uri: ... }}.
• Local bundled images cannot use dynamic require.
• For local assets, map keys to static require calls and select from that object.
• Treat remote and local sources as two different source types.
• Add dimensions and sensible fallbacks to make image rendering reliable.