Menu
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.
497
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
129
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
