Question 35377 in React native Question posted in
The official React Native documentation can be found here.

Images not showing with Expo/React Native and Next

So I am trying to use the Native Base Solito starter:

https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript

This is the first time I’ve tried to work with Next, and I am trying to get image support with Expo.

Per the Expo documentation:

https://docs.expo.dev/guides/using-nextjs/

I should be able to just use next-image, which I am doing:

const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')

module.exports = withNativebase(
  withImages({
    dependencies: [
      '@expo/next-adapter',
      'next-images',
      'react-native-vector-icons',
      'react-native-vector-icons-for-web',
      'solito',
      'app',
    ],
    nextConfig: {
      projectRoot: __dirname,
      reactStrictMode: true,
      webpack5: true,
      webpack: (config, options) => {
        config.resolve.alias = {
          ...(config.resolve.alias || {}),
          'react-native$': 'react-native-web',
          '@expo/vector-icons': 'react-native-vector-icons',
        }
        config.resolve.extensions = [
          '.web.js',
          '.web.ts',
          '.web.tsx',
          ...config.resolve.extensions,
        ]
        return config
      },
    },
  })
)

Despite this, my images are just not displaying in Next. Elements are generated with the styling I am applying to the image elements, but the images themselves are not displaying.

I tried both universal routing import and direct path:

import GrayBox from 'resources/images/graybox.png'
import Car from '../../../../packages/app/resources/images/car.png'

As well as several different images uses:

<Image
  source={require('../../../../packages/app/resources/images/car.png')}
  style={{ width: 500, height: 750 }}
  alt="test"
/>

<Image
  source={GrayBox}
  key={index}
  style={{ width: 500, height: 750 }}
  alt="test2"
/>

<Image
  source={Car}
  key={index}
  style={{ width: 500, height: 750 }}
  alt="test3"
/>

None of these images are displayed.

I’ve tried both the react native image:

https://reactnative.dev/docs/image

As well as the native base wrapped one.

Still nothing.

Any clue what is wrong in my configuration to cause images to not show?

I suspect it’s something in my next.config.js

EDIT:

If I add:

  plugins: [withImages, withFonts, [withExpo, { projectRoot: __dirname }]],

to my next.config.js, I get the following error:

../../packages/app/resources/images/cart_black.png
TypeError: unsupported file type: undefined (file: undefined)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This seems to solve my problem, if I add it to my next.config.js file:

    plugins: [withImages, [withExpo, { projectRoot: __dirname }]],
  nextConfig: {
    images: {
      disableStaticImages: true,
    },
    ...
    }

  2. 0

    I need more information (that I have mentioned as comment) to say the exact solution but I guess two things:

    1. You have used wrong prop to pass the image to the <Image component

      import SomeThingPng from '[/someWhere/something.png]';

<Image
  src={SomeThingPng} // <= Don't use source

      Instead of using source use src

    2. My second guess is your assets path loading that you have configured in the:

      nextConfig: {
   projectRoot: __dirname,

      Maybe you should some additional name to __dirname or use basePath for changing your publicPath of Webpack to correctly load your images in the browser with the correct image address. actually, my second guess is Wrong image path address

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search