React Native Web issue with react-native-vector-icons

Question

I have made a website in React Native Web. There are two things i am struggling with 1.) React native vector icons not seen 2.) How do i deploy this website.

Answer 1

for your first query follow these steps:

In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)

{
  test: /\.ttf$/,
  loader: "url-loader", // or directly file-loader
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},

Then consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:

// Use prebuilt version of RNVI in dist folder
import Icon from 'react-native-vector-icons/dist/FontAwesome';

// Generate required css
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: FontAwesome;
}`;

// Create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyles;
} else {
  style.appendChild(document.createTextNode(iconFontStyles));
}

// Inject stylesheet
document.head.appendChild(style);

To answer your second query please visit this link:

https://www.youtube.com/watch?v=9McfnAxz23M

and follow steps accordingly.