Search icon is replaced by some other icon. How to put icon in SearchBar (React-native-elements || React-native)
screenshot of the icon.
Found The solution.
For some react-native versions, we need to manually link the module. In this case, i had to link react-native-vector-icons.
npm install react-native-vector-icons--save
react-native link react-native-vector-icons
from project directory.
I did these:
npm install react-native-vector-icons--save
react-native link react-native-vector-icons
and then close the app from emulator uninstall it just to be on the safe side then:
npm start
react-native run-android
Another solution which I have just managed to resolve for my project just now.
Just follow the instructions:
https://github.com/oblador/react-native-vector-icons#installation
I encountered an error that prompted me to have duplicate fonts. You may want to skip the part where it mentioned copying the Fonts folder from react-native-elements and placing it into the src/assets/fonts folder that resides in your react native project.
Shut down your laptop and then wait for about 10s before booting back up. I hope it helps whoever encountering the same issue as me (or us).
Just want to share the versions used in my project -
dependencies": {
..
**"react": "17.0.2",
"react-native": "0.67.3",
"react-native-elements": "^3.4.2",
"react-native-safe-area-context": "^4.0.1",
"react-native-screens": "^3.12.0",**
...
**"react-native-vector-icons": "^9.1.0"**
},
I think i have encountered this once and solved it by adding this line at the end of android>app>build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
then doing ./gradlew clean , and running the app again
Here the code from documentation:
import { Icon } from 'react-native-elements'
<Icon
name='rowing' />
<Icon
name='g-translate'
color='#00aced' />
<Icon
name='sc-telegram'
type='evilicon'
color='#517fa4'
/>
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#517fa4'
/>
<Icon
raised
name='heartbeat'
type='font-awesome'
color='#f50'
onPress={() => console.log('hello')} />
Related
I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.
If I click the "Copy Code" button in their playground, it gives me this:
import * as React from "react";
import { Header, Icon } from "#rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default () => {
return (
<Header
backgroundImageStyle={{}}
barStyle="default"
centerComponent={{
text: "MY TITLE",
style: { color: "#fff" }
}}
centerContainerStyle={{}}
containerStyle={{ width: 350 }}
leftComponent={{ icon: "menu", color: "#fff" }}
leftContainerStyle={{}}
linearGradientProps={{}}
placement="center"
rightComponent={{ icon: "home", color: "#fff" }}
rightContainerStyle={{}}
statusBarProps={{}}
/>
);
}
When I do that in my app, though, it shows question marks for the icons:
Their set up docs do include this step for manual linking:
react-native link react-native-vector-icons
which I can't do because react-native no longer supports it.
But I don't know what's going wrong here. Any help would be appreciated.
If it helps, these are my dependencies in my package.json:
"#rneui/base": "^4.0.0-rc.6",
"#rneui/themed": "^4.0.0-rc.6",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-asset": "^2.0.1",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "^4.3.3",
"react-native-vector-icons": "^9.2.0"
For Android, I just had to follow the installation instructions at the Github repo for react-native-vector-icons here. (You might think that's obvious, but the docs for react-native-elements just have you do a yarn/npm install of react-native-vector-icons and act like that's enough to get you up and running.)
They had me add this to the android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then rebuild the app.
For iOS it's more complicated. You need to use XCode and manually copy over the fonts, and then update some files. The directions are at that link above. But they're not quite accurate because they have you add fonts to the Build Phases > Copy Bundle Resources thing in XCode. (In my case, I didn't manually have to add them. They were already there.) However, running the code gave me an error "multiple commands produce" these .ttf file.
The solution to that was to go back to Build Phases > Copy Bundle Resources and manually delete all the icon .ttf files listed there, as per this article.
Everything is working now. It's stupid it's this complicated though
I am trying to use the kayaking icon that is part of the MaterialCommunityIcons, but that icon seems to not exist or something.
However, I can get other icons to work. Looking at this site react-native-vector-icons directory, I see that kayaking is in fact an icon. It also says so here at this link: Github icon directory.
So why can't I get the icon to work?
This is how I have tried:
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
// DOES NOT WORK
<Icon name="kayaking" />
// BUT THE BELOW DOES WORK
<Icon name="access-point" />
I also tried this:
import { MaterialCommunityIcons } from "#expo/vector-icons";
// DOES NOT WORK
<MaterialCommunityIcons name="kayaking"/>
// BUT THE BELOW DOES WORK
<MaterialCommunityIcons name="access-point"/>
Can someone please tell me what is going on? This is so simple, yet it seems like the kayaking icon no longer exists...
It's simply the document not been updated.
I am getting this error after running my App:
error: bundling failed: Error: Unable to resolve module react-native-safe-area-context from node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context could not be found within the project.
But the same thing I had done for my old demo. It worked perfectly fine.
I don't know what I am doing wrong here. Please check my code:
For installing:
React Native Navigation & Gesture Handler:
npm install --save react-navigation
npm install --save react-native-gesture-handler
React Native Stack:
npm install --save react-navigation-stack
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";
const MainNavigator = createStackNavigator(
{
FirstOptions: FirstOptionsPage
},
{
defaultNavigationOptions: {
headerStyle: {
// backgroundColor: '#28F1A6',
elevation: 0,
shadowOpacity: 0
},
headerTintColor: "#ca375e",
headerTitleStyle: {
fontWeight: "bold",
color: "#161616"
}
}
}
);
const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;
And FirstOptionsPage.js:
import React from "react";
import {
SafeAreaView,
StyleSheet,
View,
Text,
ScrollView,
Switch
} from "react-native";
export default class FirstOptionsPage extends React.Component {
static navigationOptions = {
title: "Preferences"
};
constructor(props) {
super(props);
this.state = {
switch1Value: false
};
}
toggleSwitch1 = value => {
this.setState({ switch1Value: value });
console.log("Switch 1 is: " + value);
};
render() {
const { navigate } = this.props.navigation;
return (
<SafeAreaView style={styles.mainContainerStyle}>
<View style={styles.subContainerStyle}>
<Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
<View style={styles.switchStyle}>
<Switch
onValueChange={this.toggleSwitch1}
value={this.state.switch1Value}
thumbColor={MAGENTA_COLOR_CODE}
trackColor={{
false: GREY_COLOR_CODE,
true: DARK_GREY_COLOR_CODE
}}
/>
</View>
</View>
</SafeAreaView>
);
}
}
I am new to React-Native. How can I fix this?
I think the problem is in the SafeAreaView, for the new react-native version, it has migrated to react-native-community/react-native-safe-area-view. if you want to use SafeAreaView, you should install it first.
the new use is like this:
import SafeAreaView from 'react-native-safe-area-view';
export default function MyAwesomeApp() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Text>
Look, I'm safe! Not under a status bar or notch or home indicator or
anything! Very cool
</Text>
</View>
</SafeAreaView>
);
}
for installing it you can use the following commands:
yarn add react-native-safe-area-view react-native-safe-area-context.
if you do not use auto-link, you have to also link it. for details about it, see this link
It is a little funny, I wanted to add navigation so I added
npm install --save react-navigation
for this to work fine I had to add:
expo install react-native-gesture-handler react-native-reanimated
Then I got
Unable to resolve "react-native-safe-area-context"
So I added:
expo install react-navigation-stack
expo install react-native-safe-area-view react-native-safe-area-context
then I got
bundling failed: Error: Unable to resolve module #react-native-community/masked-view`
So I searched for the masked-view (which currently is not supported by the expo, according to its git document). Then I found out that I can use:
expo install #react-native-community/masked-view,
which could work or not :)
Therefore, from now on I use following commands at the start of all of my react-native projects, to be able to use navigation properly:
npm install --save react-navigation
expo install react-native-gesture-handler react-native-reanimated react-navigation-stack
expo install react-native-safe-area-view react-native-safe-area-context
expo install #react-native-community/masked-view.
After running these commands:
npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context
It prompted me an error about masked-view, so I also had to run npm i #react-native-community/masked-view and then my code can now be successfully run on Android physical device.
Thanks to Lenoarod and Gautam Shrivastav for pointing out the right direction.
installing following two,
npm install --save #react-native-community/masked-view
npm install react-native-safe-area-context
it is work for me
I think you miss link depency with your project so you can try as below:
With React Native 0.6 or higher:
On iOS, make sure you have Cocoapods installed and run:
cd ios
pod install
cd ..
With React native 0.59 and lower try:
react-native link react-native-safe-area-context
copy all and paste in terminal
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
work for me
Run the following:
expo install react-native-safe-area-context
expo will select the right version and then install it.
To use React Navigation you need to run the following command
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
or
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
i did this
yarn add #react-native-community/masked-view
yarn add react-native-safe-area-context
and it gave me another error on import type { ScreenProps } from 'react-native-screens'
then did
yarn add react-native-screens
all went well
use the commend npm i react-navigation-stack t solve this error
Starting the Metro Bundler directly from the project directory works for me.
# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
# Start Metro Bundler directly
react-native start
# Now run react-native run-android or react-native run-ios in another tab
If you are using #react-native/stack then before installing it use following command to install it's dependency
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
read the documentation at https://reactnavigation.org/docs/getting-started/
Me I think it is due to incompatible version pairs for expo and safe area context.
You should try run this:
npm uninstall react-native-safe-area-context
After, you run this :
expo install react-native-safe-area-context
The structure of the app is fairly simple: A searchbar, a listview and react-native-tabs at the bottom. The problem: If I click on the searchbar on Android it pushes the whole app up, so I see the tabs directly over the keyboard. But on iOS the keyboard overlays the whole app, without pushing anything up. Is there any way to control that?
I'm happy to share code / screenshots if the question isn't clear.
Thanks
edit:
<View style={{flex:1, backgroundColor:'#f2f2f2'}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderSearchResults.bind(this)}
style={styles.listView}/>
<KeyboardAvoidingView
style={styles.addQuestionBar}
behavior={'position'}>
<Text>
Don't see your question?
</Text>
<TouchableOpacity>
<Text>
Add it
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
Set android:windowSoftInputMode="adjustPan" in your manifest file, and it will work as you expect.
E.g.
<application
android:name=".MainApplication"
android:allowBackup="true"
...
<activity
android:name=".MainActivity"
android:label="#string/app_name"
...
android:windowSoftInputMode="adjustPan">
...
</activity>
...
</application>
For those using Expo
#J KW's answer is correct but if you're using Expo you will have to implement it differently.
Expo uses different configuration terms. In your app.json you have to set the configuration key
"softwareKeyboardLayoutMode":"pan" in your android object.
Your file might look something like:
{
"expo": {
"name": "App",
...
"android":{"softwareKeyboardLayoutMode": "pan"},
...
}
}
Note: If you are receiving a "should NOT have additional property" error, it's likely because you don't have the updated Expo SDK (v.038). Please update your Expo version.
Documentation: https://docs.expo.io/workflow/configuration/
There is new Component called KeyboardAvoidingView from React Native not documented yet but i already use it in my project and its very useful
Code Example:
'use strict'
import { ... , KeyboardAvoidingView } from 'react-native'
class Test extends Component {
constructor () {
super()
this.state = {
behavior: 'position'
// there is three ways to adjust (position , height , padding )
}
}
render(){
return (
<View>
<KeyboardAvoidingView behavior={this.state.behavior}>
<TextInput
style={style.PhoneNumberInput}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</KeyboardAvoidingView>
</View>
)
}
}
module.exports = Test
and for more details you can check KeyboardAvoidingViewExample
EDIT:
Sorry i just got the wrong idea from the question i think what you are trying to do is stop the android keyboard from pushing the application up here is component that allow you to choose between (Pan, Resize, Nothing) in android
react-native-android-keyboard-adjust
Use android:windowSoftInputMode="adjustResize".
KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest.xml.
Instead, you should use "adjustResize" and have a wonderful life.
I had "adjustPan" and tried using KeyboardAvoidingView and KeyboardAwareScrollView... nothing worked.
Now, with "adjustResize", i'm not using any keyboard-related component and my android app works. (I might have to use KeyboardAvoiding view on iOS, but it will work out of the box.)
#binkie's answer worked for my expo (Version 44.0.0) app with a slight change.
In app.json,
"android":{"softwareKeyboardLayoutMode": "pan"}
In the screen, margin bottom value equal to height of the bottom tab like so
<ScrollView mb="70px">...</ScrollView>
****1) modify the AndroidMainfest.xml in
android/src/main/AndroidMainfest.xml
u can solve the issue by changing the
$ android:windowSoftInputMode="adjustResize";
to
$ android:windowSoftInputMode="adjustPan";
the problem will be resolvede****
Somebody try to use react-native-icons? I follow this steps:
npm install react-native-icons#latest --save
In XCode, in the project navigator right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-icons➜ ios and add ReactNativeIcons.xcodeproj
Add libReactNativeIcons.a (from 'Products' under ReactNativeIcons.xcodeproj) to your project's Build Phases ➜ Link Binary With Libraries phase
Add the font files you want to use into the Copy Bundle Resources build phase of your project (click the '+' and click 'Add Other...' then choose the font files from node_modules/react-native-icons/ios/Libraries/FontAwesomeKit).
Run your project (Cmd+R)
My Code
var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;
class BringgersApp extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Bringgers!
</Text>
<Icon
name='ion|beer'
size={150}
color='#887700'
style={styles.beer} />
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });
After I build, he says the file doesn't exist...
Font file doesn't exist
I clean the DerivedData and try to build many times, but doesn't work.
Steps to install and usage Ionicons, FontAwesome and Entypo font Icons in react-native.
First you need to install using following command.
react-native install react-native-vector-icons
Then Required to Link:
react-native link react-native-vector-icons
Import font package files to your page:
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';
Usage Example:
<View>
<Text>Ionicons Icons</Text>
<Icon name='md-bicycle' />
<Text>FontAwesome Icons</Text>
<FontAwesome name='trophy' />
<Text>Entypo Icons</Text>
<Entypo name='aircraft' />
</View>
If you want to see list of available icons, you can look in this directory:
Ionicons:
\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json
FontAwesome:
\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json
Entypo:
\node_modules\react-native-vector-icons\glyphmaps\Entypo.json
Giving you my apps screenshot.
First things first,
the maintainer of react-native-iconshimself points to the newer & maintained react-native-vector-icons
Apparently as of now the rnpm project has been merged into react-native.
In other words, your life can be as easy as typing
react-native install react-native-vector-icons
react-native link react-native-vector-icons
And you may be good to go*)
*) at least it worked on my machine
Did you import file node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf to your project?
Use React Native Package Manager : https://github.com/rnpm/rnpm
$ npm install rnpm -g
Running
Installing dependency:
If you want to install a dependency and link it in one run:
$ rnpm install react-native-icons
Linking dependency:
If you already have some installed (but not linked) modules, run:
$ rnpm link
Do you have "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" recursive?
Did you include icon fonts to "Build phases" -> "Copy Bundle Resources" in your Main project?
So in my project, I access the Icons through this code: let { Icon, } = require('react-native-icons');
Although I never had issues using FontAwesome icons, I had issues using Material Icons. You can also check out react-native-vector-icons.
For using icons in react native, there are many libraries available, react-native-vector-icons is one of them, it is very easy to use.
just follow 2 steps, first you have to install library,
then you have to link it also, to use it in your project.
Run this command for installing library
npm install react-native-vector-icons --save
Run this command for linking library
react-native link react-native-vector-icons
How to use this library
You can use any directory showed in the image, each directory has a lots of icons in it, now you have to choose which directory has a best icon for you...
For finding best directory for you, I will recommend you, simply visit this link:
Find best icon for your app
On this website simply search the name of icon you are lookig for,
You will get matching icons in all directories, you can simply remember the name of your selected icon, and use it in your app...
suppose I search arrow on this link, and I selected arrowsalt from AntDesign directory and want to use it in my App.
import Icon from 'react-native-vector-icons/AntDesign';
if you want to use FontAwesome, then simply replace AntDesign with FontAwesome, or the name of directory you want to use.
e.g import Icon from 'react-native-vector-icons/DirectoryName';
And use icon like this.
<Icon name="arrowsalt" size={30} color="blue" />
For further details Visit this link
Reference:
https://openbase.com/js/react-native-vector-icons/documentation
https://aboutreact.com/react-native-vector-icons/
https://oblador.github.io/react-native-vector-icons/
try
rnpm link // If you installed module
Also
npm install module-name
and after execute
rnpm link
restart services..
This code relink automatic your modules.
Work to me. Thanks.
you can also try with native-base library.
it provide tag
it is easy and simple to use any icon which can be use with mobile devices.
follow this link for more information on native base icon.
http://nativebase.io/docs/v2.0.0/components#icon
follow this link for more information on list of icon.
https://ionicframework.com/docs/v2/ionicons/
ex.
<Icon name='ios-list' style={style.icon} />
Step 1: Install react-native-elements
yarn add react-native-elements
# or with npm
npm i react-native-elements --save
Step 2: Install react-native-vector-icons
If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:
# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons
# link
react-native link react-native-vector-icons
and after this just simply use them in your project like
import { Icon } from 'react-native-elements';
class IonBeer extends React.Component {
render() {
return (
<Icon
name='md-beer'
type='ionicon'
color='#887700'
size=150
/>
);
}
}
and then simply use it like.
<IonBeer/>
any where you want
For Icon you can use react-native vector icon . It comprises of various icon that we can use in your project for a native look .
for more you can have a look https://github.com/oblador/react-native-vector-icons.
For more native components you can have a look at nativebase.io .It's an awesome library for UI in react native .