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

Commit 4776adb

Browse files
satya164satya164
authored
fix: fix typescript definitions (#54)
1 parent b76870e commit 4776adb

7 files changed

Lines changed: 133 additions & 86 deletions

File tree

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"react-native-gesture-handler": "~1.3.0",
2020
"react-native-paper": "^3.0.0-alpha.4",
2121
"react-native-reanimated": "~1.1.0",
22-
"react-navigation": "^4.0.2",
22+
"react-navigation": "^4.0.3",
2323
"react-navigation-stack": "^1.5.4"
2424
},
2525
"devDependencies": {

‎example/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4318,10 +4318,10 @@ react-navigation-stack@^1.5.4:
43184318
dependencies:
43194319
prop-types "^15.7.2"
43204320

4321-
react-navigation@^4.0.2:
4322-
version "4.0.2"
4323-
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6"
4324-
integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g==
4321+
react-navigation@^4.0.3:
4322+
version "4.0.3"
4323+
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
4324+
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
43254325
dependencies:
43264326
"@react-navigation/core" "^3.5.0"
43274327
"@react-navigation/native" "^3.6.2"

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@
6060
"react-native-gesture-handler": "^1.4.1",
6161
"react-native-paper": "^3.0.0-alpha.4",
6262
"react-native-reanimated": "^1.2.0",
63-
"react-navigation": "^4.0.1",
63+
"react-navigation": "^4.0.3",
6464
"release-it": "^12.3.6",
6565
"typescript": "^3.5.2"
6666
},
6767
"peerDependencies": {
6868
"react": "*",
6969
"react-native": "*",
7070
"react-native-paper": "^2.2.2 || ^3.0.0-alpha.1",
71-
"react-navigation": "^4.0.2"
71+
"react-navigation": "^4.0.3"
7272
},
7373
"husky": {
7474
"hooks": {

‎src/navigators/createMaterialBottomTabNavigator.tsx‎

Lines changed: 23 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import { StyleProp, ViewStyle } from 'react-native';
32
import {
43
TabRouter,
54
StackActions,
@@ -10,57 +9,18 @@ import {
109
NavigationScreenProp,
1110
NavigationRoute,
1211
NavigationDescriptor,
12+
NavigationRouteConfigMap,
13+
NavigationParams,
14+
CreateNavigatorConfig,
15+
NavigationTabRouterConfig,
1316
} from 'react-navigation';
1417
import MaterialBottomTabView from '../views/MaterialBottomTabView';
15-
16-
type NavigationMaterialBottomTabOptions = {
17-
shifting?: boolean;
18-
labeled?: boolean;
19-
activeColor?: string;
20-
activeColorLight?: string;
21-
activeColorDark?: string;
22-
inactiveColor?: string;
23-
inactiveColorLight?: string;
24-
inactiveColorDark?: string;
25-
barStyle?: StyleProp<ViewStyle>;
26-
barStyleLight?: StyleProp<ViewStyle>;
27-
barStyleDark?: StyleProp<ViewStyle>;
28-
title?: string;
29-
tabBarLabel?: React.ReactNode;
30-
tabBarVisible?: boolean;
31-
tabBarAccessibilityLabel?: string;
32-
tabBarTestID?: string;
33-
tabBarIcon?:
34-
| React.ReactNode
35-
| ((props: {
36-
focused: boolean;
37-
tintColor?: string;
38-
horizontal?: boolean;
39-
}) => React.ReactNode);
40-
tabBarOnPress?: (props: {
41-
navigation: NavigationScreenProp<any>;
42-
defaultHandler: () => void;
43-
}) => void;
44-
};
45-
46-
type Screen<
47-
Options extends NavigationMaterialBottomTabOptions
48-
> = React.ComponentType<any> & {
49-
navigationOptions?: Options & {
50-
[key: string]: any;
51-
};
52-
};
53-
54-
type RouteConfig<Options> = {
55-
[key: string]:
56-
| Screen<Options>
57-
| ({ screen: Screen<Options> } | { getScreen(): Screen<Options> }) & {
58-
path?: string;
59-
navigationOptions?:
60-
| Options
61-
| ((options: { navigation: NavigationScreenProp<any> }) => Options);
62-
};
63-
};
18+
import {
19+
NavigationMaterialBottomTabOptions,
20+
NavigationTabState,
21+
NavigationMaterialBottomTabConfig,
22+
NavigationTabProp,
23+
} from '../types';
6424

6525
export type RenderIconProps = {
6626
route: NavigationRoute<any>;
@@ -70,11 +30,12 @@ export type RenderIconProps = {
7030
};
7131

7232
export type NavigationViewProps = {
73-
navigation: NavigationProp<any>;
33+
navigation: NavigationProp<NavigationTabState>;
7434
descriptors: {
7535
[key: string]: NavigationDescriptor<
76-
any,
77-
NavigationMaterialBottomTabOptions
36+
NavigationParams,
37+
NavigationMaterialBottomTabOptions,
38+
NavigationTabProp
7839
>;
7940
};
8041
screenProps?: unknown;
@@ -91,8 +52,15 @@ export type NavigationViewProps = {
9152
};
9253

9354
export default function createMaterialBottomTabNavigator(
94-
routes: RouteConfig<NavigationMaterialBottomTabOptions>,
95-
config: NavigationMaterialBottomTabOptions
55+
routes: NavigationRouteConfigMap<
56+
NavigationMaterialBottomTabOptions,
57+
NavigationTabProp
58+
>,
59+
config: CreateNavigatorConfig<
60+
NavigationMaterialBottomTabConfig,
61+
NavigationTabRouterConfig,
62+
NavigationMaterialBottomTabOptions
63+
> = {}
9664
) {
9765
class NavigationView extends React.Component<NavigationViewProps> {
9866
_renderScene = ({ route }: { route: { key: string } }) => {

‎src/types.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { StyleProp, ViewStyle } from 'react-native';
2+
import {
3+
NavigationRoute,
4+
NavigationState,
5+
NavigationScreenProp,
6+
NavigationParams,
7+
} from 'react-navigation';
8+
9+
export type NavigationTabState = NavigationState;
10+
11+
export type NavigationTabProp<
12+
State = NavigationRoute,
13+
Params = NavigationParams
14+
> = NavigationScreenProp<State, Params> & {
15+
jumpTo(routeName: string, key?: string): void;
16+
};
17+
18+
export type NavigationMaterialBottomTabOptions = {
19+
shifting?: boolean;
20+
labeled?: boolean;
21+
activeColor?: string;
22+
activeColorLight?: string;
23+
activeColorDark?: string;
24+
inactiveColor?: string;
25+
inactiveColorLight?: string;
26+
inactiveColorDark?: string;
27+
barStyle?: StyleProp<ViewStyle>;
28+
barStyleLight?: StyleProp<ViewStyle>;
29+
barStyleDark?: StyleProp<ViewStyle>;
30+
title?: string;
31+
tabBarLabel?: React.ReactNode;
32+
tabBarVisible?: boolean;
33+
tabBarAccessibilityLabel?: string;
34+
tabBarTestID?: string;
35+
tabBarIcon?:
36+
| React.ReactNode
37+
| ((props: {
38+
focused: boolean;
39+
tintColor?: string;
40+
horizontal?: boolean;
41+
}) => React.ReactNode);
42+
tabBarOnPress?: (props: {
43+
navigation: NavigationTabProp;
44+
defaultHandler: () => void;
45+
}) => void;
46+
};
47+
48+
export type NavigationMaterialBottomTabConfig = {
49+
/**
50+
* Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.
51+
* By default, this is `true` when you have more than 3 tabs.
52+
*/
53+
shifting?: boolean;
54+
/**
55+
* Whether to show labels in tabs. When `false`, only icons will be displayed.
56+
*/
57+
labeled?: boolean;
58+
/**
59+
* Custom color for icon and label in the active tab.
60+
*/
61+
activeColor?: string;
62+
activeColorLight?: string;
63+
activeColorDark?: string;
64+
/**
65+
* Custom color for icon and label in the inactive tab.
66+
*/
67+
inactiveColor?: string;
68+
inactiveColorLight?: string;
69+
inactiveColorDark?: string;
70+
/**
71+
* Whether the bottom navigation bar is hidden when keyboard is shown.
72+
* On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
73+
*/
74+
keyboardHidesNavigationBar?: boolean;
75+
/**
76+
* Style for the bottom navigation bar.
77+
* You can set a bottom padding here if you have a translucent navigation bar on Android:
78+
*
79+
* ```js
80+
* barStyle={{ paddingBottom: 48 }}
81+
* ```
82+
*/
83+
barStyle?: StyleProp<ViewStyle>;
84+
barStyleLight?: StyleProp<ViewStyle>;
85+
barStyleDark?: StyleProp<ViewStyle>;
86+
style?: StyleProp<ViewStyle>;
87+
};

‎src/views/MaterialBottomTabView.tsx‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
2-
import { StyleProp, ViewStyle } from 'react-native';
32
import {
43
ThemeContext,
54
NavigationRoute,
65
NavigationProp,
76
NavigationDescriptor,
87
} from 'react-navigation';
98
import { BottomNavigation } from 'react-native-paper';
9+
import { NavigationMaterialBottomTabConfig } from '../types';
1010

1111
type Options = {
1212
tabBarVisible?: boolean;
@@ -15,25 +15,17 @@ type Options = {
1515
tabBarColorDark?: string;
1616
};
1717

18-
type Props = React.ComponentProps<typeof BottomNavigation> & {
19-
navigation: NavigationProp<any>;
20-
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
21-
screenProps?: unknown;
22-
renderIcon: (options: {
23-
route: NavigationRoute;
24-
focused: boolean;
25-
tintColor: string;
26-
}) => React.ReactNode;
27-
activeColor?: string;
28-
activeColorLight?: string;
29-
activeColorDark?: string;
30-
inactiveColor?: string;
31-
inactiveColorLight?: string;
32-
inactiveColorDark?: string;
33-
barStyle?: StyleProp<ViewStyle>;
34-
barStyleLight?: StyleProp<ViewStyle>;
35-
barStyleDark?: StyleProp<ViewStyle>;
36-
};
18+
type Props = React.ComponentProps<typeof BottomNavigation> &
19+
NavigationMaterialBottomTabConfig & {
20+
navigation: NavigationProp<any>;
21+
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
22+
screenProps?: unknown;
23+
renderIcon: (options: {
24+
route: NavigationRoute;
25+
focused: boolean;
26+
tintColor: string;
27+
}) => React.ReactNode;
28+
};
3729

3830
export default class MaterialBottomTabView extends React.Component<Props> {
3931
static contextType = ThemeContext;

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7378,10 +7378,10 @@ react-native@~0.59.8:
73787378
xmldoc "^0.4.0"
73797379
yargs "^9.0.0"
73807380

7381-
react-navigation@^4.0.1:
7382-
version "4.0.2"
7383-
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6"
7384-
integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g==
7381+
react-navigation@^4.0.3:
7382+
version "4.0.3"
7383+
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
7384+
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
73857385
dependencies:
73867386
"@react-navigation/core" "^3.5.0"
73877387
"@react-navigation/native" "^3.6.2"

0 commit comments

Comments
 (0)