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.
Related
I have a component that dismisses the keyboard. I then wrap my entire component with this one so whenever I tap outside of the TextInput the keyboard gets dismissed . But the problem is that in my other component I have a Flatlist and it does not scroll at all with TouchableWithoutFeedback. Any recommendations will be appreciated because I have not found a solution yet for hours! Thank you!
export const DismissKeyboard: React.FC<{
isKeyboardOpen?: boolean
style?: ViewStyle
}> = ({ children, style }) => (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={style}>{children}</View>
</TouchableWithoutFeedback>
)
<DissmissKeyboard>
<FlatList
...flatlist data
/>
</DissmissKeyboard>
Wrap the FlatList renderItem component into a TouchableWithoutFeedback or a TouchableOpacity
Description
When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.
React Native version:
0.63.2
Steps To Reproduce
Open a new expo snack
Create a Pressable component that is the parent of some other component (A text or image)
Set the onPress prop to call a function that has a visual effect. (Like an alert)
Switch to the android tab, and click 'Tap to play'
Expected Results
The function is called and the effect (an Alert) is fired
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/#razorshnegax/6c7be3
Code example:
import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';
export default class Index extends React.Component {
render() {
// The onPress function fires in iOS, but not android
return (
<View>
<Pressable onPress={() => {Alert.alert("Yeep")}}>
<Image source={require('./greatknight.png')} style={{
// So that the image is more centered
top: 100,
left: 100
}}/>
</Pressable>
</View>
);
}
}
Due to the styling, the Pressable component is not place behind the Image.
You can see this by adding a color to the Pressable component.
A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.
I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.
In my case added zindex to resolved this problem. This work even touchable also
<Pressable onPress={() => alert()} style={{zIndex: 0.5, }}>
*****
</Pressable>
<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
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 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: