estou tentado fazer o flexDirection alternar entre 'row' e 'column' em um clique(um clique vai pra 'row', outro clique vai pra 'column'), o problema é que quando muda para o 'column' eu tenho que dar dois cliques para voltar para o row
import React, {useState} from "react";
import {View, StyleSheet, ToastAndroid,
TouchableWithoutFeedback} from 'react-native';
export default () => {
let direcaoAtual = 'column'
const showToast = () => {
ToastAndroid.show(direcaoAtual,
ToastAndroid.SHORT);
};
function mudaDirecao(){
if(direcaoAtual == 'row'){
direcaoAtual = 'column'
}
else{
direcaoAtual = 'row'
}
return(direcaoAtual)
}
const [curruntDirection, setCurrentDirection] =
useState(mudaDirecao());
return(
<TouchableWithoutFeedback onPress={() => {
setCurrentDirection(mudaDirecao());showToast()}}>
<View style={[style.defalt,
{flexDirection: curruntDirection}]}>
<View style={style.espaco1}/>
<View style={style.espaco2}/>
</View>
</TouchableWithoutFeedback>
)
}
const style = StyleSheet.create({
defalt: {
backgroundColor: '#69dd00',
width: '100%',
flex: 1,
flexDirection: 'row',
},
espaco0: {
backgroundColor: '#69dd00',
width: '100%',
flex: 1,
// flexDirection: 'row',
},
espaco1: {
backgroundColor: '#69dd',
flexGrow: 2
},
espaco2: {
backgroundColor: '#0000CD',
flexGrow: 2
},
})