Webview on Android can't be clicked if wrapped in Touchable - react-native

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

Related

Does KeyboardAvoidingView work in react-native-web, Expo?

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.

React native how to make an image take up full screen?

I have a component that when called should display an image for the whole screen of the phone. The issue is I cannot get the image centered. It is mostly off screen to the right with some barely visible. If anyone knows what I am doing wrong your help would be much appreciated. I am using react-native-image-zoom so the image can be zoomed on and swiped down to go away.
My image component:
const FullPicture = (props) => {
return (
<View style={{ height: '100%', width: '100%' }}>
<ImageZoom
cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
enableSwipeDown
onSwipeDown={() => props.closeImage()}
>
<Image
style={{ height: props.picture.height, width: props.picture.width }}
resizeMode={'cover'}
source={{ uri: props.picture.uri }}
/>
</ImageZoom>
</View>
);
};
You need to use a Flexbox. Try to add flex: 1 to your Image's container:
<View style={{ flex: 1, height: '100%', width: '100%' }}>
<ImageZoom> ... </ImageZoom>
</View>
Try these:
set flex: 1 in your container view
use justifyContent: 'center'
check this out.
I think this is the thing what you are looking for https://youtu.be/YRrji3BmHY4
you should use ImageBackground from react-native instead of react-native-image-zoom.
when you use ImageBackground don't forget resizeMode='contain' and styling the image, the image will not get off by any side.

onPress responding to a long press only

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

zIndex isn't working for a react native project

I'm trying to have a card shown on top of a card in React Native and set zIndex = 1 for the top card and zIndex = 0 for the bottom card and placed them in a view like below:
<View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}>
{this.props.subscribed ? (
<CardSubscribe
style={{zIndex: 2}}
/>
) : (null)}
{this._renderTextItems()}
</View>
However, there's no overlap between two cards. The bottom card starts after the top card:
I have also tried to debug with inspector and it shows the top card has the property of zIndex = 1 :
and the bottom card has the property of zIndex = 0 :
I have also tried to place the top card after the bottom card but it just shows below the bottom card, like zIndex isn't doing anything. How should I fix this?
z-index working fine in IOS. but again you will get isssue in android. In android z-index is not working you need to use elevation. But please do not forget to add z-index.
<TouchableOpacity
style={{
alignSelf: 'center',
position: 'absolute',
right: 10,
top: 10,
zIndex: 15,
elevation: (Platform.OS === 'android') ? 50 : 0
}}
onPress={() => {}}
>
<Image
source={require('dummy.png')}
/>
</TouchableOpacity>
In React Native we have position: relative by default. If you want to make the correct use of zIndex, you might need to add position: 'absolute', for them to overlap as described in your use case.
For example:
<View style={{flex: 1}}>
<View style={{width: 200, height: 200, zIndex: 1, position: 'absolute', backgroundColor: 'red'}} />
<View style={{width: 200, height: 200, zIndex: 2, position: 'absolute', backgroundColor: 'blue'}} />
</View>

How To Make Partial Blur Effect in React Native

I'm trying to create a 'focus' effect on images in React Native, but I'm unable to create this effect using Blur and Overlay.
Does anyone know how it might be done .. ?
Here's an example of what I had in mind:
You may checkout the react-native-blur library.
Their example shows a blurred background with buttons on top. You could easily place an image on the blur instead of buttons.
Hope that helps.
https://github.com/react-native-community/react-native-blur
npm i react-native-blur-overlay use this library and there are several properties to partially blur your images accordingly how you need it.
use MaskedView from #react-native-masked-view/masked-view along with BlurView from #react-native-community/blur to get this result
snack link
result:
code:
export default function App() {
const { width, height } = useWindowDimensions();
return (
<View style={styles.container}>
<MakedView
style={{ width, height, alignItems: 'center' }}
maskElement={
<BlurView
tint="dark"
intensity={54}
style={{
width,
height,
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#fff',
}}></View>
</BlurView>
}>
<Image
style={{ width, height, backgroundColor: 'transparent' }}
source={{
uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
}}
/>
</MakedView>
</View>
);
}