chore: publish

- @react-navigation/compat@5.0.0-alpha.3
 - @react-navigation/stack@5.0.0-alpha.18

packages/compat/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.3](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.2...@react-navigation/compat@5.0.0-alpha.3) (2019-09-23)
+
+
+### Bug Fixes
+
+* throw when wrapping a compat navigatofor compat ([8920da6](https://github.com/react-navigation/navigation-ex/commit/8920da6))
+
+
+
+
+
 # [5.0.0-alpha.2](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.1...@react-navigation/compat@5.0.0-alpha.2) (2019-09-17)
 
 

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.3",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -19,7 +19,14 @@ export default function createCompatNavigatorFactory<
     React.ComponentType<any>
   >
 >(createNavigator: CreateNavigator) {
-  return <
+  // @ts-ignore
+  if (createNavigator.isCompat) {
+    throw new Error(
+      `The navigator is already in compat mode. You don't need to wrap it in 'createCompatNavigatorFactory'.`
+    );
+  }
+
+  const createCompatNavigator = <
     NavigationPropType extends NavigationProp<any, any, any, any, any>,
     ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
       infer P
@@ -157,4 +164,8 @@ export default function createCompatNavigatorFactory<
 
     return Navigator;
   };
+
+  createCompatNavigator.isCompat = true;
+
+  return createCompatNavigator;
 }

packages/stack/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.17...@react-navigation/stack@5.0.0-alpha.18) (2019-09-23)
+
+
+### Bug Fixes
+
+* fix header rendered behind card. closes [#108](https://github.com/react-navigation/navigation-ex/issues/108) ([2f66556](https://github.com/react-navigation/navigation-ex/commit/2f66556))
+
+
+### Features
+
+* **stack:** use Animated.Text for header title ([#105](https://github.com/react-navigation/navigation-ex/issues/105)) ([f398136](https://github.com/react-navigation/navigation-ex/commit/f398136))
+* **stack:** use Animated.View for header background ([#106](https://github.com/react-navigation/navigation-ex/issues/106)) ([089390c](https://github.com/react-navigation/navigation-ex/commit/089390c))
+
+
+
+
+
 # [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.16...@react-navigation/stack@5.0.0-alpha.17) (2019-09-17)
 
 

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.18",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/stack/src/views/Header/Header.tsx

@@ -4,64 +4,56 @@ import HeaderSegment from './HeaderSegment';
 import { HeaderProps, HeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';
 
-export default class Header extends React.PureComponent<HeaderProps> {
-  render() {
-    const {
-      scene,
-      previous,
-      layout,
-      navigation,
-      styleInterpolator,
-    } = this.props;
-    const { options } = scene.descriptor;
-    const title =
-      typeof options.headerTitle !== 'function' &&
-      options.headerTitle !== undefined
-        ? options.headerTitle
-        : options.title !== undefined
-        ? options.title
-        : scene.route.name;
+export default React.memo(function Header(props: HeaderProps) {
+  const { scene, previous, layout, navigation, styleInterpolator } = props;
+  const { options } = scene.descriptor;
+  const title =
+    typeof options.headerTitle !== 'function' &&
+    options.headerTitle !== undefined
+      ? options.headerTitle
+      : options.title !== undefined
+      ? options.title
+      : scene.route.name;
 
-    let leftLabel;
+  let leftLabel;
 
-    // The label for the left back button shows the title of the previous screen
-    // If a custom label is specified, we use it, otherwise use previous screen's title
-    if (options.headerBackTitle !== undefined) {
-      leftLabel = options.headerBackTitle;
-    } else if (previous) {
-      const o = previous.descriptor.options;
+  // The label for the left back button shows the title of the previous screen
+  // If a custom label is specified, we use it, otherwise use previous screen's title
+  if (options.headerBackTitle !== undefined) {
+    leftLabel = options.headerBackTitle;
+  } else if (previous) {
+    const o = previous.descriptor.options;
 
-      leftLabel =
-        typeof o.headerTitle !== 'function' && o.headerTitle !== undefined
-          ? o.headerTitle
-          : o.title !== undefined
-          ? o.title
-          : previous.route.name;
-    }
-
-    return (
-      <HeaderSegment
-        {...options}
-        layout={layout}
-        scene={scene}
-        title={title}
-        leftLabel={leftLabel}
-        headerTitle={
-          typeof options.headerTitle !== 'function'
-            ? (props: HeaderTitleProps) => <HeaderTitle {...props} />
-            : options.headerTitle
-        }
-        onGoBack={
-          previous
-            ? () =>
-                navigation.dispatch({
-                  ...StackActions.pop(),
-                  source: scene.route.key,
-                })
-            : undefined
-        }
-        styleInterpolator={styleInterpolator}
-      />
-    );
+    leftLabel =
+      typeof o.headerTitle !== 'function' && o.headerTitle !== undefined
+        ? o.headerTitle
+        : o.title !== undefined
+        ? o.title
+        : previous.route.name;
   }
-}
+
+  return (
+    <HeaderSegment
+      {...options}
+      layout={layout}
+      scene={scene}
+      title={title}
+      leftLabel={leftLabel}
+      headerTitle={
+        typeof options.headerTitle !== 'function'
+          ? (props: HeaderTitleProps) => <HeaderTitle {...props} />
+          : options.headerTitle
+      }
+      onGoBack={
+        previous
+          ? () =>
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: scene.route.key,
+              })
+          : undefined
+      }
+      styleInterpolator={styleInterpolator}
+    />
+  );
+});

packages/stack/src/views/Header/HeaderBackground.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet, Platform, ViewProps } from 'react-native';
+import { StyleSheet, Platform, ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 export default function HeaderBackground({ style, ...rest }: ViewProps) {
-  return <View style={[styles.container, style]} {...rest} />;
+  return <Animated.View style={[styles.container, style]} {...rest} />;
 }
 
 const styles = StyleSheet.create({

packages/stack/src/views/Header/HeaderTitle.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Text, StyleSheet, Platform, TextProps } from 'react-native';
+import { StyleSheet, Platform, TextProps } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 type Props = TextProps & {
   children?: string;
 };
 
 export default function HeaderTitle({ style, ...rest }: Props) {
-  return <Text {...rest} style={[styles.title, style]} />;
+  return <Animated.Text {...rest} style={[styles.title, style]} />;
 }
 
 const styles = StyleSheet.create({

packages/stack/src/views/Stack/StackItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
+import { View, StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { StackNavigationState } from '@react-navigation/routers';
 import { Route } from '@react-navigation/core';
@@ -153,24 +153,35 @@ export default class StackItem extends React.PureComponent<Props> {
         contentStyle={cardStyle}
         style={StyleSheet.absoluteFill}
       >
-        {headerMode === 'screen'
-          ? renderHeader({
-              mode: 'screen',
-              layout,
-              scenes: [previousScene, scene],
-              state,
-              getPreviousRoute,
-              styleInterpolator: headerStyleInterpolator,
-              style: styles.header,
-            })
-          : null}
-        {renderScene({ route: scene.route })}
+        <View style={styles.container}>
+          <View style={styles.scene}>
+            {renderScene({ route: scene.route })}
+          </View>
+          {headerMode === 'screen'
+            ? renderHeader({
+                mode: 'screen',
+                layout,
+                scenes: [previousScene, scene],
+                state,
+                getPreviousRoute,
+                styleInterpolator: headerStyleInterpolator,
+                style: styles.header,
+              })
+            : null}
+        </View>
       </Card>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  scene: {
+    flex: 1,
+  },
   header: {
     // This is needed to show elevation shadow
     zIndex: Platform.OS === 'android' ? 1 : 0,