0. En React Native, estoy tratando de crear una Flatlist horizontal con flechas derecha e izquierda, y espero hacer que las flechas sean visibles e invisibles al presionar con la condición de que permanezca invisible si ya está del lado derecho o izquierdo hasta la condición cambios
1. Quiero que la flecha izquierda sea invisible por defecto
2. cuando se presiona la flecha derecha, la flecha derecha debe ser invisible mientras que la flecha izquierda se vuelve visible y viceversa
3. sin embargo, no debería ser visible si presiona dos o tres veces la misma flecha

 const leftScrollHandler = () => { listViewRef.scrollToOffset({ offset: 0.5, animated: true }); }; const rightScrollHandler = () => { //OnCLick of right button we scrolled the list to bottom listViewRef.scrollToEnd({ animated: true }); }; // this below is for scroller to apear and disapear funtionality const [backgroundColor, setBackgroundColor] = useState("transparent"); const [backgroundColor2, setBackgroundColor2] = useState(colors.secondary); const [pressed, setPressed] = useState(false); function changeColor() { if (!pressed) { setPressed(true); setBackgroundColor(colors.secondary); setBackgroundColor2("transparent"); } else { setPressed(false); setBackgroundColor2(colors.secondary); setBackgroundColor("transparent"); } } <FlatList horizontal={true} showsHorizontalScrollIndicator={false} data={Data} keyExtractor={(item, index) => [item.id, index.toString()]} renderItem={renderItem} ref={(ref) => { listViewRef = ref; }} /> <TouchableOpacity activeOpacity={0.5} onPress={() => { changeColor(); leftScrollHandler(); }} style={ (web && isTablet) || isDesktop ? styles.leftScrollDesktop : styles.leftScroll } > <AntDesign style={styles.leftArrow} name="arrowleft" size={(web && isTablet) || isDesktop ? 50 : 35} color={backgroundColor} /> </TouchableOpacity> <TouchableOpacity activeOpacity={0.5} onPress={() => { changeColor(); rightScrollHandler(); }} style={ (web && isTablet) || isDesktop ? styles.rightScrollDesktop : styles.rightScroll } > <AntDesign style={styles.rightArrow} name="arrowright" size={(web && isTablet) || isDesktop ? 50 : 35} color={backgroundColor2} /> </TouchableOpacity>