react-native-screens 4.0.0-beta.6 → 4.0.0-beta.8

package/lib/typescript/components/ScreenStackHeaderConfig.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { HeaderSubviewTypes, ScreenStackHeaderConfigProps, SearchBarProps } from 'react-native-screens';
 import { ImageProps, ViewProps } from 'react-native';
-export declare const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps>;
 export declare const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<ViewProps & {
     type?: HeaderSubviewTypes;
 }>>;
+export declare function ScreenStackHeaderConfig(props: ScreenStackHeaderConfigProps): React.JSX.Element;
 export declare const ScreenStackHeaderBackButtonImage: (props: ImageProps) => JSX.Element;
 export declare const ScreenStackHeaderRightView: (props: React.PropsWithChildren<ViewProps>) => JSX.Element;
 export declare const ScreenStackHeaderLeftView: (props: React.PropsWithChildren<ViewProps>) => JSX.Element;

package/lib/typescript/components/ScreenStackHeaderConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenStackHeaderConfig.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenStackHeaderConfig.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC5B,cAAc,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAS,UAAU,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxE,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CACvC,CAAC;AAChD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,aAAa,CACxD,KAAK,CAAC,iBAAiB,CAAC,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAClB,CAAC;AAEnD,eAAO,MAAM,gCAAgC,UACpC,UAAU,KAChB,WAIF,CAAC;AAEF,eAAO,MAAM,0BAA0B,UAC9B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAMF,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC7B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAMF,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAC/B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAMF,CAAC;AAEF,eAAO,MAAM,8BAA8B,UAClC,MAAM,iBAAiB,CAAC,cAAc,CAAC,KAC7C,WAMF,CAAC"}
+{"version":3,"file":"ScreenStackHeaderConfig.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenStackHeaderConfig.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC5B,cAAc,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAS,UAAU,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxE,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,aAAa,CACxD,KAAK,CAAC,iBAAiB,CAAC,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAAC,CAClB,CAAC;AAEnD,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,4BAA4B,GAClC,KAAK,CAAC,GAAG,CAAC,OAAO,CAOnB;AAED,eAAO,MAAM,gCAAgC,UACpC,UAAU,KAChB,WAIF,CAAC;AAEF,eAAO,MAAM,0BAA0B,UAC9B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAUF,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC7B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAUF,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAC/B,MAAM,iBAAiB,CAAC,SAAS,CAAC,KACxC,WAUF,CAAC;AAEF,eAAO,MAAM,8BAA8B,UAClC,MAAM,iBAAiB,CAAC,cAAc,CAAC,KAC7C,WAMF,CAAC"}

package/lib/typescript/fabric/ScreenStackHeaderConfigNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenStackHeaderConfigNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/fabric/ScreenStackHeaderConfigNativeComponent.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EACV,KAAK,EACL,WAAW,EACX,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,KAAK,aAAa,GAAG,KAAK,GAAG,KAAK,CAAC;AAGnC,KAAK,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpC,KAAK,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpC,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,KAAK,UAAU,GACX,YAAY,GACZ,OAAO,GACP,MAAM,GACN,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,UAAU,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,gBAAgB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB,CAAC,EAAE,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,WAAW,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAEnD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;AAED,wBAGE"}
+{"version":3,"file":"ScreenStackHeaderConfigNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/fabric/ScreenStackHeaderConfigNativeComponent.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EACV,KAAK,EACL,WAAW,EACX,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,KAAK,aAAa,GAAG,KAAK,GAAG,KAAK,CAAC;AAGnC,KAAK,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpC,KAAK,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEpC,KAAK,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,KAAK,UAAU,GACX,YAAY,GACZ,OAAO,GACP,MAAM,GACN,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,UAAU,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,gBAAgB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB,CAAC,EAAE,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,WAAW,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAEnD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;;AAED,wBAKE"}

package/lib/typescript/fabric/ScreenStackHeaderSubviewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenStackHeaderSubviewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/fabric/ScreenStackHeaderSubviewNativeComponent.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,CAAC;AAEhB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,WAAW,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;CAChD;;AAED,wBAGE"}
+{"version":3,"file":"ScreenStackHeaderSubviewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/fabric/ScreenStackHeaderSubviewNativeComponent.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,CAAC;AAEhB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,WAAW,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;CAChD;;AAED,wBAKE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.8",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn)",

package/src/components/ScreenStackHeaderConfig.tsx

@@ -12,12 +12,21 @@ import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
 import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
 import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
 
-export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
-  ScreenStackHeaderConfigNativeComponent as any;
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
+export function ScreenStackHeaderConfig(
+  props: ScreenStackHeaderConfigProps,
+): React.JSX.Element {
+  return (
+    <ScreenStackHeaderConfigNativeComponent
+      {...props}
+      style={styles.headerConfig}
+    />
+  );
+}
+
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,
 ): JSX.Element => (
@@ -28,33 +37,45 @@ export const ScreenStackHeaderBackButtonImage = (
 
 export const ScreenStackHeaderRightView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="right"
-    style={styles.headerSubview}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="right"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
 
 export const ScreenStackHeaderLeftView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="left"
-    style={styles.headerSubview}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="left"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
 
 export const ScreenStackHeaderCenterView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="center"
-    style={styles.headerSubview}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="center"
+      style={[styles.headerSubviewCenter, style]}
+    />
+  );
+};
 
 export const ScreenStackHeaderSearchBarView = (
   props: React.PropsWithChildren<SearchBarProps>,
@@ -68,11 +89,19 @@ export const ScreenStackHeaderSearchBarView = (
 
 const styles = StyleSheet.create({
   headerSubview: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  headerSubviewCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
+  headerConfig: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+  },
 });

package/src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -75,5 +75,7 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderConfig',
-  {},
+  {
+    interfaceOnly: true,
+  },
 );

package/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts

@@ -18,5 +18,7 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderSubview',
-  {},
+  {
+    interfaceOnly: true,
+  },
 );