Estaba tratando de crear una animación de colapso usando LayoutAnimation de React Native y vi algunos temas que esto no funcionaba solo en dispositivos Android. Para hacerlo posible, fue necesario poner el siguiente código dentro de un constructor:

 if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); }

Como estoy usando un componente funcional, puse este código dentro de un useEffect sin dependencias. Sin embargo, la animación sigue sin funcionar. ¿Estoy haciendo algo mal o necesito hacer algo más?

Mi código:

 const Collapse = ({ item, onPress }: CollapseProps) => { const [layoutHeight, setLayoutHeight] = useState<null | number>(0); useEffect(() => { if (item.isExpanded) { setLayoutHeight(null); } else { setLayoutHeight(0); } }, [item.isExpanded]); return ( <View> <TouchableOpacity onPress={onPress}> <Text>{item.title}</Text> </TouchableOpacity> <View style={{ overflow: 'hidden', height: layoutHeight, }}> {item.data.map((element: any) => ( <Text>{element.text}</Text> ))} </View> </View> ); }; const Menu = () => { const [menuMock, setMenuMock] = useState(mockMenu); useEffect(() => { if (Platform.OS === 'android') { // eslint-disable-next-line no-unused-expressions UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); } }, []); const updateLayout = (index: number) => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); const arrOfMenuMock = [...menuMock] as any; arrOfMenuMock[index].isExpanded = !arrOfMenuMock[index].isExpanded; // setIsDataOpen(true); setMenuMock(arrOfMenuMock); }; return ( <Menu> {menuMock.map((item, key) => ( <Collapse item={item} key={key} onPress={() => updateLayout(key)} /> ))} </Menu> ) }