How do I change the icon of search bar in react-native-element.
<Icon type='font-awesome' name="share-alt" size={33} color="red" />
The above code does render the icon properly.
But the same icon shows up as a cross in the following code
<SearchBar
lightTheme
icon = {"share-alt", "red"}
inputStyle={{margin: 0, padding:3, flex:1}}
containerStyle={{flex:1, height:undefined}}
onChangeText={() => {}}
placeholder='ABC' />
You can only change native icon only. It's list in here https://material.io/icons/.
icon prop does not accept type . It is specify here react-native-elements/API/searchbar/
object {name (string), color (string), style (object)}
According to your screen shots, react-native-vector-icons is not installed properly.
1. Install react-native-vector-icons correctly.
2. And then you can see search icon. At that time, you can change the icon of search bar. You can use Material icon names
Make sure you have linked the vector icons after installing them
npx react-native link react-native-vector-icons
Then make sure you stop your packager and recompile the app again. now the icons should show up. The icons are not usually loaded up after installing and linking, you must recompile the app again.
Related
I'm trying to show some images in my React Native app. It's a simple app, only for Android. The app get informations from an API. The initial View is a list of items and when I click in one item, it gets more info from the API and show in a new page. I also get some urls that points to images that are kept in a S3 bucket in AWS.
This is how I show the images:
<ScrollView>
{this.state.urls.map(url => {
<Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
The problem is that it's not showing those images. I can see that there is a part of the page that is for the image. I can see that because if a put the image first and after that some text, the text will appear at the bottom of the page. I don't know what is going on that the image doesn't appear.
I searched for an answer, found something about using https instead of http (at least for iOS). Found that I need to set width and height. I already did those things and others but it's not working.
I also tried just picking a image from the internet and putting it url direct in uri but it still doesnt't work.
You're missing a return statement in your map function.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
UPDATE
I just tried the url that you provided in the above comment and it doesn't work on my device. I tried a different image from the internet this one and it works. There may also be something that is stopping you from accessing the images from within a mobile app.
To debug further I try would a single <Image .../> with the image hosted on AWS and see if you can get that to show. There may need to be some AWS configuration that you need to change to allow the image to be accessed from a mobile device.
Assuming your image URLs are accessible in your application.
The below code will show your images. Actually you forgot to return a component from the map which is a must have.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}} /> }
}
</ScrollView>
I'm using the
<Drawer>
tag and it works great, but I don't want the default screen layout with the default "hamburger" menu icon at the top-left of the screen.
I've spent hours trying to get my own button to open the drawer.
I've done my research homework:
The RNRF API for Drawer doesn't list open/close methods:
Was happy to find two EXACT issues "How to open Drawer When use a custom icon in Scene" #1101 and "How to customize drawer button" #1078 on GitHub but none of the solutions work--so close but yet so far!
In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}
but get this error:
Here is my main code:
I want to know the proper value for inlineImageLeft prop. in react native <TextInput> component. Can any one help me?
I copied the image in drawable folder.
<TextInput
autoCapitalize= {'words'}
autoFocus={true}
caretHidden = {false}
keyboardType={'url'}
defaultValue={'Hello!'}
placeholder={'hello world'}
placeholderTextColor= {'red'}
returnKeyType = {'send'}
secureTextEntry={true}
selectTextOnFocus={false}
inlineImageLeft="user"
/>
Create Drawable folder inside android res directory . Copy the image say image.png in that folder. Then use in TextInput component.
inlineImageLeft="image"
If image is not showing just uninstall the previous app and rerun the project.
From the React Native github page:
<TextInput
inlineImageLeft="ic_menu_black_24dp"
placeholder="This has drawableLeft set"
style={styles.singleLine}
/>
You can find an example in UIExplorer in react-native. In this example the inlineImageLeft prop used this way:
<TextInput inlineImageLeft="ic_menu_black_24dp"/>
Example is in:
react-native/Examples/UIExplorer/js/TextInputExample.android.js
It seems path should be relative to ./android/app/src/main/res/drawable/. Any other path does not work. Also image does not scale.
I also can't see the icon inside TextInput.
Then, I try to uninstall and reinstall App.
I got the build failed error:
What went wrong: Execution failed for task ':app:mergeDebugResources'.
C:\Users\yusuf\git\App3\android\app\src\main\res\drawable\search.ico:
Error: The file name must end with .xml or .png
Then, I changed my file type from .ico to .png
Image should be in the "drawable" folder.
<TextInput
style={styles.modalInput}
autoFocus ={true}
inlineImageLeft='search'
inlineImagePadding={5}
placeHolder ="Search Product"
placeholderTextColor="white"
onChangeText={ (text) => this.setState({text})}
value = {this.state.text}
/>
With the above change, it works now.
I have used the following Material UI for React Native
React Native Material UI
From that library I have created Button with following code
<Button raised upperCase={false}
text="Facebook"/>
The Button Created successfully.
Now i want to place the facebook icon before text facebook. As guided in the above library i have done that with following code
<Button raised upperCase={false} icon="add-circle"
text="Facebook"/>
But there is no icon in that library named as 'fb' or 'facebook'.
So now i want to include facebook icon or my fb.png icon file in that button.
I am new to React Native app development. How can i do that using the same library?
If I am doing any thing wrong kindly guided me.
I know it's too late but it might help someone. MaterialIcons doesn't have facebook icon, so you have to get the facebook icon with the following code
<Button
large
iconLeft
fontWeight='bold'
backgroundColor='#3b5998'
icon={{name: 'facebook', type: 'font-awesome'}}
title='Connect With Facebook' />
I have implemented the RefreshControl component which works great, except that when my view initially loads, I see part of another Refresh control showing above the NEW GAME button. Once I pull down, I get my data and the bug disappears until I restart the app. Everything else works great but it seems like the 'title', 'tintColor' and 'titleColor' props are causing the problem, because there is no bug without them.
Here is my code:
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
title={I18n.t('coming')}
tintColor="#dceafd"
titleColor="#dceafd"
/>
Just add backgroundColor: 'transparent', i think :)