add stateSettings to customize state animation

native/example/src/App.js

@@ -97,6 +97,14 @@ const Login = ({state}) => {
         title="go to LoginConfirmation"
         onPress={() => goTo('LoginConfirmation', {phone: '2398723987'})}
       />
+      <Button
+        title="go to Stats #1"
+        onPress={() => goTo('Stats', {animation: 'slide'})}
+      />
+      <Button
+        title="go to Stats #2"
+        onPress={() => goTo('Stats', {animation: 'rotation'})}
+      />
       <Text>{'login '.repeat(100)}</Text>
       <Button
         title="change name"
@@ -111,6 +119,17 @@ const Login = ({state}) => {
   );
 };
 
+/** @type {GouterScreen<'Stats'>} */
+const Stats = ({state}) => {
+  return (
+    <View style={styles.container}>
+      <Text>Stats</Text>
+      <Text>animation: {state.params.animation}</Text>
+      <Button title="go back" onPress={goBack} />
+    </View>
+  );
+};
+
 /** @type {GouterScreen<'LoginConfirmation'>} */
 const LoginConfirmation = ({state, animationProps: {parentIndexes}}) => {
   const [parentIndex] = parentIndexes;
@@ -419,6 +438,13 @@ const screenConfigs = {
   Login: {
     component: Login,
   },
+  Stats: {
+    component: Stats,
+    stateSettings: state => ({
+      animation:
+        state.params.animation === 'rotation' ? defaultAnimation : iOSAnimation,
+    }),
+  },
   LoginConfirmationStack: {
     component: LoginConfirmationStack,
     stackSettings: drawerSettings,

native/example/src/index.d.ts

@@ -5,6 +5,9 @@ type Config = {
     name: string;
   };
   LoginModal: {};
+  Stats: {
+    animation?: 'slide' | 'rotation';
+  };
   LoginConfirmationStack: {};
   LoginConfirmation: {
     phone: string;

native/example/src/router.js

@@ -6,7 +6,7 @@ import {getLinking} from 'gouter/linking';
 export const routes = {
   App: {
     navigator: newStackNavigator({}),
-    allowed: ['LoginStack', 'LoginConfirmationStack', 'Tabs'],
+    allowed: ['LoginStack', 'LoginConfirmationStack', 'Tabs', 'Stats'],
     builder: (_, create) => [create('LoginStack', {})],
   },
   LoginStack: {
@@ -18,6 +18,7 @@ export const routes = {
     redirector: (_, goTo) => goTo('LoginStack', {}),
   },
   LoginModal: {},
+  Stats: {},
   LoginConfirmationStack: {
     navigator: newStackNavigator({}),
     allowed: ['LoginConfirmation', 'LoginDrawer'],

native/index.js

@@ -42,17 +42,25 @@ import { PanResponder, Animated, StyleSheet, Dimensions } from 'react-native';
  */
 
 /**
+ * @typedef {{
+ * animation?: Animation
+ * }} StateSettings
+ */
+
+/**
+ * @template S
  * @template {import('..').Config} T
  * @template {keyof T} N
- * @typedef {(state: import('../state').GouterState<T, N>) => StackSettings} ComputableStackSettings
+ * @typedef {(state: import('../state').GouterState<T, N>) => S} Computable
  */
 
 /**
  * @template {import('..').Config} T
  * @template {keyof T} N
  * @typedef {{
  * component: React.ComponentType<ScreenProps<T, N>>
- * stackSettings?: StackSettings | ComputableStackSettings<T, N>
+ * stackSettings?: StackSettings | Computable<StackSettings, T, N>
+ * stateSettings?: StateSettings | Computable<StateSettings, T, N>
  * }} ScreenConfig
  */
 
@@ -291,7 +299,18 @@ const GouterNativeStack = memo(
       ],
     );
 
-    const { animation } = stackSettingsRef.current;
+    const thisScreenConfig = screenConfigs[state.name] || defaultScreenConfig;
+
+    const { stackSettings, stateSettings } = thisScreenConfig;
+
+    const thisStateSettings =
+      typeof stateSettings === 'function' ? stateSettings(state) : stateSettings;
+
+    const { animation: stackAnimation } = stackSettingsRef.current;
+
+    const animation = thisStateSettings
+      ? thisStateSettings.animation || stackAnimation
+      : stackAnimation;
 
     const animatedStyleOrStyles = useMemo(
       () => (animation ? animation(animationProps) : null),
@@ -311,9 +330,6 @@ const GouterNativeStack = memo(
     const prevFocusedFreshIndex = focusedFreshIndexRef.current;
     focusedFreshIndexRef.current = focusedFreshIndex;
 
-    const thisScreenConfig = screenConfigs[state.name] || defaultScreenConfig;
-
-    const { stackSettings } = thisScreenConfig;
     const thisStackSettings =
       typeof stackSettings === 'function'
         ? stackSettings(state)