Menu
I am developing a simple react-native app and am encountering an issue on TouchableHighlight:
When pressing the TouchableHighlight, a new screen is displayed (using StackNavigator from react-navigation). After pressing the back-button and returning to the original screen, the TouchableHighlight still has a black background-color - meaning, that it is still highlighted.
My questions are:
TouchableHighlight-component? That way I could disable the highlighting after onPress has run.TouchableHighlight stays highlighted? I am using it on other parts of my app without navigation, and I could imagine that it has to do with that.The TouchableHighlight exists within a FlatList. The renderItems-method looks like the following:
let handlePress = () => {
this.props.navigation.navigate('DetailsScreen');
};
return <TouchableHighlight
onPress={handlePress}>
<Text>Some Text</Text>
</TouchableHighlight>;
If you need/want any further information, please let me know. I've tested the code on android, using the Genymotion-emulator with Marshmallow.
Versions are:
At this point, I'm quite certain that the error is somewhere in my code, as TouchableHighlight works correctly on other parts of my app, and it propably has to do with the navigation-call, but I was unable to pinpoint, why exactly. I've made sure that there are no exceptions or anything like that in my app, and that the onPress-method therefore finishes successfully.
204
We will introduce how to disable the button in react. js using a disabled prop to our button element. To simply disable the button, we can use the disabled prop in our button element and set its value to true . If we want to disable our button after clicking on it, We can disable it by using react's state.
TouchableOpacity increases the lighteness of a button when tocuhed while TouchableHighlight increases the darkness of a button when touched.
TouchableHighlight is a component that is used to provide a wrapper to Views in order to make them respond correctly to touch-based input. On press down the TouchableHighlight component has its opacity decreased which allows the underlying View or other component's style to get highlighted.
You can write your code like: import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, Button,TouchableOpacity} from 'react-native'; export default class App extends Component { state={ backgroundColor: 'black', backgroundColor2: 'black', pressed: false, }; changeColor(){ if(!
You can replace Touchable Highlight with Touchable opacity and simply set activeOpactity prop with value 1. It will not highlight the press.
<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With