So I am trying to use the Native Base Solito starter:
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