A way to Highlight <Pressable/> component in react-native? - react-native

Question

So im using the Pressable Component in react-native instead of using Button because i've heard it has many limitations regarding styling. I've tried using TouchableHighlight as well but it isnt working porperly for me moreso since my Component already has some styling and Positioning adjusted into it
class randomComponent extends Component {
render() {
return (
<Pressable>
<Text>Hello World</Text>
</Pressable>
)
}
tl:dr How do i Highlight a Pressable Component? thanks

Answer 1

You can just use the "render prop" style instead if you want access to the pressed state without having to store your own useState variable.
From the docs:
<Pressable
style={({ pressed }) => [
{
backgroundColor: pressed
? 'rgb(210, 230, 255)'
: 'white'
},
styles.wrapperCustom
]}>
{({ pressed }) => (
<Text style={styles.text}>
{pressed ? 'Pressed!' : 'Press Me'}
</Text>
)}
</Pressable>

Answer 2

Solution:
import { TouchableOpacity } from 'react-native'
TouchableOpacity is better for developers with experience in a web-based background and styling.

Answer 3

You need to use a state variable to store the pressed state and change the component style accordingly
class randomComponent extends Component {
constructor(props) {
super(props)
this.state = {
pressed: false
}
}
render() {
return (
<Pressable
onPressIn={() => this.setState({pressed: true})}
onPressOut={() => this.setState({pressed: false})}
style={this.state.pressed ? styles.pressed : {}}
>
<Text>Hello World</Text>
</Pressable>
)
}
const styles = StyleSheet.create({
pressed: {
backgroundColor: 'red'
}
})