i'm using TabView and in every tab i use flatList. every list item has phone and email button. But TouchableOpacity onpress not working so i use onPressOut. onPressOut working but it works when i touched in not when touched out. you guys have any ideas why this is happennig
<View style={styles.ButtonGroup}>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#BEF7D1'}]}
onPressOut={() => {
Linking.openURL(`tel:+90${data.item.kiraci_gsm1}`);
}}>
<Icon
name={'phone'}
type="font-awesome-5"
size={24}
color="#036122"
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#C6E1FF'}]}
onPressOut={() => {
Linking.openURL(`mailto:${data.item.kiraci_eposta1}`);
}}>
<Icon
name={'envelope'}
type="font-awesome"
size={24}
color="#0050AC"
/>
</TouchableOpacity>
</View>
Pay attention from where import your "TouchableOpacity". When I changed "TouchableOpacity" from "react-native-gesture-handler" to "react-native" for Android platform.
Related
In general the lay-out seems fine, the content is wrapped up inside a KeyboardAvoidingView as followed:
<KeyboardAvoidingView
keyboardVerticalOffset={-useHeaderHeight()}
behavior={"padding"}
style={styles.container}>
<View style={styles.conversationContainer}>
<ScrollView
ref={scrollViewRef}
onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
overScrollMode='never'
showsVerticalScrollIndicator={false}
enableOnAndroid={true}
style={styles.conversation}>
{messagesView}
</ScrollView>
<View
style={styles.send}>
<TextInput
value={text}
textAlignVertical='center'
placeholder='Write your message'
style={styles.textInput}
blurOnSubmit={true}
onChangeText={(value) => setText(value)}
>
</TextInput>
<TouchableOpacity
style={[styles.button]}
activeOpacity={.6}
onPress={() => addMessage()}>
<IonIcon
name={"arrow-forward-circle-outline"}
size={30}
color={'#00966E'}
style={styles.icon} />
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
With the keyboard open, the TextInput is placed above the keyboard as intended.
Keyboard Picture
But whenever I press a single keystroke, the entire view (including the TextInput), lowers down, covering half of the TextInput.
Image of keyboard covering the TextInput
I have already tried changing the KeyboardVerticalOffset to different values as well as the changing the behavior to "heigth", "position" or none. None of these happened to change anything.
Had the same issue. This syntax helped me: <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature :
The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At
Would you have ideas ?
Here is also a sample of the code :
<View style={styles.videoRow}>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
/>
{!debloque3 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
/>
{!debloque4 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
</View>
Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).
A really simple quick-and-dirty way of doing this like so:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
{/* Obscure the TouchableOpacity with a View which completely covers it */}
{shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
</View>
</View>
);
Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View
pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
</View>
</View>
);
Depends what you prefer.
You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.
<View>
{
debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
}
</View>
Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.
I have used MapBoxGL in my expo ejected project. i want to use my custom component at map PointAnnonation.
I have added custom icon too. But what i want is to navigate on touch of that i cont to different screen. So i wrapped whole MapboxGL.PointAnnotation 's child in TouchaleOpacity but it does not work while tapping on it.
<MapboxGL.MapView
style={styles.map}
logoEnabled={false}
localizeLabels={true}
>
<MapboxGL.Camera
zoomLevel={15}
animationMode={'flyTo'}
animationDuration={1100}
centerCoordinate={[73.20812, 22.29941]}
/>
<View>
<MapboxGL.PointAnnotation coordinate={[73.20812, 22.29941]}>
<TouchableOpacity onPress={() => Alert.alert('hello')}>
<Entypo
name='location-pin'
size={50}
color='black'
onPress={() => Alert.alert('h')}
/>
</TouchableOpacity>
</MapboxGL.PointAnnotation>
</View>
</MapboxGL.MapView>
Dependencies :
"#react-native-mapbox-gl/maps": "^8.1.0-rc.9",
"react-native": "~0.62.2",
I also faced this issue. TouchableOpacity doesn't work with MapboxGL.PointAnnotation, but it works with MapboxGL.MarkerView.
For handle click in PointAnnotation you can try to use onSelected prop. Such as I do here:
<MapboxGL.PointAnnotation
id={uuid4()}
onSelected={handleClick}
key={name}
coordinate={[longitude, latitude]}>
<TouchableOpacity>
<EntypoIcon name="location-pin" color="red" size={40} />
</TouchableOpacity>
</MapboxGL.PointAnnotation>
It will work with some delay and without opacity animation.
I am trying design like below image with react native.If anyone have worked like this modal design over the toolbar then please help me.
1
You will need a Modal with a embedded TouchableOpacity combined with some styling for positioning.
Please refer this
https://snack.expo.io/SJrDAC8Qr
render() {
return (
<>
<View>
<Appbar.Header>
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
</Appbar.Header>
<View>
<Text>Main content!</Text>
</View>
</View>
{/*Modal code*/}
<Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
<TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
<View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
<Text style={{color:'#ffffff'}}>Hello World!</Text>
</View>
</TouchableOpacity>
</Modal>
</>
);
}
Not very nicely styled but I guess it does what you want
I put TouchableOpacity for onPress because View can not make it. When i gave TouchableOpacity onPress with navigation it stopped working. Why is not working? Help me please.
Code:
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</TouchableOpacity>
Firstly, TouchableOpacity must have only one child component. You are adding Image and Text components separately. They must be wrapped in a View.
Change it like this,
<TouchableOpacity style={{flex:2}}
activeOpacity={.7}
onPress={() => navigate('Articles', {
otherParam: rowData.article_title
})}>
<View>
<Image
source = {{ uri: rowData.mobile_image }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
{rowData.article_title}
</Text>
</View>
</TouchableOpacity>