Skip to content
This repository was archived by the owner on Feb 8, 2020. It is now read-only.

Commit d26b77f

Browse files
osdnksatya164
authored andcommitted
feat: add native container
1 parent 1bbd6ac commit d26b77f

File tree

5 files changed

+53
-13
lines changed

5 files changed

+53
-13
lines changed

packages/core/src/NavigationContainer.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,11 @@ import {
1212
PartialState,
1313
NavigationAction,
1414
NavigationContainerRef,
15+
NavigationContainerProps,
1516
} from './types';
1617

1718
type State = NavigationState | PartialState<NavigationState> | undefined;
1819

19-
type Props = {
20-
initialState?: InitialState;
21-
onStateChange?: (state: State) => void;
22-
children: React.ReactNode;
23-
};
24-
2520
const MISSING_CONTEXT_ERROR =
2621
"We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?";
2722

@@ -84,7 +79,7 @@ const getPartialState = (
8479
* @param props.ref Ref object which refers to the navigation object containing helper methods.
8580
*/
8681
const Container = React.forwardRef(function NavigationContainer(
87-
{ initialState, onStateChange, children }: Props,
82+
{ initialState, onStateChange, children }: NavigationContainerProps,
8883
ref: React.Ref<NavigationContainerRef>
8984
) {
9085
const [state, setNavigationState] = React.useState<State>(() =>

packages/core/src/types.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as BaseActions from './BaseActions';
2+
import * as React from 'react';
23

34
export type CommonAction = BaseActions.Action;
45

@@ -344,6 +345,14 @@ export type NavigationHelpers<
344345
): void;
345346
};
346347

348+
export type NavigationContainerProps = {
349+
initialState?: InitialState;
350+
onStateChange?: (
351+
state: NavigationState | PartialState<NavigationState> | undefined
352+
) => void;
353+
children: React.ReactNode;
354+
};
355+
347356
export type NavigationProp<
348357
ParamList extends ParamListBase,
349358
RouteName extends keyof ParamList = string,

packages/example/src/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import { Linking } from 'expo';
44
import { Appbar, List } from 'react-native-paper';
55
import { Asset } from 'expo-asset';
66
import {
7-
NavigationContainer,
87
InitialState,
98
getStateFromPath,
109
NavigationContainerRef,
1110
} from '@react-navigation/core';
12-
import { useBackButton, useLinking } from '@react-navigation/native';
11+
import { useLinking, NativeContainer } from '@react-navigation/native';
1312
import {
1413
createDrawerNavigator,
1514
DrawerNavigationProp,
@@ -60,8 +59,6 @@ Asset.loadAsync(StackAssets);
6059
export default function App() {
6160
const containerRef = React.useRef<NavigationContainerRef>();
6261

63-
useBackButton(containerRef);
64-
6562
// To test deep linking on, run the following in the Terminal:
6663
// Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
6764
// iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
@@ -116,7 +113,7 @@ export default function App() {
116113
}
117114

118115
return (
119-
<NavigationContainer
116+
<NativeContainer
120117
ref={containerRef}
121118
initialState={initialState}
122119
onStateChange={state =>
@@ -175,6 +172,6 @@ export default function App() {
175172
)}
176173
</Drawer.Screen>
177174
</Drawer.Navigator>
178-
</NavigationContainer>
175+
</NativeContainer>
179176
);
180177
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import {
3+
NavigationContainer,
4+
NavigationContainerProps,
5+
NavigationContainerRef,
6+
} from '@react-navigation/core';
7+
import useBackButton from './useBackButton';
8+
9+
/**
10+
* Container component which holds the navigation state
11+
* designed for mobile apps.
12+
* This should be rendered at the root wrapping the whole app.
13+
*
14+
* @param props.initialState Initial state object for the navigation tree.
15+
* @param props.onStateChange Callback which is called with the latest navigation state when it changes.
16+
* @param props.children Child elements to render the content.
17+
* @param props.ref Ref object which refers to the navigation object containing helper methods.
18+
*/
19+
20+
const NativeContainer = React.forwardRef(function NativeContainer(
21+
props: NavigationContainerProps,
22+
ref: React.Ref<NavigationContainerRef>
23+
) {
24+
const refContainer = React.useRef<NavigationContainerRef>(null);
25+
26+
useBackButton(refContainer);
27+
React.useImperativeHandle(ref, () => refContainer.current);
28+
29+
return (
30+
<NavigationContainer
31+
{...props}
32+
ref={refContainer}
33+
children={props.children}
34+
/>
35+
);
36+
});
37+
38+
export default NativeContainer;

packages/native/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as useBackButton } from './useBackButton';
22
export { default as useLinking } from './useLinking';
3+
export { default as NativeContainer } from './NativeContainer';

0 commit comments

Comments
 (0)