I'm building an application and I have a
problem with react-native icon. This is an image of the problem.
I followed this link and then I made sure the font is copied to android/app/src/main/assets/fonts, deleted the android/app/build folder. Finally I restarted react native package, but not throwing good result it such as first. How to fix this problem?
This is my code:
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Right, Left, Thumbnail, Body, Text, Button, Icon } from 'native-base';
export default class SideMenu extends Component {
render() {
return (
<Container style={{ flex:1, backgroundColor:'#fcfcfc' }}>
<Content>
<Body style={{ justifyContent: 'center' }}>
<Image style={{ position: 'relative'}} source={require('../../../image/imac.jpg')}/>
<View style={bao.cover}>
<Thumbnail square source={require('../../../image/ava.jpg')} style={{borderRadius:40}}/>
<Text style={{ color:'#fff', flex:1, lineHeight:40, fontSize:18 }}> Vu Nguyen </Text>
</View>
</Body>
<Card>
<CardItem>
<Icon name="home" />
<Text>Home</Text>
</CardItem>
<CardItem>
<Icon name="news" />
<Text>Home</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const bao = StyleSheet.create({
cover:{
position:'absolute',
flex: 1,
flexDirection: 'row',
marginLeft:30,
top: 170
}
})
Make sure the icon name you are is there in whatever Icon set you are using like (FontAwesome, Ionicons) etc.
"news" icon is available in Entypo
The issue was solved for me by:
react-native link
and then:
react-native run-android
I had a similar problem where the node_modules/react-native-vector-icons/glyphmaps/FontAwesome5Pro.json was outdated. I was trying to get the "bible" icon from FontAwesome v5.3.1, however resources from react-native-vector-icons still seem to be from 5.0. So a "?" was appearing.
I tried to npm install the latest version of react-native-vector-icons, but the problem persisted.
I manually copied the FontAwesome5Pro.json content from the Github repo. After restarting my simulator the question marks had become the icons I was looking for.
it's because native-base have some icons and some are not present.
so try to import the icon from it's original module instead of native-base
try this
import Icon from 'react-native-ionicons'
or other font libraries
import Icon from 'react-native-fontawesome'
instead of this
import { Icon } from 'native-base'
If anyone is facing this issue please paste this line in your app/build.gradle and re-run the project.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
try this
react-native link react-native-vector-icons
Related
using the snack below:
https://snack.expo.io/ry_5rCk84
I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'.
and ends up displaying a '?' for unknown icon.
I am able to use wifi-off icon using 'material-community' icon set
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
<Icon name='wifi' size={50} type='material'/>
<Icon name='wifi-off' size={50} type='material-community' />
<Icon name='wifi_off' size={50} type='material' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
react-native-elements uses react-native-vector-icons to display the icons.
react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/
If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons
If you search for wifi_off you will find that there are no results.
Therefore wifi_off is not available to use.
It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.
When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".
react-native-fontawesome was working just fine for me at version 5. I upgraded to 6.0.1 but downloading the new font-awesome files, adding the new tff files into the assets/fonts folder, running react-native link react-native-fontawesome.
I closed my simulators and ran react-native run-ios and see that the icons that worked before are now question marks. They don't show up on Android either
Firstly you need to install the dependency and link the library by the following ways...
Run the following command to install the dependency.
npm install react-native-vector-icons --save
Linking of Dependency...
After the updation of React Native 0.60, they have introduced the auto-linking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that, we need to link the library using.
react-native link react-native-vector-icons
And copy the given App.js file that shows below.
/*Example of React Native Vector Icon*/
import React, {Component} from 'react';
//import React
import {Platform, StyleSheet, Text, View} from 'react-native';
//import all the basic components
import Icon from 'react-native-vector-icons/FontAwesome';
//import vector icons
type Props = {};
export default class App extends Component<Props> {
render() {
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
return (
<View style={styles.container}>
<Text>Example of Vector Icon</Text>
<View style={{marginTop:16, marginBottom:16, justifyContent:'center', alignItems:'center', textAlign:'center'}}>
<Text><Icon name="rocket" size={'{30}'} color="#900" /></Text>
{/*Icon Component*/}
<Icon name="rocket" size={30} color="#900" />
</View>
<View style={{marginTop:16, marginBottom:16}}>
{/*Icon.Button Component*/}
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={()=>alert("Login with Facebook")}>
Login with Facebook
</Icon.Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
or you can follow the following link...
https://aboutreact.com/react-native-vector-icons/
Here I am using native-base latest version and using all the methods props but still my icons are not appearing in the header
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import {Header,Icon} from 'native-base'
class HomeScreen extends Component {
static navigationOptions = { header: null }
render() {
return (
<View style={{flex:1,backgroundColor:'#3q455c',width:"100%"}}>
<Header
placement="left"
leftComponent={{ icon: 'menu', color: 'white' }}
centerComponent={{ text: 'MY TITLE', style: { color: 'white' } }}
rightComponent={{ icon: 'home', color: 'white' }}
/>
</View>
);
}}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Here the header function is not showing in the header component
To get around this I did:
react-native link
react-native run-android
and the icons showed.
install react-native-vector-icons
npm install --save react-native-vector-icons
iOS:
react-native link react-native-vector-icons
Android:
Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and Use:
<Icon
type="MaterialIcons"
name="menu"
/>
document
For some reason, react-native-vector-icons wasn't linked to my project.
So:
react-native link react-native-vector-icons
made the trick for me.
Of course, you must have previously installed react-native-vector-icons module, something like:
npm install react-native-vector-icons --save
Keep coding, and let the code be with you!
In my case after adding below the line in app/build.gradle and re-create the build react-native run-android the icon will show.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Nirmal Dalmia's answer worked, but if you are using RN >= .60, you do have to install it before linking, as shown:
npm install react-native-vector-icons
react-native link react-native-vector-icons
This seems to be the case because, starting with .60, RN will autolink your npm dependencies. Since by default react-native-vector-icons is embedded within native-base, it won't autolink. I now get an error when running react-native run-android telling me not to manually link, but the icons are showing up.
I don't know why your code doesn't work.
Here is what I am using:
import React from "react";
import { SafeAreaView } from 'react-native';
import {
Container, Header, Title, Left, Icon, Right, Button, Body, Content, Text, Card, CardItem
} from "native-base";
export default class Test extends React.Component {
static navigationOptions = {
header: null
};
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container style={{ flex: 1, backgroundColor: '#fff' }}>
<Header style={{ backgroundColor: '#41b8f4' }}>
<Left>
<Button
transparent
onPress={() => console.log('button')}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>Medical</Title>
</Body>
<Right />
</Header>
<Content padder style={{ flex: 1 }}>
<Card>
<CardItem>
<Left>
<Icon active name="md-person" />
<Text>text</Text>
</Left>
<Right>
<Icon name="arrow-forward" onPress={() =>
console.log('right')} />
</Right>
</CardItem>
</Card>
</Content>
</Container>
</SafeAreaView>
);
}
}
Native base uses window dimensions for Picker item and this ends in such issues. Add these lines to your Picker. It will solve your issue.
style={{ width: '80%' }}
placeholderStyle={{ maxWidth: '100%' }}
textStyle={{ maxWidth: '100%' }}
https://github.com/GeekyAnts/NativeBase/issues/2630#issuecomment-479847012
The icons in native base are served using react-native-vector-icons package. You don't need to install vector icons as it comes bundled with native base. I had the same problem of icons not showing up. All you need to do is link vector icons to your project.
react-native link react-native-vector-icons
After this, the icons should appear upon reinstalling the app.
Well for some reasons, I had to use this way :
<Icon type='MaterialIcons' name='menu' />
In opposition of this way :
<Icon android='md-menu' />
Can't find why though. This makes it more complicated to differentiate Android and iOS icons.
Have you installed the required peer dependencies for Native Base 2.x using the link command? https://docs.nativebase.io/docs/GetStarted.html
This fixed the issue for me:
npx react-native link
I am having an issue with the image just showing up on the application. Through search results, I mostly see the solution being that that the height and width was required and missing, but I have already implemented with no results.
I have looked at the routes multiple times and don't see any issues on that end.
Lastly, I thought it could be something to do with the image. I have altered the size and it worked with the <Image /> tag. However, I need it to be a background image.
Current Code
import React from 'react'
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons'
export default function TitleScreen () {
return (
<View>
<ImageBackground
source={require('../assets/images/title_background.png')}
style={styles.backgroundImage}
imageStyle={{resizeMode: 'cover'}}
>
<Text>testing</Text>
{/* <MaterialCommunityIcons
name={'cards-outline'}
size={100}
/> */}
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
}
});
Folder Layout
assets
-- images
--- title_background.png
components
-- TitleScreen.js
Answered! The answer was to add flex: 1 to the parent view container - for those running into the same problem.
I see that someone made this for it: https://github.com/brentvatne/react-native-linear-gradient
But is there support for it in RN itself? Something like
style = StyleSheet.create({
backgroundGradient: "vertical",
backgroundGradientTop: "#333333",
backgroundGradientBottom: "#666666"
});
Not at the moment. You should use the library you linked; they recently added Android support and it is by one of the main contributors of react-native.
Just export your gradient as SVG and use it using react-native-svg and when after you import your component set width and height and preserveAspectRatio="xMinYMin slice"to scale an SVG gradient at your needs.
First, run npm install expo-linear-gradient --save
You don't need to use an animated tag, but this is what I was using in my code.
inside colors={[ put your gradient colors ]}
then you can use something like this:
import { LinearGradient } from "expo-linear-gradient";
import { Animated } from "react-native";
<AnimatedLinearGradient
colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
style={{ your styles go here }}/>
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
Here is a good choice for gradients for both platforms iOS and Android:
https://github.com/react-native-community/react-native-linear-gradient
There are others approaches like expo, however react-native-linear-gradient have worked better for me.
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
EXPO? Well, use this method Linear Gradient in React Native using EXPO. (Updated Nov. 2021)
No Pod Installs, No Errors, No additional linked files.
expo install expo-linear-gradient
Then
import { LinearGradient } from 'expo-linear-gradient';
<View style={styles.container}>
<LinearGradient
// Background Linear Gradient
colors={['rgba(0,0,0,0.8)', 'transparent']}
style={styles.background}
/>
<LinearGradient
// Button Linear Gradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.button}>
<Text style={styles.text}>Sign in with Facebook</Text>
</LinearGradient>
</View>
Full Link here: https://docs.expo.dev/versions/latest/sdk/linear-gradient/
Here is a production ready pure JavaScript solution:
<View styles={{backgroundColor: `the main color you want`}}>
<Image source={`A white to transparent gradient png`}>
</View>
Here is the source code of a npm package using this solution:
https://github.com/flyskywhy/react-native-smooth-slider/blob/0f18a8bf02e2d436503b9a8ba241440247ef1c44/src/Slider.js#L329
Here is the gradient palette screenshot of saturation and brightness using this npm package:
https://github.com/flyskywhy/react-native-slider-color-picker
React Native hasn't provided the gradient color yet. But still, you can do it with a NPM package called react-native-linear-gradient or you can click here for more info
npm install react-native-linear-gradient --save
use import LinearGradient from 'react-native-linear-gradient'; in your application file
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient>
Looking for a similar solution I just came across this brand new tutorial, which lets you bridge a Swift gradient background (https://github.com/soffes/GradientView) library while walking through every step to get a working React component.
It is a step-by-step tutorial, allowing you to build your own component by bridging the swift and objective-c component into a usable React Native component, which overrides the standard View component and allows you to define a gradient like the following:
<LinearGradient
style={styles.gradient}
locations={[0, 1.0]}
colors={['#5ED2A0', '#339CB1']}
/>
You can find the tutorial here: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/
A little late to the party but the best solution IMO is using SVG gradient with react-native-svg which is included in most projects.
Here is a few lines versatile component that I use whenever I need a gradient:
Simple SVG Linear Gradient Component
import { View, StyleSheet, ViewProps } from 'react-native'
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'
type GradientProps = { fromColor: string, toColor: string, children?: any, height?: number | string, opacityColor1?: number, opacityColor2?: number } & ViewProps
function Gradient({ children, fromColor, toColor, height = '100%', opacityColor1 = 1, opacityColor2 = 1, ...otherViewProps }: GradientProps) {
const gradientUniqueId = `grad${fromColor}+${toColor}`.replace(/[^a-zA-Z0-9 ]/g, '')
return <>
<View style={[{ ...StyleSheet.absoluteFillObject, height, zIndex: -1, top: 0, left: 0 }, otherViewProps.style]} {...otherViewProps}>
<Svg height='100%' width="100%" style={StyleSheet.absoluteFillObject}>
<Defs>
<LinearGradient id={gradientUniqueId} x1="0%" y1="0%" x2="0%" y2="100%">
<Stop offset="0" stopColor={fromColor} stopOpacity={opacityColor1} />
<Stop offset="1" stopColor={toColor} stopOpacity={opacityColor2} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
</Svg>
</View>
{children}
</>
};
export default Gradient
See those example usages on snack
Yes React Native Support Gradient Use react-native-linear-gradient library.