React - styl zależny od stanu

Cześć,

naprowadzicie co robię nie tak?

export default ()=> {
    const [done, setDone] = useState(false);
    return <TouchableOpacity onPress={() => setDone(!done)} style={{opacity: done ? 0.2 : 1}}>...</TouchableOpacity>;
}

To mój komponent. Logika jest dosyć prosta - chcę, żeby klikniecie powodowało zmianę opacity na 0.2, a ponowne przywrócenie do 1.0. Problem jest w tym, że styl jest tak jakby z poprzedniego stanu. Czyli:

1. opacity = 1.0; done = false
2. Klikam
3. opacity = 1.0; done = true
4. Klikam
5. opacity = 0.2; done = false

Pewnie jest to moje niezrozumienie mechanizmu stanu :)

Kopiuj

() => setDone(!done)}

Według mnie źle robisz to, że korzystasz w ten sposób z wartości stanu. Spróbuj to zrobić tak:

() => setDone(oldState => !oldState)

Kokoniłaj napisał(a):

Kopiuj

() => setDone(!done)}

Według mnie źle robisz to, że korzystasz w ten sposób z wartości stanu. Spróbuj to zrobić tak:

Kopiuj

() => setDone(oldState => !oldState)

Próbowałem tak, niestety nie pomogło. W dokumentacji reacta też nie dają tam funkcji.

https://codesandbox.io/s/react-hooks-playground-forked-cvvw0?file=/src/index.tsx
Zamiast komponentu Hello wstaw sobie div i zobaczysz różnice.
TouchableOpacity prawdopodobnie nie wspiera propsa style.

Edit. nie doczytałem, problem leży pewnie w innym miejscu - kolega @tsz mnie uświadomił, że nie o to chodziło :)

Problem rzeczywiście z komponentem TouchableOpacity, tego się nie spodziewałem. Opakowałem wszystko w jeszcze jeden kontener i działa elegancko.
Możliwe, że związane z tym issue: https://github.com/facebook/react-native/issues/17105