Merge pull request #228 from BlueBaseJS/fix/unmount-issues

Author: artalat

CHANGELOG.md

@@ -0,0 +1,30 @@
+# [1.1.0](https://github.com/BlueBaseJS/plugin-react-navigation/compare/v1.0.2...v1.1.0) (2020-02-10)
+
+### Bug Fixes
+
+-   **TabNavigator:** Fixed broken tabs ([0b097ed](https://github.com/BlueBaseJS/plugin-react-navigation/commit/0b097edf1b018dad183952e6b9e9085d02f5d492))
+
+### Features
+
+-   Uses dynamic version ([46fb630](https://github.com/BlueBaseJS/plugin-react-navigation/commit/46fb630d899f7bcdd07730e1561cdccf2fa73352))
+
+## [1.0.2](https://github.com/BlueBaseJS/plugin-react-navigation/compare/v1.0.1...v1.0.2) (2020-02-10)
+
+### Bug Fixes
+
+-   **release:** Fix semantic-release ([#121](https://github.com/BlueBaseJS/plugin-react-navigation/issues/121)) ([d824943](https://github.com/BlueBaseJS/plugin-react-navigation/commit/d824943e3cfe2bc6cf4b5de431c2ea6f14eb88da))
+
+# 1.0.0 (2020-02-08)
+
+### Features
+
+-   **Navigator:** Use presentation modal on iOS by default ([0774731](https://github.com/BlueBaseJS/plugin-react-navigation/commit/0774731b3ccb5fb34c66a83ba5871c611f6cd3f9))
+-   **SwitchNavigator:** Added SwitchNavigator ([#117](https://github.com/BlueBaseJS/plugin-react-navigation/issues/117)) ([b16a5e9](https://github.com/BlueBaseJS/plugin-react-navigation/commit/b16a5e908b968700d4a12b91fd9bb72cd6d8dfc5))
+-   Rewrote Plugin for React Navigation 5 ([#109](https://github.com/BlueBaseJS/plugin-react-navigation/issues/109)) ([5b70a1f](https://github.com/BlueBaseJS/plugin-react-navigation/commit/5b70a1feb7d7c33b3b7fc69f92904d9db75be007))
+
+# 1.0.0 (2020-02-07)
+
+### Features
+
+-   **SwitchNavigator:** Added SwitchNavigator ([#117](https://github.com/BlueBaseJS/plugin-react-navigation/issues/117)) ([b16a5e9](https://github.com/BlueBaseJS/plugin-react-navigation/commit/b16a5e908b968700d4a12b91fd9bb72cd6d8dfc5))
+-   Rewrote Plugin for React Navigation 5 ([#109](https://github.com/BlueBaseJS/plugin-react-navigation/issues/109)) ([5b70a1f](https://github.com/BlueBaseJS/plugin-react-navigation/commit/5b70a1feb7d7c33b3b7fc69f92904d9db75be007))

README.md

@@ -3,8 +3,8 @@
   <h1>
 		React Navigation
 	</h1>
-  <p>Use React Navigation in BlueBase apps!</p>
-</div>
+  <p>Use React Navigation in BlueBase apps</p>
+</div> 
 
 <hr />
 

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

@@ -3,12 +3,11 @@ import { Divider, List } from '@bluebase/components';
 import { ScrollView, View } from 'react-native';
 
 import React from 'react';
-import { useTheme } from '@bluebase/core';
+import { ThemeMode } from '../components/ThemeMode';
 
 // tslint:disable: jsx-no-lambda
 
 export const HomeScreen = (props: any) => {
-	const { changeTheme, theme } = useTheme();
 
 	const navigate = (route?: any, params?: any) => () => props.navigation.navigate(route, params);
 	const push = (route?: any, params?: any) => () => props.navigation.push(route, params);
@@ -17,13 +16,7 @@ export const HomeScreen = (props: any) => {
 		<View style={{ flex: 1 }}>
 			<ScrollView style={{ flex: 1 }}>
 				<List.Subheader>Settings</List.Subheader>
-				<List.Item
-					title="Mode"
-					description={theme.mode === 'light' ? 'Light' : 'Dark'}
-					onPress={() =>
-						theme.mode === 'light' ? changeTheme('bluebase-dark') : changeTheme('bluebase-light')
-					}
-				/>
+				<ThemeMode />
 				<Divider />
 				<List.Subheader>Demos</List.Subheader>
 				<List.Item

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

@@ -2,15 +2,16 @@ import { Body1, NavigationActions } from '@bluebase/components';
 import { Button, View } from 'react-native';
 
 import React from 'react';
+import { ThemeMode } from '../components/ThemeMode';
 
 export class SettingsScreen extends React.Component {
 	static navigationOptions: any = {
 		title: 'Static Nav Opts Title',
 	};
 	render() {
 		return (
-			<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-				<Body1>Settings Screen</Body1>
+			<View style={{ flexGrow: 1, justifyContent: 'center' }}>
+				<ThemeMode />
 				<NavigationActions>
 					{({ navigate }: any) => (
 						<Button

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

@@ -2,10 +2,11 @@ import { Button, Text, View } from 'react-native';
 
 import { NavigationActions } from '@bluebase/components';
 import React from 'react';
+import { ThemeMode } from '../components/ThemeMode';
 
 export class SettingsDetailScreen extends React.Component {
 	render() {
-		console.log('settings details screen props', this.props);
+		// console.log('settings details screen props', this.props);
 		return (
 			<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 				<Text>Settings Details Screen</Text>
@@ -18,6 +19,7 @@ export class SettingsDetailScreen extends React.Component {
 						/>
 					)}
 				</NavigationActions>
+				<ThemeMode />
 			</View>
 		);
 	}

bluebase/expo/apps/plugin-settings-app/components/ThemeMode.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-no-bind */
+import { List } from '@bluebase/components';
+import React from 'react';
+import { useTheme } from '@bluebase/core';
+
+// tslint:disable: jsx-no-lambda
+
+export const ThemeMode = () => {
+	const { changeTheme, theme } = useTheme();
+
+	return (
+		<List.Item
+			title="Theme Mode"
+			description={theme.mode === 'light' ? 'Light' : 'Dark'}
+			onPress={() =>
+				theme.mode === 'light' ? changeTheme('bluebase-dark') : changeTheme('bluebase-light')
+			}
+		/>
+	);
+};

package.json

@@ -2,7 +2,7 @@
   "name": "@bluebase/plugin-react-navigation",
   "description": "Use React Navigation in BlueBase apps!",
   "author": "BlueEast Team <code@blueeast.com>",
-  "version": "0.0.1-alpha.24",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -69,55 +69,57 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.6",
-    "@react-navigation/bottom-tabs": "^5.0.0-alpha.45",
-    "@react-navigation/compat": "^5.0.0-alpha.34",
-    "@react-navigation/core": "^3.5.2",
-    "@react-navigation/drawer": "^5.0.0-alpha.47",
-    "@react-navigation/material-bottom-tabs": "^5.0.0-alpha.42",
-    "@react-navigation/material-top-tabs": "^5.0.0-alpha.41",
-    "@react-navigation/native": "^5.0.0-alpha.29",
-    "@react-navigation/native-stack": "^5.0.0-alpha.35",
-    "@react-navigation/stack": "^5.0.0-alpha.70",
+    "@react-navigation/bottom-tabs": "^5.0.1",
+    "@react-navigation/compat": "^5.0.1",
+    "@react-navigation/core": "^5.1.0",
+    "@react-navigation/drawer": "^5.0.1",
+    "@react-navigation/material-bottom-tabs": "^5.0.1",
+    "@react-navigation/material-top-tabs": "^5.0.1",
+    "@react-navigation/native": "^5.0.1",
+    "@react-navigation/native-stack": "^5.0.1",
+    "@react-navigation/stack": "^5.0.1",
     "@react-navigation/web": "^1.0.0-alpha.9",
     "expo": "^36.0.2",
     "react-native": "^0.61.5",
     "react-native-reanimated": "^1.7.0",
-    "react-native-safe-area-context": "^0.6.4",
-    "react-native-screens": "^2.0.0-beta.1",
+    "react-native-safe-area-context": "^0.7.2",
+    "react-native-screens": "^2.0.0-beta.2",
     "react-native-tab-view": "^2.13.0",
-    "tslib": "^1.10.0"
+    "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.8.4",
     "@babel/plugin-transform-flow-strip-types": "^7.8.3",
-    "@bluebase/code-standards": "^2.4.2",
-    "@bluebase/components": "^5.22.0",
-    "@bluebase/core": "^5.11.0",
+    "@bluebase/code-standards": "^2.5.0",
+    "@bluebase/components": "^5.24.1",
+    "@bluebase/core": "^5.11.1",
     "@bluebase/plugin-launcher": "^1.2.0",
-    "@bluebase/plugin-react-native-paper": "^2.3.3",
+    "@bluebase/plugin-react-native-paper": "^2.4.0",
     "@bluebase/plugin-responsive-grid": "^0.0.7",
     "@bluebase/plugin-vector-icons": "^0.2.0",
     "@bluebase/storybook-addon": "^3.0.0",
-    "@types/enzyme": "^3.10.4",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/enzyme-async-helpers": "^0.9.1",
-    "@types/jest": "^25.1.1",
+    "@types/jest": "^25.1.2",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
-    "@types/react-native": "^0.61.10",
+    "@types/react-native": "^0.61.12",
     "@types/react-test-renderer": "^16.9.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.6",
-    "babel-preset-expo": "^8.0.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-expo": "^8.2.3",
     "codacy-coverage": "^3.4.0",
-    "codecov": "^3.6.4",
+    "codecov": "^3.6.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-async-helpers": "^0.9.1",
     "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.20.3",
     "jest": "^25.1.0",
     "jest-enzyme": "^7.1.2",
     "jest-expo": "^36.0.1",
@@ -136,12 +138,15 @@
     "trash-cli": "^3.0.0",
     "ts-jest": "^25.2.0",
     "typedoc": "^0.16.9",
-    "typescript": "3.7.5"
+    "typescript": "3.9.7"
   },
   "peerDependencies": {
     "@bluebase/core": "^5.11.0",
     "react": "^16.8.0"
   },
+  "resolutions": {
+    "react-native-vector-icons": "6.6.0"
+  },
   "prettier": {
     "singleQuote": true,
     "useTabs": true,

src/__tests__/index.test.ts

@@ -1,11 +1,9 @@
 import { BlueBase } from '@bluebase/core';
 import Plugin from '../index';
-// import console = require('console');
 
 test('Plugin should be correctly registered', async () => {
 	const BB = new BlueBase();
 	await BB.Plugins.register(Plugin);
-	// console.log(BB);
 
 	expect(BB.Plugins.has('@bluebase/plugin-react-navigation')).toBeTruthy();
 });

src/components/Navigation/Navigation.tsx

@@ -1,6 +1,6 @@
 import { useComponent, useTheme } from '@bluebase/core';
 
-import { NavigationNativeContainer } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import { NavigationProps } from '@bluebase/components';
 import React from 'react';
 
@@ -11,12 +11,11 @@ import React from 'react';
  */
 export const Navigation = (props: NavigationProps) => {
 	const { navigator, ...rest } = props;
-
-	const Navigator = useComponent('Navigator');
 	const { theme } = useTheme();
+	const Navigator = useComponent('Navigator');
 
 	return (
-		<NavigationNativeContainer
+		<NavigationContainer
 			theme={{
 				dark: theme.mode === 'dark',
 
@@ -31,6 +30,6 @@ export const Navigation = (props: NavigationProps) => {
 			{...rest}
 		>
 			<Navigator {...navigator} />
-		</NavigationNativeContainer>
+		</NavigationContainer>
 	);
 };

src/components/Navigation/__tests__/Navigation.test.tsx

@@ -8,7 +8,7 @@ import { waitForElement } from 'enzyme-async-helpers';
 describe('Navigation tests', () => {
 	it('should check props', async () => {
 		const wrapper = mount(<BlueBaseApp plugins={[Plugin]} />);
-		await waitForElement(wrapper, Navigation);
+		await waitForElement(wrapper as any, Navigation);
 		expect(wrapper.find(Navigation).exists()).toBe(true);
 	});
 });