refactor: align native stack to JS stack

2026-01-12 22:51:18 +08:00 · 2021-05-19 12:15:47 +02:00
parent a55d6a8d79
commit a4bf622b1a
13 changed files with 940 additions and 324 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,6 +9,7 @@
      "@react-navigation/native",
      "@react-navigation/routers",
      "@react-navigation/stack",
+      "@react-navigation/native-stack",
      "@react-navigation/drawer",
      "@react-navigation/bottom-tabs",
      "@react-navigation/material-top-tabs",
--- a/example/src/Screens/NativeStack.tsx
+++ b/example/src/Screens/NativeStack.tsx
@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { View, Platform, StyleSheet, ScrollView } from 'react-native';
+import { Button } from 'react-native-paper';
+import type { ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';
+
+export type NativeStackParams = {
+  Article: { author: string } | undefined;
+  NewsFeed: { date: number };
+  Albums: undefined;
+};
+
+const scrollEnabled = Platform.select({ web: true, default: false });
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: NativeStackScreenProps<NativeStackParams, 'Article'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('NewsFeed', { date: Date.now() })}
+          style={styles.button}
+        >
+          Push feed
+        </Button>
+        <Button
+          mode="contained"
+          onPress={() => navigation.replace('NewsFeed', { date: Date.now() })}
+          style={styles.button}
+        >
+          Replace with feed
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Article
+        author={{ name: route.params?.author ?? 'Unknown' }}
+        scrollEnabled={scrollEnabled}
+      />
+    </ScrollView>
+  );
+};
+
+const NewsFeedScreen = ({
+  route,
+  navigation,
+}: NativeStackScreenProps<NativeStackParams, 'NewsFeed'>) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Albums')}
+          style={styles.button}
+        >
+          Push Albums
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={scrollEnabled} date={route.params.date} />
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({
+  navigation,
+}: NativeStackScreenProps<NativeStackParams, 'Albums'>) => {
+  return (
+    <ScrollView contentContainerStyle={{ paddingTop: 44 + 12 }}>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() =>
+            navigation.navigate('Article', { author: 'Babel fish' })
+          }
+          style={styles.button}
+        >
+          Navigate to article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop(2)}
+          style={styles.button}
+        >
+          Pop by 2
+        </Button>
+      </View>
+      <Albums scrollEnabled={scrollEnabled} />
+    </ScrollView>
+  );
+};
+
+const NativeStack = createNativeStackNavigator<NativeStackParams>();
+
+export default function NativeStackScreen({
+  navigation,
+}: NativeStackScreenProps<ParamListBase>) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
+  return (
+    <NativeStack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
+      <NativeStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params?.author ?? 'Unknown'}`,
+          headerLargeTitle: true,
+          headerLargeTitleShadowVisible: false,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <NativeStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
+      <NativeStack.Screen
+        name="Albums"
+        component={AlbumsScreen}
+        options={{
+          title: 'Albums',
+          presentation: 'modal',
+          headerShadowVisible: true,
+          headerTranslucent: true,
+          headerBlurEffect: 'light',
+        }}
+      />
+    </NativeStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});
--- a/example/src/Shared/Article.tsx
+++ b/example/src/Shared/Article.tsx
@@ -6,6 +6,7 @@ import {
  ScrollView,
  StyleSheet,
  ScrollViewProps,
+  TextProps,
 } from 'react-native';
 import { useScrollToTop, useTheme } from '@react-navigation/native';

@@ -16,6 +17,28 @@ type Props = Partial<ScrollViewProps> & {
  };
 };

+const Heading = ({
+  style,
+  ...rest
+}: TextProps & { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.heading, { color: colors.text }, style]} {...rest} />
+  );
+};
+
+const Paragraph = ({
+  style,
+  ...rest
+}: TextProps & { children: React.ReactNode }) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text style={[styles.paragraph, { color: colors.text }, style]} {...rest} />
+  );
+};
+
 export default function Article({
  date = '1st Jan 2025',
  author = {
@@ -48,27 +71,68 @@ export default function Article({
          <Text style={[styles.timestamp, { color: colors.text }]}>{date}</Text>
        </View>
      </View>
-      <Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
-      <Text style={[styles.paragraph, { color: colors.text }]}>
+      <Heading>What is Lorem Ipsum?</Heading>
+      <Paragraph>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </Paragraph>
+      <Image style={styles.image} source={require('../../assets/book.jpg')} />
+      <Heading>Where does it come from?</Heading>
+      <Paragraph>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
-        over 2000 years old.
-      </Text>
-      <Image style={styles.image} source={require('../../assets/book.jpg')} />
-      <Text style={[styles.paragraph, { color: colors.text }]}>
-        Richard McClintock, a Latin professor at Hampden-Sydney College in
-        Virginia, looked up one of the more obscure Latin words, consectetur,
-        from a Lorem Ipsum passage, and going through the cites of the word in
-        classical literature, discovered the undoubtable source.
-      </Text>
-      <Text style={[styles.paragraph, { color: colors.text }]}>
-        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
-        Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
-        written in 45 BC. This book is a treatise on the theory of ethics, very
-        popular during the Renaissance. The first line of Lorem Ipsum,
-        &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
-        1.10.32.
-      </Text>
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Paragraph>
+      <Paragraph>
+        The standard chunk of Lorem Ipsum used since the 1500s is reproduced
+        below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
+        Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </Paragraph>
+      <Heading>Why do we use it?</Heading>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using &quot;Content here, content here&quot;,
+        making it look like readable English. Many desktop publishing packages
+        and web page editors now use Lorem Ipsum as their default model text,
+        and a search for &quot;lorem ipsum&quot; will uncover many web sites
+        still in their infancy. Various versions have evolved over the years,
+        sometimes by accident, sometimes on purpose (injected humour and the
+        like).
+      </Paragraph>
+      <Heading>Where can I get some?</Heading>
+      <Paragraph>
+        There are many variations of passages of Lorem Ipsum available, but the
+        majority have suffered alteration in some form, by injected humour, or
+        randomised words which don&apos;t look even slightly believable. If you
+        are going to use a passage of Lorem Ipsum, you need to be sure there
+        isn&apos;t anything embarrassing hidden in the middle of text. All the
+        Lorem Ipsum generators on the Internet tend to repeat predefined chunks
+        as necessary, making this the first true generator on the Internet. It
+        uses a dictionary of over 200 Latin words, combined with a handful of
+        model sentence structures, to generate Lorem Ipsum which looks
+        reasonable. The generated Lorem Ipsum is therefore always free from
+        repetition, injected humour, or non-characteristic words etc.
+      </Paragraph>
    </ScrollView>
  );
 }
@@ -101,9 +165,9 @@ const styles = StyleSheet.create({
    width: 48,
    borderRadius: 24,
  },
-  title: {
+  heading: {
    fontWeight: 'bold',
-    fontSize: 36,
+    fontSize: 24,
    marginVertical: 8,
    marginHorizontal: 16,
  },
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -44,6 +44,7 @@ import {

 import { restartApp } from './Restart';
 import SettingsItem from './Shared/SettingsItem';
+import NativeStack from './Screens/NativeStack';
 import SimpleStack from './Screens/SimpleStack';
 import ModalStack from './Screens/ModalStack';
 import MixedStack from './Screens/MixedStack';
@@ -78,6 +79,7 @@ type RootDrawerParamList = {
 };

 const SCREENS = {
+  NativeStack: { title: 'Native Stack', component: NativeStack },
  SimpleStack: { title: 'Simple Stack', component: SimpleStack },
  ModalStack: {
    title: 'Modal Stack',
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -9,6 +9,7 @@
    { "path": "../packages/material-bottom-tabs" },
    { "path": "../packages/material-top-tabs" },
    { "path": "../packages/native" },
+    { "path": "../packages/native-stack" },
    { "path": "../packages/routers" },
    { "path": "../packages/stack" },
  ],
--- a/packages/native-stack/CHANGELOG.md
+++ b/packages/native-stack/CHANGELOG.md
@@ -0,0 +1,367 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [5.0.5](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.4...@react-navigation/native-stack@5.0.5) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.3...@react-navigation/native-stack@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.2...@react-navigation/native-stack@5.0.3) (2020-02-12)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.1...@react-navigation/native-stack@5.0.2) (2020-02-11)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.35...@react-navigation/native-stack@5.0.1) (2020-02-10)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.35](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.34...@react-navigation/native-stack@5.0.0-alpha.35) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.33...@react-navigation/native-stack@5.0.0-alpha.34) (2020-02-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.32...@react-navigation/native-stack@5.0.0-alpha.33) (2020-02-03)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.29...@react-navigation/native-stack@5.0.0-alpha.32) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* screens integration on Android ([#294](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/issues/294)) ([9bfb295](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/9bfb29562020c61b4d5c9bee278bcb1c7bdb8b67))
+* update screens for native stack ([5411816](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/54118161885738a6d20b062c7e6679f3bace8424))
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.29...@react-navigation/native-stack@5.0.0-alpha.30) (2020-02-02)
+
+
+### Bug Fixes
+
+* add licenses ([0c159db](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/0c159db4c9bc85e83b5cfe6819ab2562669a4d8f))
+* screens integration on Android ([#294](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/issues/294)) ([9bfb295](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/9bfb29562020c61b4d5c9bee278bcb1c7bdb8b67))
+* update screens for native stack ([5411816](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/54118161885738a6d20b062c7e6679f3bace8424))
+
+
+
+
+
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.28...@react-navigation/native-stack@5.0.0-alpha.29) (2020-01-24)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.27...@react-navigation/native-stack@5.0.0-alpha.28) (2020-01-23)
+
+
+### Bug Fixes
+
+* fix types for native stack ([1da4a64](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/1da4a6437f4607c1d4547d26dd5068615631982e))
+
+
+### Features
+
+* emit appear and dismiss events for native stack ([f1df4a0](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/f1df4a080877b3642e748a41a5ffc2da8c449a8c))
+* let the navigator specify if default can be prevented ([da67e13](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/da67e134d2157201360427d3c10da24f24cae7aa))
+
+
+
+
+
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.26...@react-navigation/native-stack@5.0.0-alpha.27) (2020-01-14)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.25...@react-navigation/native-stack@5.0.0-alpha.26) (2020-01-13)
+
+
+### Bug Fixes
+
+* make sure paths aren't aliased when building definitions ([65a5dac](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/commit/65a5dac2bf887f4ba081ab15bd4c9870bb15697f)), closes [#265](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/issues/265)
+
+
+
+
+
+# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.24...@react-navigation/native-stack@5.0.0-alpha.25) (2020-01-13)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.22...@react-navigation/native-stack@5.0.0-alpha.24) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.0-alpha.22...@react-navigation/native-stack@5.0.0-alpha.23) (2020-01-09)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.21...@react-navigation/native-stack@5.0.0-alpha.22) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.20...@react-navigation/native-stack@5.0.0-alpha.21) (2020-01-03)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.19...@react-navigation/native-stack@5.0.0-alpha.20) (2020-01-01)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.18...@react-navigation/native-stack@5.0.0-alpha.19) (2019-12-19)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.17...@react-navigation/native-stack@5.0.0-alpha.18) (2019-12-16)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.16...@react-navigation/native-stack@5.0.0-alpha.17) (2019-12-14)
+
+
+### Features
+
+* add custom theme support ([#211](https://github.com/react-navigation/navigation-ex/issues/211)) ([00fc616](https://github.com/react-navigation/navigation-ex/commit/00fc616de0572bade8aa85052cdc8290360b1d7f))
+
+
+
+
+
+# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.15...@react-navigation/native-stack@5.0.0-alpha.16) (2019-12-11)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
+
+
+### Features
+
+* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
+
+
+
+
+
+# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.13...@react-navigation/native-stack@5.0.0-alpha.14) (2019-11-20)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.13](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.12...@react-navigation/native-stack@5.0.0-alpha.13) (2019-11-17)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.11...@react-navigation/native-stack@5.0.0-alpha.12) (2019-11-10)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.10...@react-navigation/native-stack@5.0.0-alpha.11) (2019-11-08)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
+
+
+### Bug Fixes
+
+* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
+
+
+
+
+
+# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.8](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.7...@react-navigation/native-stack@5.0.0-alpha.8) (2019-11-02)
+
+
+### Features
+
+* add headerBackTitleVisible to navigation options in native stack ([77f29d3](https://github.com/react-navigation/navigation-ex/commit/77f29d3))
+
+
+
+
+
+# [5.0.0-alpha.7](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.6...@react-navigation/native-stack@5.0.0-alpha.7) (2019-11-02)
+
+
+### Bug Fixes
+
+* remove top margin from screen in native stack on Android ([5cd6940](https://github.com/react-navigation/navigation-ex/commit/5cd6940))
+
+
+
+
+
+# [5.0.0-alpha.6](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.5...@react-navigation/native-stack@5.0.0-alpha.6) (2019-10-30)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.5](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.4...@react-navigation/native-stack@5.0.0-alpha.5) (2019-10-29)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.4](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.3...@react-navigation/native-stack@5.0.0-alpha.4) (2019-10-22)
+
+
+### Features
+
+* **native-stack:** add support for large title attributes ([#135](https://github.com/react-navigation/navigation-ex/issues/135)) ([6cf1a04](https://github.com/react-navigation/navigation-ex/commit/6cf1a04))
+
+
+
+
+
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.2...@react-navigation/native-stack@5.0.0-alpha.3) (2019-10-18)
+
+
+### Bug Fixes
+
+* remove top margin when header is hidden in native stack. fixes [#131](https://github.com/react-navigation/navigation-ex/issues/131) ([fb726ee](https://github.com/react-navigation/navigation-ex/commit/fb726ee))
+
+
+
+
+
+# [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.1...@react-navigation/native-stack@5.0.0-alpha.2) (2019-10-18)
+
+
+### Bug Fixes
+
+* fix header font size config in native stack ([#128](https://github.com/react-navigation/navigation-ex/issues/128)) ([477c088](https://github.com/react-navigation/navigation-ex/commit/477c088))
+
+
+
+
+
+# 5.0.0-alpha.1 (2019-10-15)
+
+
+### Bug Fixes
+
+* increase hitSlop of back button on Android ([c7da1e4](https://github.com/react-navigation/navigation-ex/commit/c7da1e4))
+* update supported options for native stack ([b71f4e5](https://github.com/react-navigation/navigation-ex/commit/b71f4e5))
+
+
+### Features
+
+* initial version of native stack ([#102](https://github.com/react-navigation/navigation-ex/issues/102)) ([ba3f718](https://github.com/react-navigation/navigation-ex/commit/ba3f718))
--- a/packages/native-stack/README.md
+++ b/packages/native-stack/README.md
@@ -1,5 +1,5 @@
-# `@react-navigation/material-bottom-tabs`
+# `@react-navigation/native-stack`

-React Navigation integration for [native-stack](https://github.com/software-mansion/react-native-screens/tree/master/native-stack) component from [`react-native-screens`](https://github.com/software-mansion/react-native-screens).
+Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.

-Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/native-stack-navigator/).
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/native-stack-navigator.html).
--- a/packages/native-stack/package.json
+++ b/packages/native-stack/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/native-stack",
-  "description": "Integration for native stack component from react-native-screens",
-  "version": "6.0.0",
+  "description": "Native stack navigator using react-native-screens",
+  "version": "6.0.0-next.0",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -40,6 +40,9 @@
    "prepare": "bob build",
    "clean": "del lib"
  },
+  "dependencies": {
+    "warn-once": "^0.1.0"
+  },
  "devDependencies": {
    "@react-navigation/native": "^6.0.0-next.8",
    "@testing-library/react-native": "^7.2.0",
--- a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
+++ b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
@@ -11,33 +11,13 @@ import {
  useNavigationBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
+import NativeStackView from '../views/NativeStackView';

-import {
-  NativeStackView,
+import type {
  NativeStackNavigationOptions,
-} from 'react-native-screens/native-stack';
-
-// We want it to be an empty object beacuse navigator does not have any additional config
-export type NativeStackNavigationConfig = {};
-
-export type NativeStackNavigationEventMap = {
-  /**
-   * Event which fires when the screen appears.
-   */
-  appear: { data: undefined };
-  /**
-   * Event which fires when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down).
-   */
-  dismiss: { data: undefined };
-  /**
-   * Event which fires when a transition animation starts.
-   */
-  transitionStart: { data: { closing: boolean } };
-  /**
-   * Event which fires when a transition animation ends.
-   */
-  transitionEnd: { data: { closing: boolean } };
-};
+  NativeStackNavigationEventMap,
+  NativeStackNavigationConfig,
+} from '../types';

 export type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> &
  StackRouterOptions &
--- a/packages/native-stack/src/types.tsx
+++ b/packages/native-stack/src/types.tsx
@@ -17,14 +17,6 @@ import type {
 } from 'react-native-screens';

 export type NativeStackNavigationEventMap = {
-  /**
-   * Event which fires when the screen appears.
-   */
-  appear: { data: undefined };
-  /**
-   * Event which fires when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down).
-   */
-  dismiss: { data: undefined };
  /**
   * Event which fires when a transition animation starts.
   */
@@ -60,41 +52,36 @@ export type NativeStackNavigationHelpers = NavigationHelpers<
  NativeStackNavigationEventMap
 >;

-// We want it to be an empty object beacuse navigator does not have any additional config
+// We want it to be an empty object because navigator does not have any additional props
 export type NativeStackNavigationConfig = {};

 export type NativeStackNavigationOptions = {
  /**
-   * Image to display in the header as the back button.
-   * Defaults to back icon image for the platform (a chevron on iOS and an arrow on Android).
+   * String that can be displayed in the header as a fallback for `headerTitle`.
   */
-  backButtonImage?: ImageSourcePropType;
+  title?: string;
  /**
-   * Whether to show the back button with custom left side of the header.
+   * Whether the back button is visible in the header.
   */
-  backButtonInCustomView?: boolean;
+  headerBackVisible?: boolean;
  /**
-   * Style object for the scene content.
-   */
-  contentStyle?: StyleProp<ViewStyle>;
-  /**
-   * Whether the stack should be in rtl or ltr form.
-   */
-  direction?: 'rtl' | 'ltr';
-  /**
-   * Whether you can use gestures to dismiss this screen. Defaults to `true`.
-   * Only supported on iOS.
+   * Title string used by the back button on iOS.
+   * Defaults to the previous scene's title, or "Back" if there's not enough space.
+   * Use `headerBackTitleVisible: false` to hide it.
   *
-   * @platform ios
-   */
-  gestureEnabled?: boolean;
-  /**
-   * Title to display in the back button.
   * Only supported on iOS.
   *
   * @platform ios
   */
  headerBackTitle?: string;
+  /**
+   * Whether the back button title should be visible or not.
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBackTitleVisible?: boolean;
  /**
   * Style object for header back title. Supported properties:
   * - fontFamily
@@ -109,64 +96,62 @@ export type NativeStackNavigationOptions = {
    fontSize?: number;
  };
  /**
-   * Whether the back button title should be visible or not. Defaults to `true`.
+   * Image to display in the header as the icon in the back button.
+   * Defaults to back icon image for the platform
+   * - A chevron on iOS
+   * - An arrow on Android
+   */
+  headerBackImageSource?: ImageSourcePropType;
+  /**
+   * Style of the header when a large title is shown.
+   * The large title is shown if `headerLargeTitle` is `true` and
+   * the edge of any scrollable content reaches the matching edge of the header.
+   *
+   * Supported properties:
+   * - backgroundColor
+   *
   * Only supported on iOS.
   *
   * @platform ios
   */
-  headerBackTitleVisible?: boolean;
-  /**
-   * Function which returns a React Element to display in the center of the header.
-   */
-  headerCenter?: (props: { tintColor?: string }) => React.ReactNode;
-  /**
-   * Boolean indicating whether to hide the back button in header.
-   */
-  headerHideBackButton?: boolean;
-  /**
-   * Boolean indicating whether to hide the elevation shadow or the bottom border on the header.
-   */
-  headerHideShadow?: boolean;
-  /**
-   * Controls the style of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar. Supported properties:
-   * - backgroundColor
-   *
-   * @platform ios
-   */
-  headerLargeStyle?: {
+  headerLargeStyle?: StyleProp<{
    backgroundColor?: string;
-  };
+  }>;
  /**
-   * Boolean to set native property to prefer large title header (like in iOS setting).
+   * Whether to enable header with large title which collapses to regular header on scroll.
+   *
   * For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`.
   * If the scrollable area doesn't fill the screen, the large title won't collapse on scroll.
+   *
   * Only supported on iOS.
   *
   * @platform ios
   */
  headerLargeTitle?: boolean;
  /**
-   * Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
+   * Whether drop shadow of header is visible when a large title is shown.
   */
-  headerLargeTitleHideShadow?: boolean;
+  headerLargeTitleShadowVisible?: boolean;
  /**
-   * Style object for header large title. Supported properties:
+   * Style object for large title in header. Supported properties:
   * - fontFamily
   * - fontSize
+   * - fontWeight
   * - color
   *
   * Only supported on iOS.
   *
   * @platform ios
   */
-  headerLargeTitleStyle?: {
+  headerLargeTitleStyle?: StyleProp<{
    fontFamily?: string;
    fontSize?: number;
    fontWeight?: string;
    color?: string;
-  };
+  }>;
  /**
   * Function which returns a React Element to display on the left side of the header.
+   * This is shown alongside the back button. See `headerBackVisible` to hide the back button.
   */
  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
  /**
@@ -174,18 +159,40 @@ export type NativeStackNavigationOptions = {
   */
  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
  /**
-   * Whether to show the header.
+   * Function which returns a React Element to display in the center of the header.
+   * This replaces the header title on iOS.
+   */
+  headerCenter?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Whether to show the header. The header is shown by default.
+   * Setting this to `false` hides the header.
   */
  headerShown?: boolean;
  /**
-   * Style object for header title. Supported properties:
+   * Style object for header. Supported properties:
   * - backgroundColor
-   * - blurEffect
   */
-  headerStyle?: {
+  headerStyle?: StyleProp<{
    backgroundColor?: string;
-    blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
-  };
+  }>;
+  /**
+   * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
+   */
+  headerShadowVisible?: boolean;
+  /**
+   * Boolean indicating whether the navigation bar is translucent.
+   * Setting this to `true` makes the header absolutely positioned,
+   * and changes the background color to `transparent` unless specified in `headerStyle`.
+   */
+  headerTranslucent?: boolean;
+  /**
+   * Blur effect for the translucent header.
+   *
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  headerBlurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
  /**
   * Tint color for the header. Changes the color of back button and title.
   */
@@ -201,15 +208,16 @@ export type NativeStackNavigationOptions = {
   * - fontWeight
   * - color
   */
-  headerTitleStyle?: {
+  headerTitleStyle?: StyleProp<{
    fontFamily?: string;
    fontSize?: number;
    fontWeight?: string;
    color?: string;
-  };
+  }>;
  /**
-   * A flag to that lets you opt out of insetting the header. You may want to
-   * set this to `false` if you use an opaque status bar. Defaults to `true`.
+   * Whether there should be additional top inset to account for translucent status bar.
+   * If you don't have a translucent status bar, you can disable this by passing `false`
+   *
   * Only supported on Android. Insets are always applied on iOS because the
   * header cannot be opaque.
   *
@@ -217,79 +225,96 @@ export type NativeStackNavigationOptions = {
   */
  headerTopInsetEnabled?: boolean;
  /**
-   * Boolean indicating whether the navigation bar is translucent.
-   */
-  headerTranslucent?: boolean;
-  /**
-   * How should the screen replacing another screen animate. Defaults to `pop`.
-   * The following values are currently supported:
-   * - "push" – the new screen will perform push animation.
-   * - "pop" – the new screen will perform pop animation.
-   */
-  replaceAnimation?: ScreenProps['replaceAnimation'];
-  /**
-   * In which orientation should the screen appear.
-   * The following values are currently supported:
-   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
-   * - "all" – all orientations are permitted
-   * - "portrait" – portrait orientations are permitted
-   * - "portrait_up" – right-side portrait orientation is permitted
-   * - "portrait_down" – upside-down portrait orientation is permitted
-   * - "landscape" – landscape orientations are permitted
-   * - "landscape_left" – landscape-left orientation is permitted
-   * - "landscape_right" – landscape-right orientation is permitted
-   */
-  screenOrientation?: ScreenStackHeaderConfigProps['screenOrientation'];
-  /**
-   * Object in which you should pass props in order to render native iOS searchBar.
+   * Options to render a native search bar on iOS.
   *
   * @platform ios
   */
-  searchBar?: SearchBarProps;
+  headerSearchBar?: SearchBarProps;
  /**
-   * How the screen should appear/disappear when pushed or popped at the top of the stack.
-   * The following values are currently supported:
-   * - "default" – uses a platform default animation
-   * - "fade" – fades screen in or out
-   * - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
-   * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
-   * - "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
-   * - "none" – the screen appears/dissapears without an animation
-   */
-  stackAnimation?: ScreenProps['stackAnimation'];
-  /**
-   * How should the screen be presented.
-   * The following values are currently supported:
-   * - "push" – the new screen will be pushed onto a stack which on iOS means that the default animation will be slide from the side, the animation on Android may vary depending on the OS version and theme.
-   * - "modal" – the new screen will be presented modally. In addition this allow for a nested stack to be rendered inside such screens.
-   * - "transparentModal" – the new screen will be presented modally but in addition the second to last screen will remain attached to the stack container such that if the top screen is non opaque the content below can still be seen. If "modal" is used instead the below screen will get unmounted as soon as the transition ends.
-   * - "containedModal" – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
-   * - "containedTransparentModal" – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
-   * - "fullScreenModal" – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
-   * - "formSheet" – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
-   */
-  stackPresentation?: ScreenProps['stackPresentation'];
-  /**
-   * Sets the status bar animation (similar to the `StatusBar` component). Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file.
+   * Sets the status bar animation (similar to the `StatusBar` component).
+   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   *
+   * Only supported on iOS.
   *
   * @platform ios
   */
  statusBarAnimation?: ScreenStackHeaderConfigProps['statusBarAnimation'];
  /**
-   * Whether the status bar should be hidden on this screen. Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file.
+   * Whether the status bar should be hidden on this screen.
+   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   *
+   * Only supported on iOS.
   *
   * @platform ios
   */
  statusBarHidden?: boolean;
-  /** Sets the status bar color (similar to the `StatusBar` component). Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file.
+  /**
+   * Sets the status bar color (similar to the `StatusBar` component).
+   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+   *
+   * Only supported on iOS.
   *
   * @platform ios
   */
  statusBarStyle?: ScreenStackHeaderConfigProps['statusBarStyle'];
  /**
-   * String that can be displayed in the header as a fallback for `headerTitle`.
+   * Style object for the scene content.
   */
-  title?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Whether you can use gestures to dismiss this screen. Defaults to `true`.
+   * Only supported on iOS.
+   *
+   * @platform ios
+   */
+  gestureEnabled?: boolean;
+  /**
+   * The type of animation to use when this screen replaces another screen. Defaults to `pop`.
+   *
+   * Supported values:
+   * - "push": the new screen will perform push animation.
+   * - "pop": the new screen will perform pop animation.
+   */
+  animationTypeForReplace?: ScreenProps['replaceAnimation'];
+  /**
+   * How the screen should animate when pushed or popped.
+   *
+   * Supported values:
+   * - "default": use the platform default animation
+   * - "fade": fade screen in or out
+   * - "flip": flip the screen, requires stackPresentation: "modal" (iOS only)
+   * - "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
+   * - "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
+   * - "none": don't animate the screen
+   */
+  animation?: ScreenProps['stackAnimation'];
+  /**
+   * How should the screen be presented.
+   *
+   * Supported values:
+   * - "card": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme.
+   * - "modal": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen.
+   * - "transparentModal": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background.
+   * - "containedModal": will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
+   * - "containedTransparentModal": will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
+   * - "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
+   * - "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.
+   */
+  presentation?: Exclude<ScreenProps['stackPresentation'], 'push'> | 'card';
+  /**
+   * The display orientation to use for the screen.
+   *
+   * Supported values:
+   * - "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.
+   * - "all": all orientations are permitted.
+   * - "portrait": portrait orientations are permitted.
+   * - "portrait_up": right-side portrait orientation is permitted.
+   * - "portrait_down": upside-down portrait orientation is permitted.
+   * - "landscape": landscape orientations are permitted.
+   * - "landscape_left": landscape-left orientation is permitted.
+   * - "landscape_right": landscape-right orientation is permitted.
+   */
+  orientation?: ScreenStackHeaderConfigProps['screenOrientation'];
 };

 export type NativeStackNavigatorProps = DefaultNavigatorOptions<NativeStackNavigationOptions> &
--- a/packages/native-stack/src/views/HeaderConfig.tsx
+++ b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -1,6 +1,5 @@
-import { Route, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { StyleSheet, I18nManager, Platform } from 'react-native';
 import {
  ScreenStackHeaderBackButtonImage,
  ScreenStackHeaderCenterView,
@@ -10,6 +9,7 @@ import {
  ScreenStackHeaderSearchBarView,
  SearchBar,
 } from 'react-native-screens';
+import { Route, useTheme } from '@react-navigation/native';
 import type { NativeStackNavigationOptions } from '../types';
 import { processFonts } from './FontProcessor';

@@ -18,31 +18,30 @@ type Props = NativeStackNavigationOptions & {
 };

 export default function HeaderConfig({
-  backButtonImage,
-  backButtonInCustomView,
-  direction,
+  headerBackImageSource,
  headerBackTitle,
-  headerBackTitleStyle = {},
+  headerBackTitleStyle,
  headerBackTitleVisible = true,
  headerCenter,
-  headerHideBackButton,
-  headerHideShadow,
-  headerLargeStyle = {},
+  headerBackVisible,
+  headerShadowVisible,
+  headerLargeStyle,
  headerLargeTitle,
-  headerLargeTitleHideShadow,
-  headerLargeTitleStyle = {},
+  headerLargeTitleShadowVisible,
+  headerLargeTitleStyle,
  headerLeft,
  headerRight,
  headerShown,
-  headerStyle = {},
+  headerStyle,
+  headerBlurEffect,
  headerTintColor,
  headerTitle,
-  headerTitleStyle = {},
+  headerTitleStyle,
  headerTopInsetEnabled = true,
  headerTranslucent,
  route,
-  screenOrientation,
-  searchBar,
+  orientation,
+  headerSearchBar,
  statusBarAnimation,
  statusBarHidden,
  statusBarStyle,
@@ -51,39 +50,58 @@ export default function HeaderConfig({
  const { colors } = useTheme();
  const tintColor = headerTintColor ?? colors.primary;

+  const headerBackTitleStyleFlattened =
+    StyleSheet.flatten(headerBackTitleStyle) || {};
+  const headerLargeTitleStyleFlattened =
+    StyleSheet.flatten(headerLargeTitleStyle) || {};
+  const headerTitleStyleFlattened = StyleSheet.flatten(headerTitleStyle) || {};
+  const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
+  const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
+
  const [
    backTitleFontFamily,
    largeTitleFontFamily,
    titleFontFamily,
  ] = processFonts([
-    headerBackTitleStyle.fontFamily,
-    headerLargeTitleStyle.fontFamily,
-    headerTitleStyle.fontFamily,
+    headerBackTitleStyleFlattened.fontFamily,
+    headerLargeTitleStyleFlattened.fontFamily,
+    headerTitleStyleFlattened.fontFamily,
  ]);

+  const headerLeftElement = headerLeft?.({ tintColor });
+  const headerRightElement = headerRight?.({ tintColor });
+  const headerCenterElement = headerCenter?.({ tintColor });
+
+  if (Platform.OS === 'ios' && headerSearchBar != null && SearchBar == null) {
+    throw new Error(
+      `The current version of 'react-native-screens' doesn't support SearchBar in the header. Please update to the latest version to use this option.`
+    );
+  }
+
  return (
    <ScreenStackHeaderConfig
-      backButtonInCustomView={backButtonInCustomView}
+      backButtonInCustomView={headerLeftElement != null && !headerBackVisible}
      backgroundColor={
-        headerStyle.backgroundColor ? headerStyle.backgroundColor : colors.card
+        headerStyleFlattened.backgroundColor ??
+        (headerTranslucent ? 'transparent' : colors.card)
      }
      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
      backTitleFontFamily={backTitleFontFamily}
-      backTitleFontSize={headerBackTitleStyle.fontSize}
-      blurEffect={headerStyle.blurEffect}
+      backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
+      blurEffect={headerBlurEffect}
      color={tintColor}
-      direction={direction}
+      direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
      hidden={headerShown === false}
-      hideBackButton={headerHideBackButton}
-      hideShadow={headerHideShadow}
+      hideBackButton={headerBackVisible === false}
+      hideShadow={headerShadowVisible === false}
      largeTitle={headerLargeTitle}
-      largeTitleBackgroundColor={headerLargeStyle.backgroundColor}
-      largeTitleColor={headerLargeTitleStyle.color}
+      largeTitleBackgroundColor={headerLargeStyleFlattened.backgroundColor}
+      largeTitleColor={headerLargeTitleStyleFlattened.color}
      largeTitleFontFamily={largeTitleFontFamily}
-      largeTitleFontSize={headerLargeTitleStyle.fontSize}
-      largeTitleFontWeight={headerLargeTitleStyle.fontWeight}
-      largeTitleHideShadow={headerLargeTitleHideShadow}
-      screenOrientation={screenOrientation}
+      largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
+      largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
+      largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      screenOrientation={orientation}
      statusBarAnimation={statusBarAnimation}
      statusBarHidden={statusBarHidden}
      statusBarStyle={statusBarStyle}
@@ -95,42 +113,41 @@ export default function HeaderConfig({
          : route.name
      }
      titleColor={
-        headerTitleStyle.color !== undefined
-          ? headerTitleStyle.color
-          : headerTintColor !== undefined
-          ? headerTintColor
-          : colors.text
+        headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text
      }
      titleFontFamily={titleFontFamily}
-      titleFontSize={headerTitleStyle.fontSize}
-      titleFontWeight={headerTitleStyle.fontWeight}
+      titleFontSize={headerTitleStyleFlattened.fontSize}
+      titleFontWeight={headerTitleStyleFlattened.fontWeight}
      topInsetEnabled={headerTopInsetEnabled}
-      translucent={headerTranslucent === true}
+      translucent={
+        // This defaults to `true`, so we can't pass `undefined`
+        headerTranslucent === true
+      }
    >
-      {headerRight !== undefined ? (
+      {headerRightElement != null ? (
        <ScreenStackHeaderRightView>
-          {headerRight({ tintColor })}
+          {headerRightElement}
        </ScreenStackHeaderRightView>
      ) : null}
-      {backButtonImage !== undefined ? (
+      {headerBackImageSource !== undefined ? (
        <ScreenStackHeaderBackButtonImage
          key="backImage"
-          source={backButtonImage}
+          source={headerBackImageSource}
        />
      ) : null}
-      {headerLeft !== undefined ? (
+      {headerLeftElement != null ? (
        <ScreenStackHeaderLeftView>
-          {headerLeft({ tintColor })}
+          {headerLeftElement}
        </ScreenStackHeaderLeftView>
      ) : null}
-      {headerCenter !== undefined ? (
+      {headerCenterElement != null ? (
        <ScreenStackHeaderCenterView>
-          {headerCenter({ tintColor })}
+          {headerCenterElement}
        </ScreenStackHeaderCenterView>
      ) : null}
-      {Platform.OS === 'ios' && searchBar !== undefined ? (
+      {Platform.OS === 'ios' && headerSearchBar != null ? (
        <ScreenStackHeaderSearchBarView>
-          <SearchBar {...searchBar} />
+          <SearchBar {...headerSearchBar} />
        </ScreenStackHeaderSearchBarView>
      ) : null}
    </ScreenStackHeaderConfig>
--- a/packages/native-stack/src/views/NativeStackView.tsx
+++ b/packages/native-stack/src/views/NativeStackView.tsx
@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import { Platform, StyleSheet, View, ViewProps } from 'react-native';
 // @ts-ignore Getting private component
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import {
@@ -17,77 +10,102 @@ import {
  Route,
 } from '@react-navigation/native';
 import {
-  Screen as ScreenComponent,
-  ScreenProps,
+  Screen,
  ScreenStack,
  StackPresentationTypes,
 } from 'react-native-screens';
-
+import warnOnce from 'warn-once';
+import HeaderConfig from './HeaderConfig';
 import type {
  NativeStackDescriptorMap,
  NativeStackNavigationHelpers,
  NativeStackNavigationOptions,
 } from '../types';
-import HeaderConfig from './HeaderConfig';

-const Screen = (ScreenComponent as unknown) as React.ComponentType<ScreenProps>;
 const isAndroid = Platform.OS === 'android';

-let didWarn = isAndroid;
+type ContainerProps = ViewProps & { stackPresentation: StackPresentationTypes };

-let Container = View;
+let Container = (View as unknown) as React.ComponentType<ContainerProps>;

-if (__DEV__) {
-  const DebugContainer = (
-    props: ViewProps & { stackPresentation: StackPresentationTypes }
-  ) => {
+if (process.env.NODE_ENV !== 'production') {
+  const DebugContainer = (props: ContainerProps) => {
    const { stackPresentation, ...rest } = props;
+
    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+      // This is necessary for LogBox
      return (
        <AppContainer>
          <View {...rest} />
        </AppContainer>
      );
    }
+
    return <View {...rest} />;
  };
-  // @ts-ignore Wrong props
+
  Container = DebugContainer;
 }

-const maybeRenderNestedStack = (
-  options: NativeStackNavigationOptions,
-  route: Route<string>,
-  renderScene: () => JSX.Element,
-  stackPresentation: StackPresentationTypes,
-  isHeaderInModal: boolean,
-  viewStyles: StyleProp<ViewStyle>
-): JSX.Element => {
+const MaybeNestedStack = ({
+  options,
+  route,
+  presentation,
+  children,
+}: {
+  options: NativeStackNavigationOptions;
+  route: Route<string>;
+  presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
+  children: React.ReactNode;
+}) => {
+  const { colors } = useTheme();
+  const { headerShown = true, contentStyle } = options;
+
+  const isHeaderInModal = isAndroid
+    ? false
+    : presentation !== 'card' && headerShown === true;
+
+  const headerShownPreviousRef = React.useRef(headerShown);
+
+  React.useEffect(() => {
+    warnOnce(
+      !isAndroid &&
+        presentation !== 'card' &&
+        headerShownPreviousRef.current !== headerShown,
+      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`
+    );
+
+    headerShownPreviousRef.current = headerShown;
+  }, [headerShown, presentation, route.name]);
+
+  const content = (
+    <Container
+      style={[
+        styles.container,
+        presentation !== 'transparentModal' &&
+          presentation !== 'containedTransparentModal' && {
+            backgroundColor: colors.background,
+          },
+        contentStyle,
+      ]}
+      stackPresentation={presentation === 'card' ? 'push' : presentation}
+    >
+      {children}
+    </Container>
+  );
+
  if (isHeaderInModal) {
    return (
      <ScreenStack style={styles.container}>
        <Screen enabled style={StyleSheet.absoluteFill}>
          <HeaderConfig {...options} route={route} />
-          <Container
-            style={viewStyles}
-            // @ts-ignore Wrong props passed to View
-            stackPresentation={stackPresentation}
-          >
-            {renderScene()}
-          </Container>
+          {content}
        </Screen>
      </ScreenStack>
    );
  }
-  return (
-    <Container
-      style={viewStyles}
-      // @ts-ignore Wrong props passed to View
-      stackPresentation={stackPresentation}
-    >
-      {renderScene()}
-    </Container>
-  );
+
+  return content;
 };

 type Props = {
@@ -102,64 +120,45 @@ export default function NativeStackView({
  descriptors,
 }: Props): JSX.Element {
  const { key, routes } = state;
-  const { colors } = useTheme();

  return (
    <ScreenStack style={styles.container}>
      {routes.map((route, index) => {
        const { options, render: renderScene } = descriptors[route.key];
        const {
-          contentStyle,
          gestureEnabled,
          headerShown,
-          replaceAnimation = 'pop',
-          stackAnimation,
+          animationTypeForReplace = 'pop',
+          animation,
        } = options;

-        let { stackPresentation = 'push' } = options;
+        let { presentation = 'card' } = options;

        if (index === 0) {
-          // first screen should always be treated as `push`, it resolves problems with no header animation
-          // for navigator with first screen as `modal` and the next as `push`
-          stackPresentation = 'push';
+          // first screen should always be treated as `card`, it resolves problems with no header animation
+          // for navigator with first screen as `modal` and the next as `card`
+          presentation = 'card';
        }

-        const viewStyles = [
-          styles.container,
-          stackPresentation !== 'transparentModal' &&
-            stackPresentation !== 'containedTransparentModal' && {
-              backgroundColor: colors.background,
-            },
-          contentStyle,
-        ];
-
-        if (
-          !didWarn &&
-          stackPresentation !== 'push' &&
-          headerShown !== undefined
-        ) {
-          didWarn = true;
-          console.warn(
-            'Be aware that changing the visibility of header in modal on iOS will result in resetting the state of the screen.'
-          );
-        }
-
-        const isHeaderInModal = isAndroid
-          ? false
-          : stackPresentation !== 'push' && headerShown === true;
        const isHeaderInPush = isAndroid
          ? headerShown
-          : stackPresentation === 'push' && headerShown !== false;
+          : presentation === 'card' && headerShown !== false;

        return (
          <Screen
            key={route.key}
            enabled
            style={StyleSheet.absoluteFill}
-            gestureEnabled={isAndroid ? false : gestureEnabled}
-            replaceAnimation={replaceAnimation}
-            stackPresentation={stackPresentation}
-            stackAnimation={stackAnimation}
+            gestureEnabled={
+              isAndroid
+                ? // This prop enables handling of system back gestures on Android
+                  // Since we handle them in JS side, we disable this
+                  false
+                : gestureEnabled
+            }
+            replaceAnimation={animationTypeForReplace}
+            stackPresentation={presentation === 'card' ? 'push' : presentation}
+            stackAnimation={animation}
            onWillAppear={() => {
              navigation.emit({
                type: 'transitionStart',
@@ -175,10 +174,6 @@ export default function NativeStackView({
              });
            }}
            onAppear={() => {
-              navigation.emit({
-                type: 'appear',
-                target: route.key,
-              });
              navigation.emit({
                type: 'transitionEnd',
                data: { closing: false },
@@ -193,11 +188,6 @@ export default function NativeStackView({
              });
            }}
            onDismissed={() => {
-              navigation.emit({
-                type: 'dismiss',
-                target: route.key,
-              });
-
              navigation.dispatch({
                ...StackActions.pop(),
                source: route.key,
@@ -210,14 +200,13 @@ export default function NativeStackView({
              route={route}
              headerShown={isHeaderInPush}
            />
-            {maybeRenderNestedStack(
-              options,
-              route,
-              renderScene,
-              stackPresentation,
-              isHeaderInModal,
-              viewStyles
-            )}
+            <MaybeNestedStack
+              options={options}
+              route={route}
+              presentation={presentation}
+            >
+              {renderScene()}
+            </MaybeNestedStack>
          </Screen>
        );
      })}
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -128,19 +128,21 @@ export type StackHeaderOptions = HeaderOptions & {
   */
  headerBackTestID?: string;
  /**
-   * Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+   * Title string used by the back button on iOS.
+   * Defaults to the previous scene's title, or "Back" if there's not enough space.
   * Use `headerBackTitleVisible: false` to hide it.
   */
  headerBackTitle?: string;
+  /**
+   * Whether the back button title should be visible or not.
+   *
+   * Defaults to `true` on iOS, `false on Android.
+   */
+  headerBackTitleVisible?: boolean;
  /**
   * Style object for the back title.
   */
  headerBackTitleStyle?: StyleProp<TextStyle>;
-  /**
-   * A reasonable default is supplied for whether the back button title should be visible or not.
-   * But if you want to override that you can use `true` or `false` in this option.
-   */
-  headerBackTitleVisible?: boolean;
  /**
   * Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
   */