<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
Related
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.
I would like to know how to import vector icon I've created or from directory in pc by using react native?
I believe that you're trying to use custom font icons. I've built a library to make it easy.
https://github.com/WrathChaos/react-native-custom-icon
Usage:
import MyIcon from "react-native-custom-icon";
import IcomoonConfig from "./assets/icomoon/selection.json";
<MyIcon name="fireworks" color="red" size={50} config={IcomoonConfig} />
You need to install react-native-vector-icons. It's a must dependency. You can put your svg icons to https://icomoon.io/ and get your .ttf font icons from there. It comes with selection.json and icomoon.ttf files. All you need to do is; put these files on your project and look at the above usage example.
If you cannot make it, I wrote a Step By Step Guide
I'm trying to use font-awesome icons in a react native app, therefore I installed it and imported it using react-native-vector-icons :
import Icon from "react-native-vector-icons/FontAwesome";
.....
<Icon name="map-pin" />
however I don't know where to find the name of the icons, I browsed in the font awesome web site, found some icons, but when I tried to use them, it doesn't work for example in their website this icon's name is abacus, however, when I use it in my app, I get a warning and the icon doesn't display.
You can get the icon names from here https://expo.github.io/vector-icons/
You can use https://oblador.github.io/react-native-vector-icons/ to find the icon names. It has all the icons in the react-native-vector-icons library.
As you said, you can get the names from the official FontAwesome Webiste, but you need to be careful. There are regular icons and pro icons. The pro icons are marked with a small blue banner on the right top. By default, only the free/regular icons are available in the react-native-vector-icons package.
Regular Icon:
Pro Icon
As you can see, the abacus icon is a pro icon and therefore not available in the free tier.
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',
},
})
me and my team are trying to put some .svg icons in our UWP win10 application (target and min version are Windows 10 Fall Creators update).
In my resource file I defined my SvgImageSource as following:
<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />
And I then proceed to use this image source in my component:
<Image Source="{StaticResource PencilIcon}" />
I tried few different svgs and they all render with the right shape, but are all black (first one is the pencil):
The original svg looks like this:
Here is the source code of the SVG
I tried adjusting Stretch, Width, Height and so on but I just can't seem to get this to work.
UWP has no clue what css styles are.
In my case there was this:
<style
type="text/css"
id="style2">
.st0{fill:#996459;}
.st1{fill:#FFFFFF;}
.st2{fill:#B4B6BC;}
.st3{fill:#5C546A;}
.st4{fill:#868491;}
.st5{fill:#0F4499;}
</style>
To fix this for UWP, find every class="..." and manually apply the style.
This is a known problem of Adobe Illustrator, try playing with its SVG export settings.
If illustrator
Use Styling: "Presentation Attributes"
If you use illustrator then try to change styling. It should be something like Style Attributes.
UWP just partially supports SVG Ver 1.1 specification (see SVG Support)
And it doesn't support css-like styles.
See image
You can play with export settings of Adobe Illustrator for export image : AI export Settings
Or fix it manually: See image
Or with my tool:
Visual Studio extension at Marketplace.
Desktop version at Github releases
This tool just inlines css styles directly to the svg elements.