0

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?

TrafalMar
  • 1

0 Answers0