<MaterialIcons
name={'call'}
size={20}
onPress={()=>{this.props.toggleSomething(true);}}
/>
This material icon is inside a react-native-elements ListItem which has it's own onPress.
On pressing the icon the ListItem's onPress is also fired.
How can we prevent this?
I think it would be better to create your own ListItem component to have total control over it
Related
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.
Related to https://github.com/facebook/react-native/issues/13745
Just add one props in your FlatList as below:
<FlatList
keyboardDismissMode={'none'}
.....
</FlatList>
Chears.!
Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.
<FlatList
data={...}
ListFooterComponent={renderYourFooter()}
/>
or
<FlatList
data={...}
ListFooterComponent={<View>
<TextInput/>
</View>}
/>
I got a weird problem on my react native app, I've a counter buttons, like increment and decrement the quantity of product using redux, but the problem is when i press on button the store value change but the Text component (View) doesn't change automatically until i click outside the button (That's the weird issue).
I tried Button component with onPress, TouchableOpacity onPress but still the same issue.
<TouchableOpacity onPress={()=>{this.handleDecQuantity(item)}}>
<Icon
family="AntDesign"
size={16}
name="minus"
color="#2B4D8E"
style={styles.btn}
/>
</TouchableOpacity>
...
<Text size={16}>{item.quantity}</Text>
...
<Button onlyIcon icon="plus" radius={3} shadowless iconFamily="AntDesign" iconSize={20} color="tarnsparent" iconColor="#2B4D8E" style={styles.btn} onPress={()=>{this.handleIncQuantity(item)}}>+</Button>
I hope the issue is clear, The counter change only when i click outside of button or TouchableOpacity
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 wanna bind a onPress event to a view ,got no effect.But work fine in its child View(it's a Text View);Here's my code:
<View style={styles.loginByPhoneBtnContianer} onPress={this.makeLogin} >
<Text style={styles.loginByPhoneBtnTitle}>
Login
</Text>
</View>
You can't use the onPress event in View component you should use a TouchableHighlight or a TouchableOpacity component instead of it.
It works fine after I changed my View to TouchableHighlight:)
I am using ListView, each Item of ListView is TouchableOpacity component. onPress I need to navigate to another page. So onPress method I call _navigator(). But when I press on Item (TouchableOpacity element) its hangs on several seconds about 4-5s. Here an example of my code.
rerenderRow(row, rowID, tabId) {
<TouchableOpacity style={styles.element} onPress={() => this._navigate('NewPage', row)}>
<View>----</View>
</TouchableOpacity>
}
How can I fix this issue ?