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

Commit

Permalink
fix: fix typescript definitions (#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 authored Sep 11, 2019
1 parent b76870e commit 4776adb
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 86 deletions.
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react-native-gesture-handler": "~1.3.0",
"react-native-paper": "^3.0.0-alpha.4",
"react-native-reanimated": "~1.1.0",
"react-navigation": "^4.0.2",
"react-navigation": "^4.0.3",
"react-navigation-stack": "^1.5.4"
},
"devDependencies": {
Expand Down
8 changes: 4 additions & 4 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4318,10 +4318,10 @@ react-navigation-stack@^1.5.4:
dependencies:
prop-types "^15.7.2"

react-navigation@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6"
integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g==
react-navigation@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
dependencies:
"@react-navigation/core" "^3.5.0"
"@react-navigation/native" "^3.6.2"
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@
"react-native-gesture-handler": "^1.4.1",
"react-native-paper": "^3.0.0-alpha.4",
"react-native-reanimated": "^1.2.0",
"react-navigation": "^4.0.1",
"react-navigation": "^4.0.3",
"release-it": "^12.3.6",
"typescript": "^3.5.2"
},
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-paper": "^2.2.2 || ^3.0.0-alpha.1",
"react-navigation": "^4.0.2"
"react-navigation": "^4.0.3"
},
"husky": {
"hooks": {
Expand Down
78 changes: 23 additions & 55 deletions src/navigators/createMaterialBottomTabNavigator.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import {
TabRouter,
StackActions,
Expand All @@ -10,57 +9,18 @@ import {
NavigationScreenProp,
NavigationRoute,
NavigationDescriptor,
NavigationRouteConfigMap,
NavigationParams,
CreateNavigatorConfig,
NavigationTabRouterConfig,
} from 'react-navigation';
import MaterialBottomTabView from '../views/MaterialBottomTabView';

type NavigationMaterialBottomTabOptions = {
shifting?: boolean;
labeled?: boolean;
activeColor?: string;
activeColorLight?: string;
activeColorDark?: string;
inactiveColor?: string;
inactiveColorLight?: string;
inactiveColorDark?: string;
barStyle?: StyleProp<ViewStyle>;
barStyleLight?: StyleProp<ViewStyle>;
barStyleDark?: StyleProp<ViewStyle>;
title?: string;
tabBarLabel?: React.ReactNode;
tabBarVisible?: boolean;
tabBarAccessibilityLabel?: string;
tabBarTestID?: string;
tabBarIcon?:
| React.ReactNode
| ((props: {
focused: boolean;
tintColor?: string;
horizontal?: boolean;
}) => React.ReactNode);
tabBarOnPress?: (props: {
navigation: NavigationScreenProp<any>;
defaultHandler: () => void;
}) => void;
};

type Screen<
Options extends NavigationMaterialBottomTabOptions
> = React.ComponentType<any> & {
navigationOptions?: Options & {
[key: string]: any;
};
};

type RouteConfig<Options> = {
[key: string]:
| Screen<Options>
| ({ screen: Screen<Options> } | { getScreen(): Screen<Options> }) & {
path?: string;
navigationOptions?:
| Options
| ((options: { navigation: NavigationScreenProp<any> }) => Options);
};
};
import {
NavigationMaterialBottomTabOptions,
NavigationTabState,
NavigationMaterialBottomTabConfig,
NavigationTabProp,
} from '../types';

export type RenderIconProps = {
route: NavigationRoute<any>;
Expand All @@ -70,11 +30,12 @@ export type RenderIconProps = {
};

export type NavigationViewProps = {
navigation: NavigationProp<any>;
navigation: NavigationProp<NavigationTabState>;
descriptors: {
[key: string]: NavigationDescriptor<
any,
NavigationMaterialBottomTabOptions
NavigationParams,
NavigationMaterialBottomTabOptions,
NavigationTabProp
>;
};
screenProps?: unknown;
Expand All @@ -91,8 +52,15 @@ export type NavigationViewProps = {
};

export default function createMaterialBottomTabNavigator(
routes: RouteConfig<NavigationMaterialBottomTabOptions>,
config: NavigationMaterialBottomTabOptions
routes: NavigationRouteConfigMap<
NavigationMaterialBottomTabOptions,
NavigationTabProp
>,
config: CreateNavigatorConfig<
NavigationMaterialBottomTabConfig,
NavigationTabRouterConfig,
NavigationMaterialBottomTabOptions
> = {}
) {
class NavigationView extends React.Component<NavigationViewProps> {
_renderScene = ({ route }: { route: { key: string } }) => {
Expand Down
87 changes: 87 additions & 0 deletions src/types.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { StyleProp, ViewStyle } from 'react-native';
import {
NavigationRoute,
NavigationState,
NavigationScreenProp,
NavigationParams,
} from 'react-navigation';

export type NavigationTabState = NavigationState;

export type NavigationTabProp<
State = NavigationRoute,
Params = NavigationParams
> = NavigationScreenProp<State, Params> & {
jumpTo(routeName: string, key?: string): void;
};

export type NavigationMaterialBottomTabOptions = {
shifting?: boolean;
labeled?: boolean;
activeColor?: string;
activeColorLight?: string;
activeColorDark?: string;
inactiveColor?: string;
inactiveColorLight?: string;
inactiveColorDark?: string;
barStyle?: StyleProp<ViewStyle>;
barStyleLight?: StyleProp<ViewStyle>;
barStyleDark?: StyleProp<ViewStyle>;
title?: string;
tabBarLabel?: React.ReactNode;
tabBarVisible?: boolean;
tabBarAccessibilityLabel?: string;
tabBarTestID?: string;
tabBarIcon?:
| React.ReactNode
| ((props: {
focused: boolean;
tintColor?: string;
horizontal?: boolean;
}) => React.ReactNode);
tabBarOnPress?: (props: {
navigation: NavigationTabProp;
defaultHandler: () => void;
}) => void;
};

export type NavigationMaterialBottomTabConfig = {
/**
* Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.
* By default, this is `true` when you have more than 3 tabs.
*/
shifting?: boolean;
/**
* Whether to show labels in tabs. When `false`, only icons will be displayed.
*/
labeled?: boolean;
/**
* Custom color for icon and label in the active tab.
*/
activeColor?: string;
activeColorLight?: string;
activeColorDark?: string;
/**
* Custom color for icon and label in the inactive tab.
*/
inactiveColor?: string;
inactiveColorLight?: string;
inactiveColorDark?: string;
/**
* Whether the bottom navigation bar is hidden when keyboard is shown.
* On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
*/
keyboardHidesNavigationBar?: boolean;
/**
* Style for the bottom navigation bar.
* You can set a bottom padding here if you have a translucent navigation bar on Android:
*
* ```js
* barStyle={{ paddingBottom: 48 }}
* ```
*/
barStyle?: StyleProp<ViewStyle>;
barStyleLight?: StyleProp<ViewStyle>;
barStyleDark?: StyleProp<ViewStyle>;
style?: StyleProp<ViewStyle>;
};
32 changes: 12 additions & 20 deletions src/views/MaterialBottomTabView.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import {
ThemeContext,
NavigationRoute,
NavigationProp,
NavigationDescriptor,
} from 'react-navigation';
import { BottomNavigation } from 'react-native-paper';
import { NavigationMaterialBottomTabConfig } from '../types';

type Options = {
tabBarVisible?: boolean;
Expand All @@ -15,25 +15,17 @@ type Options = {
tabBarColorDark?: string;
};

type Props = React.ComponentProps<typeof BottomNavigation> & {
navigation: NavigationProp<any>;
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
screenProps?: unknown;
renderIcon: (options: {
route: NavigationRoute;
focused: boolean;
tintColor: string;
}) => React.ReactNode;
activeColor?: string;
activeColorLight?: string;
activeColorDark?: string;
inactiveColor?: string;
inactiveColorLight?: string;
inactiveColorDark?: string;
barStyle?: StyleProp<ViewStyle>;
barStyleLight?: StyleProp<ViewStyle>;
barStyleDark?: StyleProp<ViewStyle>;
};
type Props = React.ComponentProps<typeof BottomNavigation> &
NavigationMaterialBottomTabConfig & {
navigation: NavigationProp<any>;
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
screenProps?: unknown;
renderIcon: (options: {
route: NavigationRoute;
focused: boolean;
tintColor: string;
}) => React.ReactNode;
};

export default class MaterialBottomTabView extends React.Component<Props> {
static contextType = ThemeContext;
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7378,10 +7378,10 @@ react-native@~0.59.8:
xmldoc "^0.4.0"
yargs "^9.0.0"

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

0 comments on commit 4776adb

Please sign in to comment.