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.

Displaying line bellow TouchableOpacity options wrapped in a View at the border of parent

I have a menu like component in React Native, which is wrapped in a View. This View has 3 options. I would like each option to have a line below it almost touching border of the view.
In order to achieve this I have three TouchableOpacities with Text and a View, all wrap under the same parent. This is what my code looks like:
export function Menu () {
return (
<View style={{
flex: 1,
flexDirection: 'row',
backgroundColor: 'grey',
height: 50,
justifyContent: 'space-around',
alignContent: 'center',
alignItems: 'center'
}}>
<TouchableOpacity>
<Text>Option 1</Text>
<View
style={{
width: 50,
height: 4,
backgroundColor: 'red',
paddingTop: 0,
marginTop: 25,
marginBottom: 0
}}
/>
</TouchableOpacity>
<TouchableOpacity> <Text>Option 2</Text> </TouchableOpacity>
<TouchableOpacity> <Text>Option 3</Text> </TouchableOpacity>
</View>
)
}
The issue here is that by placing the inner View at the bottom through marginTop: 25, I push my text to the top of their parent, which I do not want. Here is the result of this code:
See how Option 2 and Option 3 are centered within their parent? That is exactly how I want Option 1 to be, but with the red line right on the edge of the grey box wrapping all three options.
How can this be achieved?

wrap the <Text> inside a a <View>. Its been quite some time since I last worked on RN but I think this code should give you the desired result.
<TouchableOpacity>
<View style={{flex: 1, alignItems: 'center', height: 46}}><Text>Option 1</Text></View>
<View
style={{
width: 50,
height: 4,
backgroundColor: 'red',
paddingTop: 0,
marginTop: 25,
marginBottom: 0
}}
/>
</TouchableOpacity>
PS: I think it should work even without the height: 46 for the <View> but I can't test it at the moment so can't assure.

How to change font size in dynamic list view in react-native?

I have strange problem with code.
When I change font size dynamically the static listItem text changed. But dynamic listitem text not changing.
Here is the code:
<List
style={{
backgroundColor: "#3F51B5",
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<ListItem>
<Text
style={{
fontSize: this.state.fontSize,
textAlign: "center",
color: "white"
}}
>
Hello
</Text>
</ListItem>
</List>
Font size change in above code is working.
<List
dataArray={this.state.data}
style={{ backgroundColor: "white" }}
renderRow={item => (
<ListItem
noBorder
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Text
style={
{
fontSize: this.state.fontSize,
textAlign: "center"
}
}
>
{item.line}
</Text>
</ListItem>
)}
/>
Font size change in above code is Not working.
What is the problem? Anyone please help. It is strange issue. Static list text font-size changing but dynamic not.

The problem is that the List component in Native Base is only updated when there is a change in the dataArray prop. So an update in this.state.fontSize is not recognised by List so there will be no re-render.
Native Base also warns that List isn't suitable for dynamic lists, and advises to use the standard react-native FlatList component:
Note: List is deprecated. Use of List for dynamic list generation is
discouraged.For more advanced implementation of rendering list
dynamically, take a look at nativebase-tutorial. Use Flatlist instead.
When changing List for FlatList, you can specially state that this.state.fontSize should update the component by passing it to the extraData prop.
<List
data={this.state.data}
extraData={this.state.fontSize} // this will cause re-render for fontSize updates
style={{ backgroundColor: "white" }}
renderItem={({item}) => (
<ListItem
noBorder
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Text
style={{
fontSize: this.state.fontSize,
textAlign: "center"
}}
>
{item.line}
</Text>
</ListItem>
)}
/>

React-native view auto width by text inside

As far as I know, react-native stylesheet doesn't supports min-width/max-width property.
I have a view and text inside. The view in auto width doesn't resize by inherit text element.
How to fix that issue and make view width automatically set using text width?
My code is:
<View style={{backgroundColor: '#000000'}}>
<Text style={{color: '#ffffff'}}>Sample text here</Text>
</View>
In common HTML/CSS I would realize so:
<div style="background-color: #000; display: inline;">Sample text here</div>
Notice: flex: 1 on parent view is not helpful for me.
Text appears as
"Sam"
"ple"
"Tex"
"t"

"alignSelf" does the same as 'display: inline-block' would in common HTML/CSS and it works very well for me.
<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
<Text style={{color: '#ffffff'}}>
Sample text here
</Text>
</View>

Two Solutions
Text component fits the text content
https://facebook.github.io/react-native/docs/text.html#containers
You can wrap <Text> components into another <Text> component.
By doing this everything inside is no longer using the flexbox layout but using text layout.
<Text>
<Text>{'Your text here'}</Text>
</Text>
View container adapt to nested Text component's content
In that case you need to use the props alignSelf in order to see the container shrink to the size of its content.
<View>
<View style={{ alignSelf: 'center', padding: 12}} >
<Text>{'Your text here'}</Text>
</View>
</View>

tldr: set alignItems to any value other than 'stretch' for the style of the parent View of your View containing Text
The issue your facing is likely related to React Native's default value for alignItems: 'stretch' on a <View /> element. Basically, all <View /> elements by default cause their children to stretch along the cross axis (axis opposite to the flexDirection). Setting alignItems to any value other than "stretch" ("baseline", "flex-start", "flex-end", or "center") on the parent View prevents this behavior and addresses your problem.
Below is an example where there are two View elements contained inside of a parent View with a blue border. The two View elements each contain a View wrapped around a Text element. In the case of the first View with default styling, the yellow child View expands horizontally to fill the entire width. In the second View where alignItems: 'baseline', the pink View does not expand and stays the size of it's child Text element.
<View style={{ borderWidth: 5, borderColor: 'blue' }}>
<View>
<View style={{ backgroundColor: 'yellow' }}>
<Text style={{ fontSize: 30 }}>Hello</Text>
</View>
</View>
<View style={{ alignItems: 'baseline' }}>
<View style={{ backgroundColor: 'pink' }}>
<Text style={{ fontSize: 30 }}>Hello</Text>
</View>
</View>
</View>
The align-items property is explained well here.

If you want to apply width to View based on <Text> , you can do something like this :
<View style={styles.container}>
<Text>
{text}
</Text>
</View>
const styles = StyleSheet.create({
container: {
flexDirection:"row",
alignSelf:"flex-start",
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
WORKING DEMO

This work for me.
<View style={{alignSelf: 'flex-start', backgroundColor: 'red'}}>
<Text>abc</Text>
</View>

Or simply:
<Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>

Try this way for your requirement:
Here my height is Constant and i am enlarging the width by the length of text.
<View style={{flexDirection: 'row'}}>
<View style={{
height: 30, width: 'auto', justifyContent:'center',
alignItems: 'center'}}>
<Text style={{color:'white'}}>Now View will enlarge byitself</Text>
</View>
</View>
For Both Height and Width Try Changing the height inside the View style to 'auto' full code bellow:
<View style={{flexDirection: 'row'}}>
<View style={{
height: 'auto', width: 'auto', justifyContent:'center',
alignItems: 'center'}}>
<Text style={{color:'white'}}>Now View will enlarge byitself</Text>
</View>
</View>
Also try Giving padding to the View for arrange the text properly.

It works with Nicholas answer unless you want to center the view somewhere. In that case, you could add a wrapper view around the view to obtain the width of its content and set alignItems: 'center'. Like this:
<View style={{ flex: 1, alignItems: 'center' }}>
<View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
<Text>{'Your text is here'}</Text>
</View>
</View>
The background color is added to show the size of the inner view

Just add alignSelf to the text style, it won't take the whole width
<View style={{flex: 1}}>
<Text style={{alignSelf: 'center'}}>{'Your text here'}</Text>
<Text style={{alignSelf: 'baseline'}}>{'Your text here'}</Text>
<Text style={{alignSelf: 'flex-end'}}>{'Your text here'}</Text>
<Text style={{alignSelf: 'flex-start'}}>{'Your text here'}</Text>
</View>
These worked for me

<View style={styles.imageCancel}>
<TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
<Text style={styles.textCancel} >Close</Text>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
imageCancel: {
height: 'auto',
width: 'auto',
justifyContent:'center',
backgroundColor: '#000000',
alignItems: 'flex-end',
},
textCancel: {
paddingTop:25,
paddingRight:25,
fontSize : 18,
color : "#ffffff",
height: 50,
},
}};

React Native Border Radius with background color

In React Native, borderRadius is working but the background color given to the button stays a square. What is going on here?
JS
<TouchableHighlight
style={styles.submit}
onPress={() => this.submitSuggestion(this.props)}
underlayColor='#fff'>
<Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>
Style
...
submit:{
marginRight:40,
marginLeft:40,
marginTop:10,
},
submitText:{
paddingTop:20,
paddingBottom:20,
color:'#fff',
textAlign:'center',
backgroundColor:'#68a0cf',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
...

Try moving the button styling to the TouchableHighlight itself:
Styles:
submit: {
marginRight: 40,
marginLeft: 40,
marginTop: 10,
paddingTop: 20,
paddingBottom: 20,
backgroundColor: '#68a0cf',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
},
submitText: {
color: '#fff',
textAlign: 'center',
}
Button (same):
<TouchableHighlight
style={styles.submit}
onPress={() => this.submitSuggestion(this.props)}
underlayColor='#fff'>
<Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

You should add overflow: hidden to your styles:
Js:
<Button style={styles.submit}>Submit</Button>
Styles:
submit {
backgroundColor: '#68a0cf';
overflow: 'hidden';
}

Never give borderRadius to your <Text /> always wrap that <Text /> inside your <View /> or in your <TouchableOpacity/>.
borderRadius on <Text /> will work perfectly on Android devices. But on IOS devices it won't work.
So keep this in your practice to wrap your <Text/> inside your <View/> or on <TouchableOpacity/> and then give the borderRadius to that <View /> or <TouchableOpacity /> so that it will work on both Android as well as on IOS devices.
For example:-
<TouchableOpacity style={{borderRadius: 15}}>
<Text>Button Text</Text>
</TouchableOpacity>
-Thanks

Remember
if you want to give Text a backgroundcolor and then also borderRadius in that case also write overflow:'hidden' your text having a background colour will also get the radius otherwise it's impossible to achieve until unless you wrap it with View and give backgroundcolor and radius to it.
<Text style={{ backgroundColor: 'black', color:'white', borderRadius:10, overflow:'hidden'}}>Dummy</Text>

I have resolved it by updating:
touchable: {
borderWidth: 0.2;
...
};
to be
touchable: {
borderWidth: 1;
...
};
Looks like decimal values(0.2) don't work with borderWidth on android

Apply the below line of code :
<TextInput
style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20, marginBottom: 20, fontSize: 18, backgroundColor: '#68a0cf' }}
// Adding hint in TextInput using Placeholder option.
placeholder=" Enter Your First Name"
// Making the Under line Transparent.
underlineColorAndroid="transparent"
/>