Toggle text animation doesn't work properly when using React Native LayoutAnimation with navigation stack

34 Views Asked by At

Took code example from documentation to toggle text with React Native LayoutAnimation. It is working fine when is used without navigation stack. But when I push the component in Stack.Screen it starts working incorrectly.

Problem example GIF

Navigation


const screenOptions: NativeStackNavigationOptions = {
   gestureEnabled: false,
   headerShown: false,
};

<AppStack.Navigator screenOptions={screenOptions}\>
    <AppStack.Screen name={ProfileRoutes.PROFILE} component={Component} /\>
</AppStack.Navigator\>

Component

import React, { useEffect, useState } from 'react';

import {
  LayoutAnimation,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  UIManager,
  View,
} from 'react-native';
import SplashScreen from 'react-native-lottie-splash-screen';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
export const GoodsListScreen = () => {
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <View style={style.container}>
      <TouchableOpacity
        onPress={() => {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
          setExpanded(!expanded);
        }}
      >
        <Text>Press me to {expanded ? 'collapse' : 'expand'}!</Text>
      </TouchableOpacity>
      {expanded && (
        <View style={style.tile}>
          <Text>I disappear sometimes!</Text>
        </View>
      )}
    </View>
  );
};

const style = StyleSheet.create({
  tile: {
    backgroundColor: 'lightgrey',
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
});

Dependencies

    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "react-native-screens": "^3.20.0",

Has anyone faced this problem?

0

There are 0 best solutions below