Native Base Medium/Bold fonts show up the same as Regular font - react-native

I'm building a react native app, and I've linked my fonts to my projects. For iOS, i'm having trouble with the font variations. I am using the Roboto font family, and no matter what font weight variation I use, it shows up as "Roboto-Regular".
If I do:
fontFamily: 'Roboto-Medium' or
fontFamily: 'Roboto-Bold'
It displays the same as Roboto-Regular. I am not having this issue in Android. The fonts folder is added to the Bundle Resources, and to the info.plist.
Just to test things out further if i do:
fontFamily: 'Roboto-sMedium' it will show a warning message "Unrecognized fontFamily", and revert to a system default font.
There is no problem in xcode recognizing the font family, but I cannot get the Medium and Bold variations to show properly.
Any suggestions?
--edit--
I figured out this was an issue with the Native Base elements I am using, where the style attributes were not recognizing the font weight variations on any Native Base elements.
For example, the <Text> element from Native Base didn't recognize the font weight variation of style={{fontFamily: 'Roboto-Medium'}}
If I switched to the react native <Text> element it would work appropriately.
I realize that you need to customize the them in Native Base to use the font properties as noted here:
https://docs.nativebase.io/customizing-fonts
However, I did not expect that the font-family style attributes would not work.

Related

Matplot LaTeX Rendering in cmss style

is it possible to render text as well as math symbols in the cmss (Computer Modern Sans-Serif) style within Matplotlib? I managed to render all text in cmss style but math symbols were still in the normal serif style. I then tried to use the cmbright package within the loaded preamble which admittedly resulted in everything (text + math) having a sans-serif style but the new style wasn't exactly cmss but a slightly lighter version of it. I would like to know if there is a way of rendering everything in the cmss style as this is the font for headings in the document I'm currently working on.
Thanks in advance!

React native unrecognized font family using external Svg

I'm implementing a react native app (with expo, I don't know if this can be relevant). In this app I'm sending an ajax request to an external service and that service returns a list of URLs related to images in svg format that I need to show in my app.
To show the images I'm using react-native-svg library (I've tried with Svg/Image and with SvgUri). Generally it work properly, but there is some SVG that break my app, because it includes a font-family not supported by my react-native project and the iOS simulator is showing me the error: Unrecognized font family '<FONT-FAMILY-NAME>'.
I've already checked several post on stackoverflow and they all suggest to add the specific font-family to the project, but this solution will not fix my issue in log term as in future I can receive a new SVG file with a different font that will break again my app. I obviously have absolutely no control on the SVG provided by the external service. So, what I'm interested to know is:
Is there any way to add dynamically a font-family to react-native project? For dynamically I mean that the app will add the font to its list when it's required by the SVG file
By using Svg/Image (or with SvgUri) is there any way I can overwrite the font to avoid it to break the app?
Thanks in advance for your answers.

how to set custom icon, which is in my local system to react-native-hamburger

<Drawer some_styles>
<View >
<Hamburger active={this.state.menuActive}
onPress={this._handleMenuButtonPress}/>
</View>
</Drawer>
I have to use .svg image as icon of hamburger instead of predefined icon.How to set our own image to hamburger. Thanks in advance.
I have used this article to help me include custom icons. I will briefly summarise the steps:
Install react-native-vector-icons, this is a library which allows you to add custom icons alongside their standard built-in icons (which are already great btw).
Convert your SVG icon(s) to a font (.tff file), Fontello or Icomoon are online tools supported by rn-vector-icons which allow you to do just that
Add that font to your project
Create a small config file where you tell rn-vector-icons which font needs to be linked

Using international characters in React Native

I have the following international text in my react native app:
<Text>ᚘᚘᚘ</Text>
However, a blank line is displayed to my screen where the text should go. I have tried for other international characters as well and it is the same result.
I am using notepad++ and making sure that encoding is set to UTF-8. If I use console.log("ᚘᚘᚘ") it displays to the console just fine. Do I specifically need to embed a particular unicode font in my React Native project for it to work correctly? Or what should I be doing so that it displays my text correctly?
On further investigation I am using a Samsung Galaxy S2 for testing purposes. It does not seem to handle unicode characters in all applications, so I think my app will not work in older devices unless I specifically embed a Unicode font. Am I correct in my thinking?
The only solution I found to this was to add a custom font. This link explains how to use a custom font: https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app . The font I used is called GNU FreeFont located here: https://www.gnu.org/software/freefont/

FontFamily not working in Android Device in React-Native

I have added many font-family and style into my asset folder in React-Native project. It's working fine in simulator, emulator, and iOS device. But some font won't work and not display in Android device.
I have try with react-native link and check the asset folder in Android app directory, nothing missing.
Anyone help please.
I might have a solution for this. I had the same problem, the fonts were visible in my emulator, the font files are located under 'android/src/main/assets/fonts' and yet it wasn't visible on my physical android device (Huawei Honor 8X).
I found out that the problem was with my physical device's Font settings. To fix this, on your phone, go to
Settings -> Display -> Text Style -> Default
Settings screen : Go to Display
Display settings : Look for Text Style, Make sure it is set to default as seen in the pic
Select Default here : Now your custom app fonts should work
Please Note that these settings might differ as per your device. I've mentioned the steps for my phone.
Always use the default Text Style to render custom fonts in your app.
Nowadays, phones like the OnePlus etc. have their own custom fonts and I think this is interfering with custom fonts defined in Applications.
Hope this helps.
Following this article worked for me. The name of the font file name is important to get it working on both platforms.
I had multiple font files with different weights (Circular Std Bold, Circular Std Medium etc..) for these to work on android I dynamically changed the font family style to this name to change the weight.
The font weight style on android didn't work for me.
the problem is with devices that have custom font style like huawei devices. I hope there be a solution for this to not force the user to change it's device font style because of our app.
My font family changes when I connect to my android device but I finally figured out how to fix it. If font weight is set then it changes the font on my device to its default font. After I removed font weight my android devices default font isn't applied anymore.
fontFamily its not work in inlinstyle you must change from
<Text style={{fontFamily:'SantPro'}} />
to
Text style={styles.text}
const styles = StyleSheet.create({
text: {
fontFamily:'SantPro',
},
})