;
}) => {
const updateTitle = React.useCallback(() => {
+ if (Platform.OS !== 'web') {
+ return;
+ }
+
document.title = `${route.name} (${route.params.author})`;
- return () => (document.title = '');
+ return () => {
+ document.title = '';
+ };
}, [route.name, route.params.author]);
useFocusEffect(updateTitle);
return (
-
-
First, {route.params.author}
-
-
-
+
+
+
);
};
@@ -90,18 +97,13 @@ const Second = ({
});
return (
-
-
Second
-
+
+
+
);
};
@@ -113,21 +115,14 @@ const Fourth = ({
StackNavigationProp
>;
}) => (
-
-
Fourth
-
-
+
+
+
);
const Fifth = ({
@@ -138,36 +133,48 @@ const Fifth = ({
StackNavigationProp
>;
}) => (
-
-
Fifth
-
-
-
-
+
+ Fifth
+
+
+
+
);
const PERSISTENCE_KEY = 'NAVIGATION_STATE';
-let initialState: InitialState | undefined;
+export default function App() {
+ const [isReady, setIsReady] = React.useState(false);
+ const [initialState, setInitialState] = React.useState<
+ InitialState | undefined
+ >();
-try {
- initialState = JSON.parse(localStorage.getItem(PERSISTENCE_KEY) || '');
-} catch (e) {
- // Do nothing
-}
+ React.useEffect(() => {
+ AsyncStorage.getItem(PERSISTENCE_KEY).then(
+ data => {
+ try {
+ const result = JSON.parse(data || '');
+
+ if (result) {
+ setInitialState(result);
+ }
+ } finally {
+ setIsReady(true);
+ }
+ },
+ () => setIsReady(true)
+ );
+ }, []);
+
+ if (!isReady) {
+ return null;
+ }
-function App() {
return (
- localStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
+ AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
}
>
@@ -195,4 +202,10 @@ function App() {
);
}
-render(, document.getElementById('root'));
+const styles = StyleSheet.create({
+ title: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 8,
+ },
+});
diff --git a/packages/example/webpack.config.js b/packages/example/webpack.config.js
new file mode 100644
index 00000000..bc6b8851
--- /dev/null
+++ b/packages/example/webpack.config.js
@@ -0,0 +1,17 @@
+/* eslint-disable import/no-commonjs */
+/* eslint-env node */
+
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+
+module.exports = async function(env, argv) {
+ const config = await createExpoWebpackConfigAsync(env, argv);
+
+ config.module.rules.push({
+ test: /@navigation-ex/,
+ use: 'babel-loader',
+ });
+
+ config.resolve.alias['react'] = require.resolve('react');
+
+ return config;
+};
diff --git a/packages/routers/package.json b/packages/routers/package.json
new file mode 100644
index 00000000..c3c26021
--- /dev/null
+++ b/packages/routers/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "@navigation-ex/routers",
+ "version": "0.0.1",
+ "main": "src/index",
+ "license": "MIT",
+ "dependencies": {
+ "shortid": "^2.2.14",
+ "@navigation-ex/core": "^0.0.1"
+ }
+}
diff --git a/example/StackNavigator.tsx b/packages/routers/src/StackRouter.tsx
similarity index 67%
rename from example/StackNavigator.tsx
rename to packages/routers/src/StackRouter.tsx
index edd48643..5b1d0c4a 100644
--- a/example/StackNavigator.tsx
+++ b/packages/routers/src/StackRouter.tsx
@@ -1,22 +1,11 @@
-/* eslint-disable react-native/no-inline-styles */
-
-import * as React from 'react';
import shortid from 'shortid';
import {
- useNavigationBuilder,
- NavigationProp,
NavigationState,
CommonAction,
- ParamListBase,
Router,
BaseRouter,
- createNavigator,
DefaultRouterOptions,
-} from '../src/index';
-
-type Props = DefaultRouterOptions & {
- children: React.ReactNode;
-};
+} from '@navigation-ex/core';
type Action =
| {
@@ -29,47 +18,12 @@ type Action =
}
| { type: 'POP_TO_TOP' };
-export type StackNavigationOptions = {
- /**
- * Title text for the screen.
- */
- title?: string;
-};
+export type StackRouterOptions = DefaultRouterOptions;
-export type StackNavigationProp<
- ParamList extends ParamListBase,
- RouteName extends keyof ParamList = string
-> = NavigationProp<
- ParamList,
- RouteName,
- NavigationState,
- StackNavigationOptions
-> & {
- /**
- * Push a new screen onto the stack.
- *
- * @param name Name of the route for the tab.
- * @param [params] Params object for the route.
- */
- push(
- ...args: ParamList[RouteName] extends void
- ? [RouteName]
- : [RouteName, ParamList[RouteName]]
- ): void;
+export type StackNavigationState = NavigationState;
- /**
- * Pop a screen from the stack.
- */
- pop(count?: number): void;
-
- /**
- * Pop to the first route in the stack, dismissing all other screens.
- */
- popToTop(): void;
-};
-
-function StackRouter(options: DefaultRouterOptions) {
- const router: Router = {
+export default function StackRouter(options: StackRouterOptions) {
+ const router: Router = {
...BaseRouter,
getInitialState({ routeNames, routeParamList }) {
@@ -257,53 +211,3 @@ function StackRouter(options: DefaultRouterOptions) {
return router;
}
-
-export function StackNavigator(props: Props) {
- const { state, descriptors } = useNavigationBuilder<
- NavigationState,
- StackNavigationOptions,
- DefaultRouterOptions
- >(StackRouter, props);
-
- return (
-
- {state.routes.map((route, i) => (
-
- {descriptors[route.key].render()}
-
- ))}
-
- {descriptors[state.routes[state.index].key].options.title}
-
-
- {state.routes.map((route, i, self) => (
-
- {descriptors[route.key].render()}
-
- ))}
-