https://developers.google.com/fonts/docs/material_symbols
I was following this developer guide and there is instructions for iOS and android apps but none for react native. I was wondering if there's any npm packages that can render material symbols for react. Only way i know is to download the svgs and serve from an assets folder.
You can use react-native-vector-icons to import your font and icoMoon to define the name of each icon.
See the documentation here: React Native Vector Icons - Custom Fonts
Related
I'm creating a react native library of components. This library will include typography. How can I include a font with this library? So that when I go to import the library into another react native project the font is automatically installed?
I know if I was using expo I could use expo-font to async import fonts. Is there a way of doing this without expo?
I am using native-base library in react native. I have done following steps to change font but it does not work:
I pasted myfont.ttf in this directory:
node_modules/native-base/Fonts
I went to the following directory:
node_modules/native-base/src/theme/variables/...
and changed all font families into myFont.ttf in all three files (commonColor.js, material.js and platform.js)
Please help me in this issue.
You have to first eject NativeBase's theme, you can do that by
following the docs
here.
Then, add font to Android and iOS respectively, this
article
shows a good guide on how to do that.
Lastly, you can update the theme with your custom font on ./native-base-theme/variables/<theme-you-use>.js, also describe on the same docs above
I've got some questions regarding React Native Web. I haven't really wrapped my head around how it works so I'm hoping to get some answers.
Exactly, what happens when we "alias" the React Native to Web?
When working with Expo, why isn't some packages available? For
example, the LinearGradient get's an error saying it can't be found.
I want to use Netlify Identity Widget, but that renders in HTML. How
do I use that with React Native Web?
So in general, how do I develop in React Native Web? I need to know how to port npm packages so I can work with them.
Super thankful for any advice!
Exactly, what happens when we "alias" the React Native to Web?
It means the library react-native-web will convert the react-native components into HTML/CSS tags.
Here an example:
<View>
<Text style={{color: 'red'}}>I'm an awesome text</Text>
</View>
Will become into when rendered on browser:
<div>
<span style="color: red">I'm an awesome text</span>
</div>
When working with Expo, why isn't some packages available? For example, the LinearGradient get's an error saying it can't be found.
Expo offers a very simple way to start developing React Native apps. But it's a closed box where you cannot add community native packages, only the native packages that comes with Expo. There is an exception, the js-only packages, like: https://github.com/crazycodeboy/react-native-check-box
For the native packages, you need to link them in the native side of your app and compile it. To achieve this I suggest you to start in the native development, you can found the path here: https://facebook.github.io/react-native/docs/getting-started#the-react-native-cli
I want to use Netlify Identity Widget, but that renders in HTML. How do I use that with React Native Web?
You can use any package/widget/library that renders HTML, because you will run it on browsers. You can start using it just typing yarn add netlify-identity-widget
or npm install netlify-identity-widget --save into your react-native-web root folder.
Hope I helped!
I'm installing react-native-elements and in the installation guide there is this command:
npm i react-native-vector-icons --save && react-native link react-native-vector-icons
I am curious what this part of the command does and why it is necessary: react-native link react-native-vector-icons
As you might know, React Native allows you to interface with the native APIs of the OS via JavaScript. In order to establish this interface, some configuration is required in the native side (linking libraries, adding search paths and assets...), and since this process is relatively repetitive and can be automated, the RN folks made the link command in order to set up modules with native code more easily. In the case of React Native Vector Icons, it will add the font files and other configuration to your project, for both Android and iOS.
I am following this link to customize my react-native components
Theming NativeBase Apps
but I am unable to find light.js and proceed further
Run the following command after installing native-base in your root app directory.
node node_modules/native-base/ejectTheme.js
https://docs.nativebase.io/Customize.html#Customize
set version to 2.2.0 and it will show you the steps to theming nativeBase App.