When I press on an <TouchableHighlight />, with an <Image/> component inside, a white square appears even though I have set underlayColor prop's opacity value to 0.
What is causing this and how can I fix it?
<TouchableHighlight underlayColor="rgba(255,255,255,0)" onPress={() => this.props.navigation.goBack()} style={{width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
<Image
style={{ width: 50, height: 50,}}
source={backArrow}
/>
</TouchableHighlight>
Perhaps you could take a different approach, by using TouchableOpacity with activeOpacity set to 0 like so:
<TouchableOpacity activeOpacity={0} onPress={() => this.props.navigation.goBack()} style={{ width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
<Image style={{ width: 50, height: 50 }} source={backArrow} />
</TouchableOpacity>
If I understand your requirements correctly, then you should find this use of the activeOpacity prop achieves what you want. For more information on activeOpacity, see this documentation
Related
here is the code that is causing the issue
<ScrollView style={styles.scrollView}>
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}
>
<View
style={{
top: 1,
width: 300,
height: 50,
borderRadius: 20,
backgroundColor: 'white',
alignSelf: "center",
borderWidth: 5,
borderColor: 'rgb(14,59,88)',
}}>
<Text style={{ color: 'black', fontSize: 20, letterSpacing: 0, alignSelf: "center", top: 6, left: -15 }}>
New Announcement
</Text>
<Image
style={{ width: 30, height: 30, left: 222, bottom: 20 }}
source={
require('../assets/PLUS.png')
}>
</Image>
</View>
</TouchableHighlight>
</ScrollView>
I am new to JS and react native so if Im doing anything wrong let me know
You should try optional chaining if your preset supports it:
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}>
Otherwise, you need to check step by step:
<TouchableHighlight
onPress={() => this.props && this.props.navigation && this.props.navigation.navigate && this.props.navigation.navigate("ACompose")}>
Change the rectangular view into quadrilateral view through style
I need to have the quadrilateral background in the view. If it can be done through style, it will be great. Otherwise I've use the image as its background. I dont want to do it however since it wil increase app size as well.
<View>
<Image source={{uri: 'https://previews.123rf.com/images/jaboy/jaboy1706/jaboy170600065/79609763-new-green-light-scenery-background.jpg'}}
style={{width:200, height: 70 }} />
<View style={{ backgroundColor: 'red', padding: 10, paddingTop: 25 }}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
</View>
how it looks now
how I want it to look like
You can achieve this by using 2 views.
<View>
<View
style={{
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 200,
borderTopWidth: 30,
borderLeftColor: 'red',
borderTopColor: 'transparent',
}}
/>
<View style={{ height: 70, width: 200, backgroundColor: 'red' }}>
<Text>A</Text>
</View>
</View>
I am new to react native.
I have used a Flat Grid and I want to access a Image component on click event. I want to update its image and I am unable to access that image tag.
On click of gird item I want to update image src.
Scenario :-
I have got list of recipes and on click of these I want show them selected by making the Icon to tick.
below is Flat Grid I have used.
<FlatGrid
itemDimension={130}
items={this.state.recipie_listing}
renderItem={({ item, index }) => (
<TouchableOpacity
onPress={() => this.AddRecipe(index, item.id)}>
<View>
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: item.image
}}
>
<Icon
name={this.state.icon_name}
style={{
color: this.state.icon_color,
position: "absolute",
right: 2,
top: 2
}}
/>
<View
style={{
backgroundColor: "rgba(220, 222, 224, 0.8)",
height: 60,
width: "100%",
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "absolute",
bottom: 0
}}
>
<CustomText
style={{
marginStart: 10,
marginEnd: 5,
color: "white",
fontSize: 15,
fontWeight: "bold"
}}
>
{item.name}
</CustomText>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)}
/>
At first, add a state variable like showImage to false and then
In AddRecipe method call the setState method and toggle the variable value and then where you want to load the image src add conditional rendering
here is a code example
state = { showImage : false}
------
AddRecipe = () =>{
this.setState({
showImage:!this.state.showImage
})
render(){
return(
----------
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: this.state.showImage === true ? src1 : src2
}}
>
----------
)
}
I think that will help you as far as I understand your problem.
I have used borderRadius in Image and loop it. It works in some images however others are rectangular. If I touch it then it shows the radius and disappears as soon as it is untouched. Using overflow hidden doesn't do the trick as well.
I'm confused I used the same style but the result is different. I've tested it on Android devices only.
https://snack.expo.io/#codebyte99/multiplearrays
code:
<TouchableOpacity activeOpacity={0.8}>
<ImageBackground
source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ",
}}
style={[
{
width: 200,
height: 80,
resizeMode: "center",
justifyContent: "flex-end",
alignItems: "center",
margin: 5,
marginRight: 0,
marginTop: 0,
marginBottom: 5,
borderRadius: 6,
overflow: "hidden",
},
]}
>
<Text>{childItem.title}</Text>
</ImageBackground>
</TouchableOpacity>;
You have to set the borderRadius to Image, not in style:
<Image source={{...}} borderRadius={6} .../>
And you don't set overflow: 'hidden' in image style, but in the View:
<View style={{ ..., overflow: 'hidden' }}>
<Image ..../>
</View>
Wrap the Image in a View with overflow: "hidden" and apply borderRadius to that, e.g.
<View
style={{
width: 30,
height: 30,
borderRadius: 15,
overflow: "hidden",
}}
>
<Image
style={{ width: 30, height: 30}}
source={{ uri }}
></Image>
</View>
(I could not find a way to get borderRadius to work on the image directly on Android.)
Applying the same fixed height and width to the image and borderRadius as half of the (height/width) will solve the border issue for android in react-native. Note: Make sure you have resizeMode as 'cover'
<Image key={index} source={{ 'uri' }} resizeMode='cover' style={{ height: 40, width: 40, borderRadius: 20 }} />
In my code i have 2 textInputs, one has one line and the other has multiple lines, the input is arabic so i have to enable textAlign: 'right',
my problem is when i set multilines to true, the placeholder text remains on the left side of the text input,
any idea how to solve this?
my code is the following:
View:
<View style={{ position: 'relative' }}>
<TextInput
style={forms.textInput}
value={this.state.telephone}
placeholder={'رقم هاتفك'}
placeholderTextColor={'rgba(0,0,0,0.6)'}
onChangeText={(val) => this.setState({telephone: val}) } />
<Icon name="android-phone-portrait" size={27} color="rgba(0,0,0,0.6)" style={{ position: 'absolute', top: 10, right: 24 }}/>
</View>
<View style={{ position: 'relative' }}>
<TextInput
style={[forms.textInput,{height: 120}]}
multiline={true}
value={this.state.desc}
numberOfLines={4}
placeholder={'اقتراحك'}
placeholderTextColor={'rgba(0,0,0,0.6)'}
onChangeText={(val) => this.setState({desc: val}) }/>
<Icon name="ios-help-outline" size={27} color="rgba(0,0,0,0.6)" style={{ position: 'absolute', top: 10, right: 24 }}/>
</View>
Style:
textInput: {
height: 40,
borderColor: 'rgba(0, 0, 0, 0.4)',
borderWidth: 2,
margin: 15,
marginTop: 5,
backgroundColor: '#fff',
color: 'rgba(0, 0, 0, 0.9)',
paddingRight: 40,
textAlign :'right'
},
______________________*******________________________
______________________*******________________________
I have actually made a pull request for this which has been accepted and will be in the 0.29.0 release of react-native.
My fix was to add this line
_placeholderView.textAlignment = _textView.textAlignment;
to react-native/Libraries/Text/RCTTextView.m
Inside the updatePlaceholder function (right before [self insertSubview:_placeholderView belowSubview:_textView];)
GitHub Commit