I'm using the Button
component from React Native and I need to change the color of the button when the button is focused with a TV remote (Amazon Fire Stick). I don't see any focus listeners available for the button. Is there anyway to achieve this functionality? Here is my code:
<Button disabled={props.loading} styles={styles.button} title="1" onPress={() => {props.addNumber(1)}}/>
I looked at the TouchableHighlight
component but it won't work because I need the color to change when the user has focused on the button before the button is clicked. By default, the opacity change is so small that it's hard to tell the button is currently focused.
To change background color of React Native button, we can set the color prop for Android and we set the backgroundColor for iOS. to add <Button title="Login Android" color="#1E6738" /> add a button with the background color set to #1E6738 for Android.
You can use a Button from react-native like this and can also pass the color prop. For complex and custom buttons you can create it by your own styles using Touchables which are given by react-native you don't have to use any third-party libraries for that. The first code doesn't change the text colour.
import { View, Button, StyleSheet, TouchableOpacity, Text } from "react-native"; To create custom buttons, you need to customize the <TouchableOpacity /> component and include the <Text /> component inside of it to display the button text.
you can have onFocus
prop in TouchableOpacity
or TouchableHighlight
, but in order to work it on TV
you need to import it from the specific package as mentioned here. as mentioned there you need to move from react-native
to react-native-tvos
. All TV-related stuff has been moved to that package. It tracks react-native but with additional TV support. It won't be coming back to react-native
core package.
read this
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