I've spent countless hours trying various methods to accomplish this task, but unfortunately, I have had no luck so far.
My goal is to utilize the Solito Nativebase Universal Typescript repository for this purpose:
I have exhaustively explored and attempted everything outlined on this page multiple times:
https://github.com/GeekyAnts/nativebase-templates/issues/43
The contents of my current next.config.js file are as follows:
/** @type {import('next').NextConfig} */
const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')
module.exports = withNativebase({
dependencies: [
'@expo/next-adapter',
'next-images',
'react-native-vector-icons',
'react-native-vector-icons-for-web',
'solito',
'app',
],
plugins: [
[withFonts, { projectRoot: __dirname }],
withImages,
[withExpo, { projectRoot: __dirname }],
],
nextConfig: {
images: {
disableStaticImages: true,
},
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
},
},
})
I have also made attempts using @native-base/icons, but without success.
This is intended to produce the following outcome:
export const Cart = (props: IIconStyles) => {
return (
<Icon
as={FontAwesome5}
name="shopping-cart"
size={props.size ? props.size : 6}
color="gray.200"
/>
)
In theory, it should display a shopping cart icon, however, instead, what I am seeing is depicted in this image:
https://i.stack.imgur.com/I9JMq.png
Evidently, there seems to be an issue related to fonts or some other factor hindering the loading of the SVG.
I am struggling to identify the root cause - I have tried modifying my _document.tsx file according to the guidelines provided here:
I have also included this snippet in my next.config.js:
config.module.rules.push({
test: /\.ttf$/,
loader: "url-loader", // or directly file-loader
include: path.resolve(__dirname, "node_modules/@native-base/icons"),
});
When attempting something like this:
import fontsCSS from '@native-base/icons/FontsCSS';
in my _document.tsx file, I encounter the following error:
Module not found: Can't resolve '@native-base/icons/lib/FontsCSS'
Even though I have @native-base/icons installed in my package.json and referenced in my Babel configuration per the instructions mentioned above.
How can I successfully integrate vector icons in Next.js?
Note that this pertains specifically to Next.js/Expo/React Native development.