Develop Reference

React Native - How to make portion of TouchableOpacity not pressable

I have a Card component that displays a listing on the app's dashboard page. The whole card is wrapped in a TouchableOpacity. I want the entire card to be Pressable, which links to the listings page.
However, I want the bottom right corner of it to not be pressable, since it contains a View that has 2 icons on it (a Like button and a Message button). Each of these icons has their own onPress() that needs to happen.
Right now, if you try to click on the bottom right icons, it just triggers the whole TouchableOpacity
Here is the return statement for Card:
return (
<Container>
<Cover style={{ backgroundColor: "red" }}>
<Image
source={{
width: 80,
height: 90,
url: "https://picsum.photos/200/300",
}}
/>
</Cover>
<Content>
<Title>{props.name}</Title>
<PriceCaption>{"$" + props.price}</PriceCaption>
<View
style={{
position: "absolute",
height: 35,
width: 100,
top: 45,
right: 0,
flexDirection: "row",
alignItems: "Flex-end",
}}
>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
left: 70,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="mail" size={26} color={colours.purple} />
</TouchableOpacity>
<TouchableOpacity
style={{
...styles.ButtonBackground,
backgroundColor: null,
marginLeft: 0,
left: 10,
}}
onPress={() => {
launchChat();
}}
title={"message"}
>
<AntDesign name="heart" size={26} color={colours.purple} />
</TouchableOpacity>
</View>
</Content>
</Container>);
Is there a property, or way I can exclude a nested View from a TouchableOpacity?
Note: If you click on the Icons, they still trigger their respective onPress(), however, the entire Card still fades out, and the animation is the same as if you clicked elsewhere on the card (so user gets poor feedback on where they clicked).

I have an understanding problem in your question, but I believe that wrapping with TouchableWithoutFeedback might be a solution or pointerEvents={"none"} property. If you do a little research on the keyword TouchableWithoutFeedback component from react-native, I think you will get the result you want

I frequently place some TouchableOpacity in other TouchableOpacities. When you press on inner TO, the inner will be pressed not the parent. So you shouldn't think about making some area of parent unpressable.
I just test my sample code to be sure. As I said earlier, it should work. I have no idea what causes this problem in your case.

React Native Scroll View Question (keep track of full page scroll loaction)

I have a scroll view that contains an image that covers the entire screen. There are two buttons at the bottom of the screen, these will allow you to download or set the image as a wallpaper. The problem I'm having is I don't know which image is being looked at in the horizontal scroll view when the button is clicked.
I have knowledge of the screen size and was assuming if I could get the content offset or something like that from the currently viewed image in the view divided by the screen size could let me know what image in the array I'm looking at to perform the rest of the functionality.
unfortunately, I'm unaware of how this could be done the code is below to give a bit of context.
<ScrollView
horizontal
decelerationRate={0}
snapToInterval={width}
snapToAlignment={"center"}
style={{ height: height }}
>
{
availibleBackgrounds.map(element => (
<Image
style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
source={{
uri: element
}}
/>
))
}
</ScrollView>
Thanks in advance,
Chris.

You need to get the offset of the content and you can do it with adding the following prop the the ScrollView:
onMomentumScrollEnd={event => setSelectedIndex(event.nativeEvent.contentOffset.x/width)}
setSelectedIndex is a function you should create.

To add a little more closure to this question here's what I've done
calculateCurrentIndex(position) {
this.setState({
selectedIndex: {
current: Math.ceil((position / width).toFixed(2)),
}
});
}
----------------------------------------
<ScrollView
horizontal
decelerationRate={0}
snapToInterval={width}
snapToAlignment={"center"}
style={{ height: height }}
onMomentumScrollEnd={event => this.calculateCurrentIndex(event.nativeEvent.contentOffset.x)}
showsHorizontalScrollIndicator={false}
>
{
availibleBackgrounds.map((element, index) => (
<Image
key={index}
style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
source={{
uri: element
}}
/>
))
}
</ScrollView>

How to retrieve clicked image onPress react native

I have number of card components in which I'm rendering some images inside. What I'm trying to do is onPress of card retrieving the clicked image.
<TouchableOpacity
onPress={this.viewProduct.bind(this)}
>
<Card>
<CardItem cardBody>
<Image source={require('../../assets/images/products/product_1.jpg')} style={{ height: 200, width: null, flex: 1 }} />
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Text>₹3500</Text>
</Button>
</Left>
<Right>
<Button transparent>
<Text style={styles.offText}>50% off</Text>
</Button>
</Right>
</CardItem>
</Card>
</TouchableOpacity>
I'm rendering the component inside a TouchableOpacity to make it as a clickable element and I have attached a function viewProduct as a event listner.
viewProduct = (item) => {
console.log(`Selected image is ${item.uri}`);
}
But when I click the function I'm not getting the clicked Image. Is there anything I have to bind inside the function or how to retrieve the image onPress of Card.

youre directly giving it a source. you need to extract that into a separate obj and parse that as your image source
check out this snippet:
https://snack.expo.io/#karanwadhwa/stack-overflow-62977355
edit: updated above snack to use local files instead

How can I position two buttons on top of the background side by side and at the bottom of the screen in React Native?

I have a container with a position of relative and an inner </View> element with a position of absolute so the buttons sit on top of the video screen in the background.
When I give the latter its property of absolute, it no longer stays at the bottom of the screen, but I need to give it this so it stays 'on top' of the image behind it.
Here are screenshots of before and after the inner element position on absolute:
Here's my code including the absolute property:
if (props.stream) {
return (
<>
<TouchableWithoutFeedback onPress={handleScreenPress}>
<View style={styles.videoViewWrapper}>
<RTCView style={styles.android} streamURL={props.stream.toURL()} />
<CountDown time={time} />
{/* {showButtons && */}
<View style={{
// position: 'absolute',
}}>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleEndCall}
>
End Call
</Button>
<Button
icon="phone"
mode="contained"
style={{ width: 200, margin: 10 }}
onPress={handleSpeakerSwitch}
>
Speaker
</Button>
</View>
{/* } */}
</View>
</TouchableWithoutFeedback>
</>
);
}
return (<> <Loader title="Connecting Your Call.." /> </>)
}
const styles = StyleSheet.create({
videoViewWrapper: {
flex: 1,
overflow: 'hidden'
},
android: {
flex: 1,
position: 'relative',
backgroundColor: 'black'
}
})
export default VideoCall;
I am seeking some tips as to how I could align the two buttons side by side at the bottom and on top of the image behind it, as I'm struggling.

If you want to achieve something like this, then see the code :
Check code :
export default class App extends React.Component {
render() {
return (
<View style={{flex:1}}>
<View style={{flex:1, flexDirection:'row', alignItems:'flex-end',}}>
<TouchableOpacity
style={{width:'40%' , backgroundColor:'blue' ,marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>End Call</Text>
</TouchableOpacity>
<TouchableOpacity
style={{width:'40%', backgroundColor:'blue',marginHorizontal:10}}
>
<Text style={{color:'white',alignSelf:'center', padding:5}}>Pick Call</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
check the link : expo snack
Hope it helps .feel free for doubts

Either you can give them separate positioning, top and left for the first, and top and right for the second button, or put them in a view and set flexDirection of the view to row so they could stay side by side. I have a card object and two buttons on top of it, and it works that way.

React Native: KeyboardAwareScrollView inside ScrollView doesn't work

I am developing a Facebook type application where i have a problem in my comments.js. In this file i have ScrollView and View wrape in a KeyboardAwareScrollView.When i click a button it's focus on TextInput correctly.The problem is only the keyboard is open and the child component inside the KeyboardAwareScrollView is not scrolled to the last TextInputs where they can focused.
What i do i can wrape the ScrollView and View into into one View but did't any help.Then i apply multiple way's i think there is issue in my code.
This question is ask multiple time i read these
1.React-Native button press after textInput in Keyboard aware scroll view
2.React Native KeyboardAwareScrollView doesn't work
3.Automatically scroll the view up when keyboard is shown in react-native
4.How to make your React Native app respond gracefully when the keyboard pops up
but didn't meet my condition.
Here is my code
<KeyboardAwareScrollView style={{flex:1}}
resetScrollToCoords={{ x:0, y: 0 }}>
<ScrollView contentContainerStyle={styles.scrollViewStyle}
keyboardShouldPersistTaps='always'>
<Image/>
<List/>
</ScrollView>
<View style={{ flexDirection: 'row', height: 50 }} >
<Image
style={{ height: 40, width: 40, marginLeft: 20 }}
source={require('../../assets/plus.png')}
/>
<View style={{ flex: 1, marginLeft: 20 }}>
<TextInput
autoGrow='true'
ref='myInput'
underlineColorAndroid='transparent'
placeholder='Type here to translate!'
onChangeText={text => this.setState({ text })}
>
{this.state.text}
</TextInput>
</View>
<TouchableOpacity
onPress={() => {
this.CommentsApi()
}}>
<Image/>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>