fix: bad initial frame position (#1463)

FabricTestExample/App.js

@@ -5,9 +5,10 @@ import Test642 from './src/Test642';
 import Test780 from './src/Test780';
 import Test860 from './src/Test860';
 import Test1072 from './src/Test1072';
+import Test1463 from './src/Test1463';
 
 const App = () => {
-  return <Test42 />;
+  return <Test1463 />;
 };
 
 export default App;

FabricTestExample/src/Test1072.tsx

@@ -46,7 +46,7 @@ export default function App() {
         <Stack.Navigator
           screenOptions={{
             fullScreenSwipeEnabled: true,
-            stackAnimation: 'fade_from_bottom',
+            stackAnimation: 'default',
             customAnimationOnSwipe: true,
           }}>
           <Stack.Screen name="First" component={First} />

FabricTestExample/src/Test1463.tsx

@@ -0,0 +1,124 @@
+import React, {useState} from 'react';
+import {Button, Dimensions, Image, StyleSheet, Text, View} from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import {
+  GestureHandlerRootView,
+  ScrollView,
+  State,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
+
+const Stack = createNativeStackNavigator();
+
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  return (
+    <View style={{
+      flex: 1,
+      backgroundColor: 'blue',
+    }}>
+      <Button
+        onPress={() => navigation.navigate('Second')}
+        title="Go to second"
+      />
+    </View>
+  );
+}
+
+function Second() {
+  return (
+    <View style={{
+      flex: 1, 
+      backgroundColor: 'red',
+    }}>
+      <Text style={styles.subTitle}>
+        Use swipe back gesture to go back (iOS only)
+      </Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{flex: 1}}>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            fullScreenSwipeEnabled: false,
+            stackAnimation: 'fade',
+            customAnimationOnSwipe: true,
+          }}>
+          <Stack.Screen name="First" component={First} />
+          <Stack.Screen name="Second" component={Second} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </GestureHandlerRootView>
+  );
+}
+
+// components
+
+function Post({onPress}: {onPress?: () => void}) {
+  const [width] = useState(Math.round(Dimensions.get('screen').width));
+
+  return (
+    <TapGestureHandler
+      onHandlerStateChange={(e) =>
+        e.nativeEvent.oldState === State.ACTIVE && onPress?.()
+      }>
+      <View style={styles.post}>
+        <Text style={styles.title}>Post</Text>
+        <ScrollView horizontal>{generatePhotos(4, width, 400)}</ScrollView>
+        <Text style={styles.caption}>Scroll right for more photos</Text>
+      </View>
+    </TapGestureHandler>
+  );
+}
+
+// helpers
+function generatePhotos(
+  amount: number,
+  width: number,
+  height: number,
+): JSX.Element[] {
+  const startFrom = Math.floor(Math.random() * 20) + 10;
+  return Array.from({length: amount}, (_, index) => {
+    const uri = `https://picsum.photos/id/${
+      startFrom + index
+    }/${width}/${height}`;
+    return <Image style={{width, height}} key={uri} source={{uri}} />;
+  });
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontWeight: 'bold',
+    fontSize: 32,
+    marginBottom: 8,
+    marginLeft: 8,
+  },
+  subTitle: {
+    fontSize: 18,
+    marginVertical: 16,
+    textAlign: 'center',
+  },
+  caption: {
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  post: {
+    borderColor: '#ccc',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    paddingVertical: 10,
+    marginBottom: 16,
+    backgroundColor: 'white',
+  },
+});