I've created an app using Expo, and when running on Android, onPress requires a long press to actually respond. It happens with TouchableOpacity, TouchableWithoutFeedback, TouchableNativeFeedback from react-native and Button from react-native-elements.
It doesn't matter the type of action I perform when onPress is triggered; my app tries to navigate, but even a simple alert requires a long press. Below is the code of one of the components I use, including its style. Many answers in SO mention about positioning and zIndex, but that doesn't seem to be my problem.
<TouchableOpacity
style={{
width: '15%',
height: 100,
color: 'white',
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#333333',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'column'
}}
onPress={() => this.onMenuButtonClick(item)}>
<View>
<Icon name={item.icon} color={item.colorIcon} />
<Text style={{ color: 'white' }}>{item.name}</Text>
</View>
</TouchableOpacity>
This happens only in Android, both on emulator and device. When deploying the app to iOS works fine.
Weird thing is that the back arrow for the navigation component works fine, a simple press does the work, but any of the afore mentioned components I'm using won't work when just pressed.
Any clue?
Here's an expo snack replicating the problem https://snack.expo.io/#pollirrata/cae485
remove TapGestureHandler, fixed snack https://snack.expo.io/#djalik/nervous-oranges
Related
In short: does KeyboardAvoidingView work in react-native-web or is there another way to move TextInput above keyboard when keyboard opens?
Getting the keyboard to work fluently in web environment is needed functionality. People might use web version of app with tablets or mobile devices in which cases handling keyboard fluently is important.
At the moment it seems that when focusing input the screen will move to it after character in keyboard is pressed. Before that the input can be completely under the keyboard which is not good for user experience.
In android and iOS Expo app KeyboardAvoidingView has worked perfectly and I have used "softwareKeyboardLayoutMode": "resize" to achieve desired outcome.
But in web I'm not sure if I am implementing KeyboardAvoidingView correctly, if more configuration is needed or if it works at all in web environment.
This is simplified return() of the LoginScreen.tsx where KeyboardAvoidingView is used
return (
<ImageBackground source={I.backGround} style={S.LoginStyles.container}>
<View style={S.LoginStyles.row}>
<Text style={S.LoginStyles.headerTitle}>
{language.LoginScreen.Text1}
</Text>
<Text style={S.LoginStyles.headerSubTitle}>
{language.LoginScreen.Text2}
</Text>
</View>
<KeyboardAvoidingView behavior="padding">
<View style={S.LoginStyles.middleContainer}>
<TextInput
style={[S.LoginStyles.formInput, { marginTop: 40 }]}
onChangeText={text => setFieldValue(C.DatabaseConstants.name, text)}
/>
<TextInput
style={S.LoginStyles.formInputPassword}
onChangeText={text =>
setFieldValue(C.DatabaseConstants.password, text)
}
onSubmitEditing={() => OnLogin()}
/>
<FunctionButton
func={OnLogin}
text={language.LoginScreen.Text5}
buttonStyle={S.ButtonStyles.login}
/>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
Also if it does not work how could this functionality (moving input on top of keyboard onFocus) could be achieved in react-native-web.
I have tried to add solutions found in:
How to prevent mobile keyboard from covering html input
HTML5 mobile keyboard covers the input in Full screen mode
Scroll textfield up when keyboard popsup
...in index.html file with no success.
EDIT
I have stackNavigator inside drawer navigation (react native navigation).
I'm not sure if react native navigation makes Keyboard not to work but it shouldnt. LoginScreen example (that is above) now works but I cannot get simple screen inside navigation to work. The code of the simple screen is below:
<View style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
backgroundColor: 'red',
}}>
<ScrollView style={{ flexGrow: 1 }}>
<View style={{ height: 500, width: '100%' }}></View>
<KeyboardAvoidingView behavior="padding">
<View style={{ height: 100, backgroundColor: 'blue', width: '100%' }}>
<TextInput style={{
height: C.Dimensions.heightSm2, //based on screen height
minHeight: 27,
width: C.Dimensions.formInputWidth, //based on screen width
marginBottom: 5,
borderRadius: 20,
borderWidth: 1,
color: Colors.black,
borderColor: Colors.black20,
outlineWidth: 0,
fontSize: 20,
fontFamily: 'catamaranRegular',
}} />
</View>
</KeyboardAvoidingView>
</ScrollView>
</View>
When the TextInput inside blue View component is focused the keyboard hides the input and when character of keyboard is pressed the TextInput comes above keyboard.
This is Android specific problem in react native app.
To be more precise, this issue can be produced on Samsumg S6 Edge, Pixel 2 etc. and it works with other Android phones.
I have a webview (which plays video) wrapped under Touchable as shown below:
<TouchableOpacity style={{
width: deviceWidth,
height: 225
}} onPress={() => {
console.log("It works or not?")
}}>
<View onStartShouldSetResponder={() => true} style={styles.newsVideo}>
<WebView ref="videoView"
scalesPageToFit={true}
javaScriptEnabled={true}
allowsInlineMediaPlayback={true}
source={{uri: item.node.newsUrl + '&fs=1'}}
/>
</View>
</TouchableOpacity>
When I click on webview, it wont recognize touch at all.
If I remove TouchableWithoutFeedback, it works jut fine.
I need to have touchable to get some data on its onPress event when clicked on webview.
Here is style for - styles.newsVideo
newsVideo: {
overflow: 'hidden',
alignSelf: 'center',
width: deviceWidth,
height: 225,
borderRadius: 0,
marginTop: 0,
borderColor: 'transparent',
},
I have tried props like onStartShouldSetResponder, pointerEvents as suggested on other posts. none them is working for me.
Really appreciate someone's help here. Thanks
Don't misunderstand me. NativeBase is fantastic, but it's feels horrible to change the easiest things... Like when I just want an Icon to wrapped inside a View, then for some reason my Icon will receive a top and bottom margin, and I can't override it :/.
Or when I just tried to put 2 buttons inside a footer. When I wanted to give padding to the Footer component the buttons got pushed down. Native Base is fantastic, but if you want something what not out of the box then the simplest thing can get overwhelming...
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<View style={{ borderColor: 'black', borderWidth: 1, alignContent: 'center' }}>
<Icon style={{ fontSize: 50, height: 'auto'}} name='camera'/>
</View>
</View>
Am I the one who can't use NativeBase properly, or it is really that hard to make little things work?
Without touching (and by default) Touchable highlight is giving me a semi-transparent button!
<LoginButton ref={btn => { this.btn = btn; }} onPress={this._executeLoginQuery} text='Sign in'></LoginButton>
rendered in LoginButton as
render () {
const { icon} = this.props;
return (
<TouchableHighlight style={styles.button} onPress={this.props.onPress}>
<View
style={{
flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.buttonText}>{this.getText()}</Text>
</View>
</TouchableHighlight>
)
}
}
with the style
button: {
height: 45,
borderRadius: 100,
marginHorizontal: Metrics.section,
marginVertical: Metrics.baseMargin,
backgroundColor: Colors.blueButton,
justifyContent: 'center',
overflow:'hidden',
opacity: 1.0,
},
Giving the result as:
And as you can see background "waves" are coming through - not just through the button but the parent white background too!
How can I stop this?
From react native docs:
The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
Can you tell me whats the value of Colors.blueButton. If there is opacity in any child under TouchableHighlight then please try removing it.
2nd Way
You can use TouchableOpacity and control its opacity by using activeOpacity prop.
<TouchableOpacity activeOpacity={0.8}>
//...login Button view
</TouchableOpacity>
I just started using react-native so sorry if it's a trivial question.
I'm trying to create a sidebar with multiple links in it. The sidebar works fine but the issue is with the links themselves. Below is the jsx for the link.
<TouchableOpacity style={MenuItemStyles.ItemWrapper} onPress={this.props.onPress}>
<View style={MenuItemStyles.itemIcon}>
<Icon
name={this.props.iconName}
size={this.props.size || 30}
color={Colours.LightGrey}
/>
</View>
<Text style={MenuItemStyles.itemLabel}>
{this.props.label}
</Text>
</TouchableOpacity>
And the style:
const MenuItemStyles = StyleSheet.create({
ItemWrapper: {
flexDirection: 'row',
alignSelf: 'stretch',
marginTop: 10,
width: 100,
marginBottom: 10
},
itemIcon: {
alignItems: 'center',
alignSelf: 'center',
width: 80,
},
itemLabel: {
color: '#000000',
fontSize: 20,
fontFamily: 'sans-serif-light',
textAlign: 'center',
marginLeft: 5,
}
});
The link contains an icon(Material style), follows by the label. The onPress event is registered correctly. However the click area size is very small ie onPress only triggers when pressing on the icon, not the label. I would assume TouchableOpacity covers all nested component?Can I control how wide TouchableOpacity cover?
Thanks
Wrap your <TouchableOpacity/>component in view that has the style you are curenttly assigning on TouchableOpacity like this <View style={MenuItemStyles.ItemWrapper}>
and by adding flex:1 on the <TouchableOpacity/> component it will inherit the size of the <View>
heres a working example of what I think you are trying to accomplish with the solution above implemented:
https://rnplay.org/apps/SW983Q