First render animation

[6ase]

Hi, does it possible to change or turn off the first render animation of Sortable.Grid? Every time when i navigate back to the route where is i use the Sortable.Grid i see the animation.

[MatiPl01]

Hey @6ase!

Could you please share a recording showing the issue and share the code for your Sortable.Grid? It shouldn't animate on navigation between screens so very likely you are doing something wrong (or there is an issue I am not aware of).

[6ase]

Hey @6ase!

Could you please share a recording showing the issue and share the code for your Sortable.Grid? It shouldn't animate on navigation between screens so very likely you are doing something wrong (or there is an issue I am not aware of).

Sure, the video in attachment, and the code of component:

export const DeviceListScreen: React.FC<DeviceListScreenProps> = ({ navigation }) => {
  const devices = useSelector(getDevicesInfo, _.isEqual);
  const errors = useSelector(getDevicesErrors, _.isEqual);
  const userData = useSelector(getUserData, _.isEqual);
  const accessToken = useSelector(getAccessToken, _.isEqual);
  const isInternetReachable = useSelector(getInternetReachable, _.isEqual);
  const connectionType = useSelector(getConnectionType, _.isEqual);
  const theme = useSelector(getActiveTheme, _.isEqual);
  const isInternetReachableRef = useRef<boolean>(isInternetReachable);
  const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState);
  const dispatch = useDispatch();
  if (accessToken) useSocketConnection(accessToken);
  const tokenChangeSubs = useRef<ReturnType<typeof Notifications.addPushTokenListener> | null>(null);
  const addDeviceNavigationHandler = useCallback(() => navigation.navigate('AddDeviceScreen'), [navigation]);
  const renderItem = useCallback<SortableGridRenderItem<DeviceInfoType>>(
    ({ item }) => <DeviceCardContainer device={item} navigation={navigation} />,
    [navigation]
  );

  const handleDragEnd = async ({ data }: { data: DeviceInfoType[] }) => {
    const idArray = { devices: data.map((device) => ({ _id: device._id })) };
    await userService.updateUserDevicesOrder(idArray, dispatch);
  };
  const handleAppStateChange = useCallback((nextAppState: AppStateStatus) => {
    setAppState(nextAppState);
  }, []);

  useEffect(() => {
    const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);
    return () => appStateSubscription.remove();
  }, [appState]);

  useEffect(() => {
    const registerNotifications = async () => {
      if (userData?.userEmail && isInternetReachableRef.current) {
        await authService.registerForPushNotifications(userData, dispatch);
        tokenChangeSubs.current = Notifications.addPushTokenListener(
          async () => await authService.registerForPushNotifications(userData!, dispatch)
        );
      } else tokenChangeSubs.current?.remove();
    };
    registerNotifications();
    return () => {
      tokenChangeSubs.current?.remove();
    };
  }, []);
  useFocusEffect(
    useCallback(() => {
      userService.setUserInfo(dispatch, devices, isInternetReachableRef.current, true);
    }, [isInternetReachable, appState, dispatch])
  );
return (
    <LinearGradient
      style={styles.mainContainer}
      colors={[THEME_CONSTANTS.COLORS[theme].BACKGROUND.START, THEME_CONSTANTS.COLORS[theme].BACKGROUND.END]}
      start={{ x: 0, y: 0 }}
      end={{ x: 0, y: 1 }}
    >
      <MyHeader
        navigation={navigation}
        userButton={true}
        emptyButton={true}
        title="TURKOV"
        tittleFamily={THEME_CONSTANTS.FONT_FAMILY.MAIN_LOGO}
        titleSize={width / THEME_CONSTANTS.DIMENSIONS.SCALE.TO_32}
        errorButton={errors.length}
        paddingBottom={width / THEME_CONSTANTS.DIMENSIONS.SCALE.TO_16}
      />

      <Text allowFontScaling={false} style={styles.heading}>
        Моё оборудование:
      </Text>
      <WifiErrorMessage isInternetReachable={connectionType === 'wifi' && !isInternetReachable} />
      <BackgroundImg stroke={THEME_CONSTANTS.COLORS[theme].BACKGROUND.IMG} width={'100%'} style={{ position: 'absolute' }} />
      <ScrollView
        contentContainerStyle={{
          paddingBottom: height / THEME_CONSTANTS.DIMENSIONS.SCALE.TO_90_HEIGHT,
          width: width * 0.94,
        }}
      >
        <Sortable.Grid
          columns={devices.length > 2 ? 2 : 1}
          enableActiveItemSnap={false}
          keyExtractor={(item) => item._id}
          data={devices}
          onDragEnd={handleDragEnd}
          renderItem={renderItem}
          sortEnabled={true}
          rowGap={13}
          columnGap={0}
        />
      </ScrollView>
      <View style={styles.addButton}>
        <MyButton
          buttonStyle="long90"
          color={THEME_CONSTANTS.COLORS[theme].BUTTON.COLOR}
          text="+"
          SvgIcon={PlusIcon}
          fontSize={width / THEME_CONSTANTS.DIMENSIONS.SCALE.TO_30}
          onPressFunction={addDeviceNavigationHandler}
        />
      </View>
    </LinearGradient>
  );
};

RerenderAnimation.mp4

[MatiPl01]

Thanks for sharing that.

Could you possibly create a simple repro without all your hooks etc., so that I am able to copy it and test on my side? If not, I will try to rewrite this code and reproduce the issue but it will be very helpful if you provide a repro that doesn't depend on your app specific things.

Could you also tell me which version of the library you use?

[6ase]

Thanks for sharing that.

Could you possibly create a simple repro without all your hooks etc., so that I am able to copy it and test on my side? If not, I will try to rewrite this code and reproduce the issue but it will be very helpful if you provide a repro that doesn't depend on your app specific things.

Could you also tell me which version of the library you use?

I am using version "react-native-sortables": "^1.3.2".

I have multiple nested navigation containers, so it will be really hard to reproduce.

As you can see from the video, if I navigate within the bottom navigation container (where all bottom icons navigate to another navigation container), it works fine, and there is no animation. But if I go deeper into the main navigation container, all the navigation calls trigger an animation.

export const MainAppNavigator: React.FC = () => {
  return (
    <Stack.Navigator initialRouteName="DeviceListScreen" screenOptions={{ headerShown: false, animationEnabled: false }}>
      <Stack.Screen name="DeviceListScreen" component={DeviceListScreen} />
      <Stack.Screen name="DeviceControlScreen" component={DeviceControlScreen} />
      <Stack.Screen name="UserProfileNavigator" component={UserProfileNavigator} />
      <Stack.Screen name="DeviceConfigNavigator" component={DeviceConfigNavigator} />
      <Stack.Screen name="AddDeviceScreen" component={AddDeviceScreen} />
      <Stack.Screen name="ErrorListScreen" component={ErrorListScreen} />
      <Stack.Screen name="ErrorScreen" component={ErrorScreen} />
    </Stack.Navigator>
  );
};

Anyway, it would be great if it were possible to turn off the first render animation through some prop.

And thank you for such a great library and for the fast support!

[MatiPl01]

Ok, thanks. I will look into this issue. This "animation" couldn't happen as it is not indented, even during the first render. It looks like the parent container dimensions aren't applied properly.

Do you use freezeOnBlur or something on the navigator?

I also wonder what happens when you revisit the screen. Do you refetch this data or render the grid with no data and fetch data with a delay?

[6ase]

Ok, thanks. I will look into this issue. This "animation" couldn't happen as it is not indented, even during the first render. It looks like the parent container dimensions aren't applied properly.

Do you use freezeOnBlur or something on the navigator?

I also wonder what happens when you revisit the screen. Do you refetch this data or render the grid with no data and fetch data with a delay?

Hi!, its look like i found a problem: i use in navigator option:
<Stack.Navigator initialRouteName="DeviceListScreen" screenOptions={{ animationEnabled: false }}>
And if i delete this option - there is no animation on Sortable.Grid. But i now i have not acceptable animation when i have navigation.
Can we fix it somehow?

NoOption.mp4

[faljabi]

I encounter the same issue on Android only when I have

<Tab.Navigator detachInactiveScreens={false} <== if it is true, no animation. But I need to have this false.

Solved it for now by using detachInactiveScreens={Platform.OS === 'android'}