I have app in react native.In my app, I have two textinput , i want to set icon inside textinput.Icon can be any react native vector icons,especially "marker" or "location marker"..Can anyone tell me how to do that??????
Use react-native-vector-icons as you can render it inside a text component. But if you want to use it as if it were inside a TextInput you have to wrap Icon and TextInput inside a View:
<View>
<Icon ... />
<TextInput ... />
</View>
Then you can do something like this:
Related
In react native docs(https://facebook.github.io/react-native/docs/touchableopacity), there is no explanation about style props. But I already know using style props on TouchableOpacity component is okay.
for example
<TouchableOpacity style={styles.button}>
...
</TouchableOpacity>
How is it possible?
I don't get you but TouchableOpacity can set props "activeOpacity" for changing the opacity when clicking to the button.
I have a ScrollView which has TouchableOpacity and TextInput inside.
When I press on them, nothing happens.
I found the solution for TouchableOpacity and it was to add rejectResponderTermination={true} and it worked.
For example:
<TouchableOpacity
onPress={cameraHandler}
rejectResponderTermination={true}
>
However this does not work for TextInput.
<TextInput
onChangeText={updateText}
value={value.text}
rejectResponderTermination={true}
/>
I would like to use the functionality of rejectResponderTermination in TextInput. Any suggestions would be much appreciated.
rejectResponderTermination is not a prop of TextInput. Try removing it.
<TextInput
onChangeText={updateText}
value={value.text}
/>
A list of props can be found in the official documentation.
If you still want the functionality of rejectResponderTermination, currently you would have to build your own.
This SlideTextInput is an example of how you would do it.
I'm currently developing an app using react native and I'm using react-navigation to navigate between screens, using buttons in my header (back arrow for example).
It's working well, however even if my icon is the right size it seems like the click area is really narrow and I struggle with it.
Do you know how I could define a click zone on my button for it to be clicked easier? I've tried the hitslop prop but it's not working for me (maybe it's been deprecated?).
Here is my button:
var backArrow =
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Ionicons name="ios-arrow-back" size={22} color="#ff8c00" />
</TouchableOpacity>
I'm using Expo and testing on an iPhone 6s Plus.
Wrapping the Ionicons in a TouchableOpacity will only provide a clickable area as large as the Ionicons component. You can increase the size of the clickable area with the following structure:
<TouchableOpacity>
<View>
<Ionicons />
</View>
</TouchableOpacity>
by styling the View to be as large as you require it.
I am using React Native Router and want to have a back button on the component at the root of the navigation and override its action.
Is it possible to enable the back button without writing my own with renderBackButton? I'd rather use the one provided with the library to ensure consistency between other screens and avoid writing a new component.
I tried with hideBackImage={false}, but it doesn't seem to work.
You can't. Since you're at the root of your application, you only have one scene in your stack.
But why do you want a back button on your first application screen? It makes no sense...
However, it's pretty easy to render a back button with a custom action. For example :
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
...
/>
With
renderCustomButton() {
return () => (
<TouchableOpacity>
<Icon name="back" size={30} color="#900" />
</TouchableOpacity>
);
}
Then you just add your action or whatever you want to do with the onLeft prop
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
onLeft={**YOUR ACTION**}
...
/>
You can also add it on the TouchableOpacity onPress prop.
I usually use react-native-vector-icons for my custom navbar icons https://github.com/oblador/react-native-vector-icons
I'm trying to make a listview in Android to use in react native (Native UI Component), and I want to make row-views for listview in react native and send it like
_renderRows() {
return(
<View>
<Text> TEST Letters </Text>
</View>
);
}
<CustomListViewAndroid
...
rendorRow={this._renderRows.bind(this)} >
</CustomListViewAndroid>
Here's the image...(I'm not eligible to upload picture yet..? hahah..)
How can I make it possible..?