fix: handle RTL properly

packages/stack/example/App.js

@@ -31,7 +31,9 @@ import {
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
 
-// Uncomment the following line to force RTL. Requires closing and re-opening
+useScreens();
+
+// Change `false` to `true` to force RTL. Requires closing and re-opening
 // your app after you first load it with this option enabled.
 I18nManager.forceRTL(false);
 
@@ -141,7 +143,6 @@ const Root = createStackNavigator(
   }
 );
 
-useScreens();
 export default createAppContainer(Root);
 
 // Uncomment this to test immediate transitions

packages/stack/example/src/HeaderBackgrounds.js

@@ -93,7 +93,11 @@ function createHeaderBackgroundExample(options = {}) {
     }
   );
 }
-export const HeaderBackgroundDefault = createHeaderBackgroundExample();
+export const HeaderBackgroundDefault = createHeaderBackgroundExample({
+  ...TransitionPresets.SlideFromRightIOS,
+  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+  headerMode: 'float',
+});
 
 export const HeaderBackgroundFade = createHeaderBackgroundExample({
   ...TransitionPresets.SlideFromRightIOS,

packages/stack/example/src/HeaderPreset.js

@@ -107,6 +107,10 @@ const StackWithHeaderPreset = createStackNavigator(
   {
     ...TransitionPresets.SlideFromRightIOS,
     headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+    headerMode: 'float',
+    defaultNavigationOptions: {
+      gesturesEnabled: true,
+    },
   }
 );