Saturday 30 July 2022

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 image uses:

<Image
  source={require('../../../../packages/app/resources/images/car.png')}
  style=
  alt="test"
/>

<Image
  source={GrayBox}
  key={index}
  style=
  alt="test2"
/>

<Image
  source={Car}
  key={index}
  style=
  alt="test3"
/>

None of these images display.

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



from Images not showing with Expo/React Native and Next

No comments:

Post a Comment