Merge branch 'develop'

Author: artalat

bluebase/expo/apps/plugin-settings-app/Screens/Home.tsx

@@ -38,6 +38,8 @@ export const HomeScreen = (props: any) => {
 					onPress={navigate('WrappedSettings')}
 				/>
 				<Divider />
+				<List.Item title="Native Stack" onPress={navigate('NativeStack')} />
+				<Divider />
 				<List.Item title="Modal" onPress={navigate('Modal')} />
 				<Divider />
 				<List.Item

bluebase/expo/apps/plugin-settings-app/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 // https://github.com/kmagiera/react-native-gesture-handler/issues/320#issuecomment-443815828
 import 'react-native-gesture-handler';
 
@@ -71,8 +72,8 @@ const plugin = createPlugin({
 		},
 
 		{
-			name: 'Modal',
-			path: '/modal',
+			name: 'NativeStack',
+			path: '/native-stack',
 
 			options: {
 				headerShown: false,
@@ -85,6 +86,61 @@ const plugin = createPlugin({
 				type: 'native-stack',
 				// mode: 'modal',
 
+				routes: [
+					{
+						name: 'Native 1',
+						path: 'native1',
+						exact: true,
+
+						// eslint-disable-next-line react/display-name
+						screen: (props: any) => (
+							<ComponentState
+								title="Title 1"
+								description="This screen is in a native stack"
+								actionOnPress={() => props.navigation.navigate('Native2')}
+								actionTitle="Show Modal"
+							/>
+						),
+
+						navigationOptions: {
+							// stackPresentation: 'modal',
+							title: 'Native Stack 1 Screen',
+						},
+					},
+					{
+						name: 'Native2',
+						path: 'native2',
+						exact: true,
+
+						// eslint-disable-next-line react/display-name
+						screen: () => (
+							<ComponentState title="Title 2" description="This screen is in a modal" />
+						),
+
+						navigationOptions: {
+							stackPresentation: 'modal',
+							title: 'Native Stack 2 Screen',
+						} as any,
+					},
+				],
+			},
+		},
+
+		{
+			name: 'Modal',
+			path: '/modal',
+
+			options: {
+				headerShown: false,
+				contentStyle: {
+					backgroundColor: 'black',
+				},
+			},
+
+			navigator: {
+				type: 'stack',
+				mode: 'modal',
+
 				routes: [
 					{
 						name: 'Modal1',
@@ -96,8 +152,8 @@ const plugin = createPlugin({
 							<ComponentState
 								title="Title 1"
 								description="This screen is in a modal"
-								actionOnPress={() => props.navigation.navigate('Modal2')}
 								actionTitle="Modal 2"
+								actionOnPress={() => props.navigation.navigate('Modal2')}
 							/>
 						),
 

src/components/Navigator/Navigator.tsx

@@ -8,11 +8,9 @@ import {
 } from '../../helpers';
 import { resolveThunk, useBlueBase, useIntl, useTheme } from '@bluebase/core';
 
-import { NavigatorProps as CoreNavigatorProps } from '@bluebase/components';
+import { NavigatorProps } from '@bluebase/components';
 import React from 'react';
 
-export interface NavigatorProps extends CoreNavigatorProps {}
-
 /**
  * Navigator (V5)
  * Renders a single navigator
@@ -40,7 +38,10 @@ export const Navigator = (props: NavigatorProps) => {
 
 	const renderRoute = (route: RouteConfigWithResolveSubRoutes) => {
 		// We're not able to resovle navigation object here. Open to better ideas.
-		const options = resolveRouteOptions(route, { navigation: stubNavigationObject, screenProps });
+		const options = resolveRouteOptions(route, {
+			navigation: stubNavigationObject,
+			screenProps,
+		});
 
 		return (
 			<NavigatorComponent.Screen

src/helpers/__tests__/resolveNavigatorScreenOptions.test.tsx

@@ -1,3 +1,4 @@
+import { isIosModalScreen } from '../resolveNavigatorScreenOptions';
 import { resolveNavigatorScreenOptions } from '..';
 
 describe('resolveNavigatorScreenOptions', () => {
@@ -21,7 +22,12 @@ describe('resolveNavigatorScreenOptions', () => {
 
 	it('should return empty object if nothing suitable is provided', async () => {
 		const opts = resolveNavigatorScreenOptions({} as any);
-
 		expect(opts).toMatchObject({});
 	});
+
+	describe('isIosModalScreen', () => {
+		it('should return true', async () => {
+			expect(isIosModalScreen({ type: 'stack', mode: 'modal' } as any)).toBe(true);
+		});
+	});
 });

src/helpers/resolveNavigatorScreenOptions.ts

@@ -1,4 +1,15 @@
-import { NavigatorProps as CoreNavigatorProps } from '@bluebase/components';
+import { NavigatorProps as CoreNavigatorProps, NavigatorProps } from '@bluebase/components';
+
+import { Platform } from 'react-native';
+import { TransitionPresets } from '@react-navigation/stack';
+
+export const isIosModalScreen = ({ type, mode }: NavigatorProps) => {
+	if (Platform.OS === 'ios' && type === 'stack' && mode === 'modal') {
+		return true;
+	}
+
+	return false;
+};
 
 /**
  * Given a navigator object, resolves its screen options
@@ -7,5 +18,12 @@ import { NavigatorProps as CoreNavigatorProps } from '@bluebase/components';
  */
 export const resolveNavigatorScreenOptions = (navigator: CoreNavigatorProps) => {
 	const resolvedScreenOptions = navigator.screenOptions || navigator.defaultNavigationOptions || {};
-	return resolvedScreenOptions;
+	return {
+		...(isIosModalScreen(navigator) && {
+			gestureEnabled: true,
+			cardOverlayEnabled: true,
+			...TransitionPresets.ModalPresentationIOS,
+		}),
+		...resolvedScreenOptions,
+	};
 };