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

Commit aa21205

Browse files
satya164satya164
authored
fix: fix typescript definitions (#95)
1 parent 89573a8 commit aa21205

File tree

11 files changed

+178
-90
lines changed

11 files changed

+178
-90
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"react-native-paper": "^2.2.0",
2121
"react-native-reanimated": "~1.1.0",
2222
"react-native-webview": "~5.12.0",
23-
"react-navigation": "^4.0.1",
23+
"react-navigation": "^4.0.3",
2424
"react-navigation-stack": "^1.4.0"
2525
},
2626
"devDependencies": {

‎example/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4440,10 +4440,10 @@ react-navigation-stack@^1.4.0:
44404440
dependencies:
44414441
prop-types "^15.7.2"
44424442

4443-
react-navigation@^4.0.1:
4444-
version "4.0.1"
4445-
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183"
4446-
integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ==
4443+
react-navigation@^4.0.3:
4444+
version "4.0.3"
4445+
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
4446+
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
44474447
dependencies:
44484448
"@react-navigation/core" "^3.5.0"
44494449
"@react-navigation/native" "^3.6.2"

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"lint": "eslint --ext .js,.ts,.tsx .",
1616
"typescript": "tsc --noEmit",
1717
"example": "yarn --cwd example",
18-
"bootstrap": "yarn && yarn example",
18+
"bootstrap": "yarn example && yarn",
1919
"prepare": "bob build",
2020
"release": "release-it"
2121
},
@@ -68,7 +68,7 @@
6868
"react-native-reanimated": "^1.2.0",
6969
"react-native-screens": "^1.0.0-alpha.23",
7070
"react-native-testing-library": "^1.7.0",
71-
"react-navigation": "^4.0.1",
71+
"react-navigation": "^4.0.3",
7272
"react-test-renderer": "16.8.6",
7373
"release-it": "^12.3.6",
7474
"typescript": "^3.4.5"
@@ -80,7 +80,7 @@
8080
"react-native-gesture-handler": "^1.0.12",
8181
"react-native-reanimated": "^1.0.0",
8282
"react-native-screens": "^1.0.0 || ^1.0.0-alpha",
83-
"react-navigation": "^4.0.1"
83+
"react-navigation": "^4.0.3"
8484
},
8585
"jest": {
8686
"preset": "react-native",

‎src/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,14 @@ export { default as DrawerSidebar } from './views/DrawerSidebar';
2121
export { default as DrawerView } from './views/DrawerView';
2222

2323
export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
24+
25+
/**
26+
* Types
27+
*/
28+
export {
29+
NavigationDrawerState,
30+
NavigationDrawerProp,
31+
NavigationDrawerOptions,
32+
NavigationDrawerConfig,
33+
NavigationDrawerRouterConfig,
34+
} from './types';

‎src/navigators/createDrawerNavigator.tsx‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
11
import * as React from 'react';
22
import { Dimensions, Platform, ScrollView, I18nManager } from 'react-native';
3-
import { createNavigator, ThemeColors, SafeAreaView } from 'react-navigation';
3+
import {
4+
createNavigator,
5+
ThemeColors,
6+
SafeAreaView,
7+
NavigationRouteConfigMap,
8+
CreateNavigatorConfig,
9+
} from 'react-navigation';
410
import DrawerRouter from '../routers/DrawerRouter';
511
import DrawerView from '../views/DrawerView';
6-
import DrawerItems, { Props } from '../views/DrawerNavigatorItems';
12+
import DrawerItems from '../views/DrawerNavigatorItems';
13+
import {
14+
NavigationDrawerOptions,
15+
NavigationDrawerProp,
16+
NavigationDrawerConfig,
17+
NavigationDrawerRouterConfig,
18+
ContentComponentProps,
19+
} from '../types';
720

8-
// A stack navigators props are the intersection between
9-
// the base navigator props (navgiation, screenProps, etc)
10-
// and the view's props
11-
12-
const defaultContentComponent = (props: Props) => (
21+
const defaultContentComponent = (props: ContentComponentProps) => (
1322
<ScrollView alwaysBounceVertical={false}>
1423
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
1524
<DrawerItems {...props} />
1625
</SafeAreaView>
1726
</ScrollView>
1827
);
1928

20-
const DefaultDrawerConfig = {
29+
const DefaultDrawerConfig: NavigationDrawerConfig = {
2130
drawerWidth: () => {
2231
/*
2332
* Default drawer width is screen width - header height
@@ -49,7 +58,17 @@ const DefaultDrawerConfig = {
4958
statusBarAnimation: 'slide',
5059
};
5160

52-
const DrawerNavigator = (routeConfigs: object, config: any = {}) => {
61+
const DrawerNavigator = (
62+
routeConfigs: NavigationRouteConfigMap<
63+
NavigationDrawerOptions,
64+
NavigationDrawerProp
65+
>,
66+
config: CreateNavigatorConfig<
67+
NavigationDrawerConfig,
68+
NavigationDrawerRouterConfig,
69+
NavigationDrawerProp
70+
> = {}
71+
) => {
5372
const mergedConfig = { ...DefaultDrawerConfig, ...config };
5473
const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);
5574

‎src/routers/DrawerRouter.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
NavigationActions,
44
NavigationAction,
55
NavigationRoute,
6+
NavigationRouteConfigMap,
67
} from 'react-navigation';
78
import * as DrawerActions from './DrawerActions';
89

@@ -34,7 +35,7 @@ const getActiveRouteKey = (route: NavigationRoute): string => {
3435
};
3536

3637
export default (
37-
routeConfigs: object,
38+
routeConfigs: NavigationRouteConfigMap<any, any>,
3839
config: {
3940
unmountInactiveRoutes?: boolean;
4041
resetOnBlur?: boolean;

‎src/types.tsx‎

Lines changed: 94 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,104 @@
1-
import { NavigationAction } from 'react-navigation';
2-
3-
export type Route = {
4-
key: string;
5-
routeName: string;
6-
};
1+
import {
2+
NavigationScreenProp,
3+
NavigationState,
4+
NavigationRoute,
5+
NavigationParams,
6+
NavigationProp,
7+
NavigationDescriptor,
8+
} from 'react-navigation';
9+
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
10+
import Animated from 'react-native-reanimated';
711

812
export type Scene = {
9-
route: Route;
13+
route: NavigationRoute;
1014
index: number;
1115
focused: boolean;
1216
tintColor?: string;
1317
};
1418

15-
export type Navigation = {
16-
state: {
17-
key: string;
18-
index: number;
19-
routes: Route[];
20-
isDrawerOpen: boolean;
21-
};
19+
export type NavigationDrawerState = NavigationState & {
20+
isDrawerOpen: boolean;
21+
};
22+
23+
export type NavigationDrawerProp<
24+
State = NavigationRoute,
25+
Params = NavigationParams
26+
> = NavigationScreenProp<State, Params> & {
2227
openDrawer: () => void;
2328
closeDrawer: () => void;
24-
dispatch: (action: NavigationAction) => boolean;
29+
toggleDrawer: () => void;
30+
jumpTo: (routeName: string, key?: string) => void;
31+
};
32+
33+
export type NavigationDrawerOptions = {
34+
title?: string;
35+
drawerLabel?:
36+
| React.ReactNode
37+
| ((props: { tintColor?: string; focused: boolean }) => React.ReactNode);
38+
drawerIcon?:
39+
| React.ReactNode
40+
| ((props: { tintColor?: string; focused: boolean }) => React.ReactNode);
41+
drawerLockMode?: 'locked-closed' | 'locked-open';
42+
};
43+
44+
export type NavigationDrawerConfig = {
45+
drawerWidth?: number | (() => number);
46+
contentComponent?: React.ComponentType<ContentComponentProps>;
47+
drawerPosition?: 'left' | 'right';
48+
drawerType?: 'front' | 'back' | 'slide';
49+
keyboardDismissMode?: 'none' | 'on-drag';
50+
swipeEdgeWidth?: number;
51+
swipeDistanceThreshold?: number;
52+
swipeVelocityThreshold?: number;
53+
hideStatusBar?: boolean;
54+
statusBarAnimation?: 'slide' | 'none' | 'fade';
55+
drawerBackgroundColor?: ThemedColor;
56+
overlayColor?: ThemedColor;
57+
};
58+
59+
export type NavigationDrawerRouterConfig = {
60+
unmountInactiveRoutes?: boolean;
61+
resetOnBlur?: boolean;
62+
initialRouteName?: string;
63+
contentComponent?: React.ComponentType<ContentComponentProps>;
64+
contentOptions?: object;
65+
};
66+
67+
export type ThemedColor = {
68+
light: string;
69+
dark: string;
70+
};
71+
72+
export type DrawerNavigatorItemsProps = {
73+
items: NavigationRoute[];
74+
activeItemKey?: string | null;
75+
activeTintColor?: string | ThemedColor;
76+
activeBackgroundColor?: string | ThemedColor;
77+
inactiveTintColor?: string | ThemedColor;
78+
inactiveBackgroundColor?: string | ThemedColor;
79+
getLabel: (scene: Scene) => React.ReactNode;
80+
renderIcon: (scene: Scene) => React.ReactNode;
81+
onItemPress: (scene: { route: NavigationRoute; focused: boolean }) => void;
82+
itemsContainerStyle?: StyleProp<ViewStyle>;
83+
itemStyle?: StyleProp<ViewStyle>;
84+
labelStyle?: StyleProp<TextStyle>;
85+
activeLabelStyle?: StyleProp<TextStyle>;
86+
inactiveLabelStyle?: StyleProp<TextStyle>;
87+
iconContainerStyle?: StyleProp<ViewStyle>;
88+
drawerPosition: 'left' | 'right';
89+
};
90+
91+
export type ContentComponentProps = DrawerNavigatorItemsProps & {
92+
navigation: NavigationProp<NavigationDrawerState>;
93+
descriptors: { [key: string]: any };
94+
drawerOpenProgress: Animated.Node<number>;
95+
screenProps: unknown;
96+
};
97+
98+
export type SceneDescriptorMap = {
99+
[key: string]: NavigationDescriptor<
100+
NavigationParams,
101+
NavigationDrawerOptions,
102+
NavigationDrawerProp
103+
>;
25104
};

‎src/views/DrawerNavigatorItems.tsx‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,15 @@
11
import * as React from 'react';
2-
import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
2+
import { View, Text, StyleSheet } from 'react-native';
33
import { SafeAreaView, ThemeContext } from 'react-navigation';
44
import TouchableItem from './TouchableItem';
5-
import { Scene, Route } from '../types';
6-
7-
export type ThemedColor = {
8-
light: string;
9-
dark: string;
10-
};
11-
12-
export type Props = {
13-
items: Route[];
14-
activeItemKey?: string | null;
15-
activeTintColor?: string | ThemedColor;
16-
activeBackgroundColor?: string | ThemedColor;
17-
inactiveTintColor?: string | ThemedColor;
18-
inactiveBackgroundColor?: string | ThemedColor;
19-
getLabel: (scene: Scene) => React.ReactNode;
20-
renderIcon: (scene: Scene) => React.ReactNode;
21-
onItemPress: (scene: { route: Route; focused: boolean }) => void;
22-
itemsContainerStyle?: ViewStyle;
23-
itemStyle?: ViewStyle;
24-
labelStyle?: TextStyle;
25-
activeLabelStyle?: TextStyle;
26-
inactiveLabelStyle?: TextStyle;
27-
iconContainerStyle?: ViewStyle;
28-
drawerPosition: 'left' | 'right';
29-
};
5+
import { DrawerNavigatorItemsProps } from '../types';
306

317
/**
328
* Component that renders the navigation list in the drawer.
339
*/
34-
export default class DrawerNavigatorItems extends React.Component<Props, any> {
10+
export default class DrawerNavigatorItems extends React.Component<
11+
DrawerNavigatorItemsProps
12+
> {
3513
/* Material design specs - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs */
3614
static defaultProps = {
3715
activeTintColor: {

‎src/views/DrawerSidebar.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import * as React from 'react';
2-
import { StyleSheet, View, Animated, ViewStyle } from 'react-native';
3-
import { NavigationActions } from 'react-navigation';
4-
5-
import { Props as DrawerNavigatorItemsProps } from './DrawerNavigatorItems';
6-
import { Navigation, Scene, Route } from '../types';
7-
8-
export type ContentComponentProps = DrawerNavigatorItemsProps & {
9-
navigation: Navigation;
10-
descriptors: { [key: string]: any };
11-
drawerOpenProgress: Animated.AnimatedInterpolation;
12-
screenProps: unknown;
13-
};
2+
import { StyleSheet, View, ViewStyle } from 'react-native';
3+
import {
4+
NavigationActions,
5+
NavigationRoute,
6+
NavigationProp,
7+
} from 'react-navigation';
8+
import Animated from 'react-native-reanimated';
9+
import {
10+
Scene,
11+
NavigationDrawerState,
12+
ContentComponentProps,
13+
SceneDescriptorMap,
14+
} from '../types';
1415

1516
type Props = {
1617
contentComponent?: React.ComponentType<ContentComponentProps>;
1718
contentOptions?: object;
1819
screenProps?: unknown;
19-
navigation: Navigation;
20-
descriptors: { [key: string]: any };
21-
drawerOpenProgress: Animated.AnimatedInterpolation;
20+
navigation: NavigationProp<NavigationDrawerState>;
21+
descriptors: SceneDescriptorMap;
22+
drawerOpenProgress: Animated.Node<number>;
2223
drawerPosition: 'left' | 'right';
2324
style?: ViewStyle;
2425
};
@@ -68,10 +69,11 @@ class DrawerSidebar extends React.PureComponent<Props> {
6869
route,
6970
focused,
7071
}: {
71-
route: Route;
72+
route: NavigationRoute;
7273
focused: boolean;
7374
}) => {
7475
if (focused) {
76+
// @ts-ignore
7577
this.props.navigation.closeDrawer();
7678
} else {
7779
this.props.navigation.dispatch(

‎src/views/DrawerView.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,15 @@ import {
99
import { ScreenContainer } from 'react-native-screens';
1010

1111
import * as DrawerActions from '../routers/DrawerActions';
12-
import DrawerSidebar, { ContentComponentProps } from './DrawerSidebar';
12+
import DrawerSidebar from './DrawerSidebar';
1313
import DrawerGestureContext from '../utils/DrawerGestureContext';
1414
import ResourceSavingScene from './ResourceSavingScene';
1515
import Drawer from './Drawer';
16-
import { Navigation } from '../types';
16+
import {
17+
NavigationDrawerState,
18+
ContentComponentProps,
19+
SceneDescriptorMap,
20+
} from '../types';
1721
import { PanGestureHandler } from 'react-native-gesture-handler';
1822

1923
type DrawerOptions = {
@@ -37,14 +41,8 @@ type DrawerOptions = {
3741

3842
type Props = {
3943
lazy: boolean;
40-
navigation: Navigation;
41-
descriptors: {
42-
[key: string]: {
43-
navigation: NavigationProp<any>;
44-
getComponent: () => React.ComponentType<{}>;
45-
options: DrawerOptions;
46-
};
47-
};
44+
navigation: NavigationProp<NavigationDrawerState>;
45+
descriptors: SceneDescriptorMap;
4846
navigationConfig: DrawerOptions & {
4947
contentComponent?: React.ComponentType<ContentComponentProps>;
5048
unmountInactiveRoutes?: boolean;

0 commit comments

Comments
 (0)