feat: rewrite v4 native-stack to TS

TestsExample/ios/Podfile.lock

@@ -308,7 +308,7 @@ PODS:
     - React
   - RNReanimated (1.13.1):
     - React
-  - RNScreens (2.17.1):
+  - RNScreens (2.18.0):
     - React-Core
   - RNSearchBar (3.5.1):
     - React
@@ -506,7 +506,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
   RNReanimated: dd8c286ab5dd4ba36d3a7fef8bff7e08711b5476
-  RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a
+  RNScreens: f0d7a2a440a8ba9f4574ca1ddb3368f473891be4
   RNSearchBar: 9860431356b7d12a8449d2fddb2b5f3c78d1e99f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a

TestsExample/src/Test765.js → TestsExample/src/Test765.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import {
+  Button,
   View,
 } from 'react-native';
 import {
   createAppContainer,
 } from 'react-navigation';
 
-import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';	
+import createNativeStackNavigator, {NativeStackNavigationOptions, NativeStackNavigationProp} from 'react-native-screens/createNativeStackNavigator';	
 
-const DEFAULT_STACK_OPTIONS
+const DEFAULT_STACK_OPTIONS : NativeStackNavigationOptions
  = {
 	headerBackTitleVisible: false,
 	headerTintColor: 'black',
@@ -85,8 +86,11 @@ function makeStacks() {
 
 export default createAppContainer(makeStacks());
 
-function Home() {
+function Home({navigation}: {navigation: NativeStackNavigationProp}) {
   return (
-    <View style={{ flex: 1, backgroundColor: 'red' }} />
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
+      <Button title="Go forward" onPress={() => navigation.navigate("Home5")} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
   );
 }

createNativeStackNavigator/README.md

@@ -36,8 +36,41 @@ const RootStack = createNativeStackNavigator(
 );
 ```
 
+### StackNavigatorConfig
+
+Visual options:
+
+- `mode` - it is an option from `stackNavigator` and controls the stack presentation along with `cardTransparent` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack`. Available options are: `'modal'`, `'containedModal'`.
+- `headerMode` - it is an option from `stackNavigator` and it hides the header when set to `none`. Use `headerShown` instead to be consistent with v5 `native-stack`. Available option is: `'none'`.
+- `transparentCard` - This is a boolean from `stackNavigator` that controls the stack presentation along with `mode` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack`.
+
 ### `navigationOptions` for screens inside of the navigator
 
+Options from `stack` navigator:
+
+- `header` - makes the header hide when set to `null`. Use `headerShown` instead to be consistent with v5 `native-stack`.
+- `cardTransparent` - boolean that controls the stack presentation along with `mode` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack`.
+- `animationEnabled`- boolean that sets stack animation to none when `false` passed. Use `stackAnimation: 'none'` instead to be consistent with v5 `native-stack`.
+- `cardStyle` - style prop for `Screen` component.
+
+Options for back button taken from `react-navigation-stack`:
+
+- `headerBackImage` - maps to [`headerBackImage`](https://reactnavigation.org/docs/4.x/stack-navigator#headerbackimage)
+- `headerPressColorAndroid` - maps to [`headerPressColorAndroid`](https://reactnavigation.org/docs/4.x/stack-navigator#headerpresscolorandroid)
+- `headerTintColor` - maps to [`headerTintColor`](https://reactnavigation.org/docs/4.x/stack-navigator#headertintcolor)
+- `backButtonTitle` - maps to [`headerBackTitle`](https://reactnavigation.org/docs/4.x/stack-navigator#headerbacktitle)
+- `truncatedBackButtonTitle` - maps to [`headerTruncatedBackTitle`](https://reactnavigation.org/docs/4.x/stack-navigator#headertruncatedbacktitle)
+- `backTitleVisible` - maps to [`headerBackTitleVisible`](https://reactnavigation.org/docs/4.x/stack-navigator#headerbacktitlevisible)
+- `headerBackTitleStyle` - maps to [`headerBackTitleStyle`](https://reactnavigation.org/docs/4.x/stack-navigator#headerbacktitlestyle)
+- `layoutPreset` - Layout of the title element in the header.
+
+Legacy options (these props differ from the ones used in v5 `native-stack`, and we would like to keep the API consistent between versions):
+
+- `hideShadow` - see `headerHideShadow`.
+- `largeTitle` - see `headerLargeTitle`.
+- `largeTitleHideShadow` - see `headerLargeTitleHideShadow`.
+- `translucent` - see `headerTranslucent`.
+
 #### `backButtonInCustomView`
 
 Boolean indicating whether to hide the back button while using `headerLeft` function.
@@ -71,12 +104,37 @@ Whether the back button title should be visible or not. Defaults to `true`. Only
 
 Boolean indicating whether to hide the back button in the header. Only supported on Android.
 
+#### `headerHideShadow`
+
+Boolean indicating whether to hide the elevation shadow on the header.
+
 #### `headerLargeStyle` (iOS only)
 
 Style object for the large header. Supported properties:
 
 - `backgroundColor`
 
+#### `headerLargeTitle`
+
+Boolean used to set a native property to prefer a large title header (like in iOS setting).
+
+For the 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.
+
+#### `headerLargeTitleHideShadow` (iOS only)
+
+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.
+
+#### `headerLargeTitleStyle` (iOS only)
+
+Style object for header large title. Supported properties:
+
+- `color`
+- `fontFamily`
+- `fontSize`
+- `fontWeight`
+
 #### `headerLeft`
 
 Function which returns a React Element to display on the left side of the header. For now, on Android, using it will cause the title to also disappear.
@@ -85,6 +143,10 @@ Function which returns a React Element to display on the left side of the header
 
 Function which returns a React Element to display on the right side of the header.
 
+#### `headerShown`
+
+Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.
+
 #### `headerStyle`
 
 Style object for the header. Supported properties:
@@ -113,21 +175,9 @@ Style object for header title. Supported properties:
 
 A Boolean 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`. Insets are always applied on iOS because the header cannot be opaque. Only supported on Android.
 
-#### `hideShadow`
-
-Boolean indicating whether to hide the elevation shadow on the header.
-
-#### `largeTitle`
-
-Boolean used to set a native property to prefer a large title header (like in iOS setting).
-
-For the 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.
-
-#### `largeTitleHideShadow` (iOS only)
+#### `headerTranslucent`
 
-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.
+Boolean indicating whether the navigation bar is translucent.
 
 #### `replaceAnimation`
 
@@ -171,10 +221,6 @@ Using `containedModal` and `containedTransparentModal` with other types of modal
 
 A string that can be used as a fallback for `headerTitle`.
 
-#### `translucent`
-
-Boolean indicating whether the navigation bar is translucent.
-
 ### Status bar and orientation managment
 
 With `native-stack`, the status bar and screen orientation can be managed by `UIViewController` on iOS. On Android, the screen orientation can be managed by `FragmentActivity`. On iOS, it requires:

createNativeStackNavigator/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../lib/commonjs/createNativeStackNavigator",
   "module": "../lib/module/createNativeStackNavigator",
-  "react-native": "../src/createNativeStackNavigator"
+  "react-native": "../src/createNativeStackNavigator",
+  "types": "../lib/typescript/createNativeStackNavigator.d.ts"
 }

package.json

@@ -81,6 +81,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "^0.63.2",
+    "react-native-safe-area-context": "^3.1.9",
     "react-navigation": "^4.4.3",
     "react-navigation-stack": "^2.9.0",
     "react-test-renderer": "^16.13.1",