fix: migrate setNativeProps to state

[kacperkapusciak]

Motivation

This PR is a third attempt to migrate setNativeProps to state in @react-navigation/stack following official Moving setNativeProps to state guide.

After issues with the implementation of #10767 and more problems with the fix in #10871 we had to take a step back and rethink where the problem lays with these implementations.

The solution was to move the state inside the CardSheet component and use useImperativeHandle to hoist a setter function up to Card to avoid triggering a rerender during Card animate function.

Thanks so much @satya164 for pointing that out!

Fabric before

Screen.Recording.2022-11-02.at.08.54.34.mov

Screen.Recording.2022-11-02.at.09.21.40.mov

Fabric after

Screen.Recording.2022-11-02.at.08.52.35.mov

Screen.Recording.2022-11-02.at.09.25.00.mov

Test plan

New bare application on Fabric Architecture.

Code snippet

import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
import * as React from 'react';
import {Button, Easing, Pressable, Text, View} from 'react-native';

function HomeScreen({navigation}) {
  const isFabric = !!global?.nativeFabricUIManager;

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Fabric enabled: {isFabric.toString()}</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({navigation}) {
  const [value, toggle] = React.useReducer(s => !s, false);

  const isFabric = !!global?.nativeFabricUIManager;

  console.log(isFabric);

  return (
    <Pressable
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: value ? 'palevioletred' : 'wheat',
      }}
      onPressIn={toggle}
      onPressOut={toggle}>
      <Text>Details Screen</Text>
      <Text>When going back you shouldn't be able to tap ON THIS screen</Text>
      <Button
        title="Go to Overview"
        onPress={() => navigation.navigate('Home')}
      />
    </Pressable>
  );
}
const Stack = createStackNavigator();

const config = {
  animation: 'timing',
  config: {
    duration: 4000,
    easing: Easing.out(Easing.poly(5)),
  },
};

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        detachInactiveScreens={false}
        screenOptions={{
          gestureEnabled: true,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          transitionSpec: {
            open: config,
            close: config,
          },
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{title: 'Details'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	9dd662e
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6364f6cccd8af1000ac1b92f
😎 Deploy Preview	https://deploy-preview-10968--react-navigation-example.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

The Expo app for the example from this branch is ready!

expo.dev/@react-navigation/react-navigation-example?release-channel=pr-10968

[capezzbr]

Great job 🎉