CODEWITHSUNDEEP
javascriptreactjsreact-nativenext.jsexpo
Steven Matthews
Steven Matthews

Reputation: 11285

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)

Upvotes: 6

Views: 3017

Answers (2)

Steven Matthews
Steven Matthews

Reputation: 11285

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,
    },
    ...
    }

Upvotes: 4

AmerllicA
AmerllicA

Reputation: 32522

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

Upvotes: 1

Related Questions