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

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: react-navigation/navigation-ex
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: @react-navigation/[email protected]
Choose a base ref
...
head repository: react-navigation/navigation-ex
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: @react-navigation/[email protected]
Choose a head ref
  • 4 commits
  • 29 files changed
  • 2 contributors

Commits on Nov 2, 2019

  1. Copy the full SHA
    3a4c38b View commit details

Commits on Nov 4, 2019

  1. refactor: replace XComponent props in favor of render callbacks

    Making these props components makes it impossible pass additional props to them from the parent component. Render callbacks are more dynamic and flexible for this case
    satya164 committed Nov 4, 2019
    Copy the full SHA
    57b411c View commit details
  2. Copy the full SHA
    a93a81e View commit details
  3. chore: publish

     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
     - @react-navigation/[email protected]
    satya164 committed Nov 4, 2019
    Copy the full SHA
    c41c824 View commit details
8 changes: 8 additions & 0 deletions packages/bottom-tabs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.17...@react-navigation/bottom-tabs@5.0.0-alpha.18) (2019-11-04)

**Note:** Version bump only for package @react-navigation/bottom-tabs





# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.16...@react-navigation/bottom-tabs@5.0.0-alpha.17) (2019-10-30)


4 changes: 2 additions & 2 deletions packages/bottom-tabs/package.json
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
"android",
"tab"
],
"version": "5.0.0-alpha.17",
"version": "5.0.0-alpha.18",
"license": "MIT",
"repository": {
"type": "git",
@@ -33,7 +33,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/routers": "^5.0.0-alpha.11"
"@react-navigation/routers": "^5.0.0-alpha.12"
},
"devDependencies": {
"@react-native-community/bob": "^0.7.0",
22 changes: 13 additions & 9 deletions packages/bottom-tabs/src/types.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import {
TouchableWithoutFeedbackProps,
AccessibilityRole,
AccessibilityStates,
StyleProp,
@@ -101,9 +102,10 @@ export type BottomTabNavigationOptions = {
tabBarVisible?: boolean;

/**
* Buttton component to render for the tab items instead of the default `TouchableWithoutFeedback`
* Function which returns a React element to render as the tab bar button.
* Renders `TouchableWithoutFeedback` by default.
*/
tabBarButtonComponent?: React.ComponentType<any>;
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
};

export type BottomTabDescriptor = Descriptor<
@@ -129,9 +131,9 @@ export type BottomTabNavigationConfig = {
*/
unmountInactiveScreens?: boolean;
/**
* Custom tab bar component.
* Function that returns a React element to display as the tab bar.
*/
tabBarComponent?: React.ComponentType<BottomTabBarProps>;
tabBar?: (props: BottomTabBarProps) => React.ReactNode;
/**
* Options for the tab bar which will be passed as props to the tab bar component.
*/
@@ -213,9 +215,6 @@ export type BottomTabBarProps = BottomTabBarOptions & {
route: Route<string>;
focused: boolean;
}) => AccessibilityStates[];
getButtonComponent: (props: {
route: Route<string>;
}) => React.ComponentType<any> | undefined;
getLabelText: (props: {
route: Route<string>;
}) =>
@@ -225,12 +224,17 @@ export type BottomTabBarProps = BottomTabBarOptions & {
}) => React.ReactNode | undefined)
| React.ReactNode;
getTestID: (props: { route: Route<string> }) => string | undefined;
renderButton: (
props: { route: Route<string> } & BottomTabBarButtonProps
) => React.ReactNode;
renderIcon: (props: {
route: Route<string>;
focused: boolean;
color: string;
size: number;
}) => React.ReactNode;
activeTintColor: string;
inactiveTintColor: string;
};

export type BottomTabBarButtonProps = TouchableWithoutFeedbackProps & {
children: React.ReactNode;
};
45 changes: 25 additions & 20 deletions packages/bottom-tabs/src/views/BottomTabBar.tsx
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ import { SafeAreaConsumer } from 'react-native-safe-area-context';

import TabBarIcon from './TabBarIcon';
import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
import { BottomTabBarProps } from '../types';
import { BottomTabBarProps, BottomTabBarButtonProps } from '../types';

type State = {
dimensions: { height: number; width: number };
@@ -23,7 +23,10 @@ type State = {
visible: Animated.Value;
};

type Props = BottomTabBarProps;
type Props = BottomTabBarProps & {
activeTintColor: string;
inactiveTintColor: string;
};

const majorVersion = parseInt(Platform.Version as string, 10);
const isIos = Platform.OS === 'ios';
@@ -262,7 +265,9 @@ export default class TabBarBottom extends React.Component<Props, State> {
getAccessibilityLabel,
getAccessibilityRole,
getAccessibilityStates,
getButtonComponent,
renderButton = (props: BottomTabBarButtonProps) => (
<TouchableWithoutFeedbackWrapper {...props} />
),
getTestID,
style,
tabStyle,
@@ -325,34 +330,34 @@ export default class TabBarBottom extends React.Component<Props, State> {
? activeBackgroundColor
: inactiveBackgroundColor;

const ButtonComponent =
getButtonComponent({ route }) ||
TouchableWithoutFeedbackWrapper;

return (
<NavigationContext.Provider
key={route.key}
value={descriptors[route.key].navigation}
>
<ButtonComponent
onPress={() => onTabPress({ route })}
onLongPress={() => onTabLongPress({ route })}
testID={testID}
accessibilityLabel={accessibilityLabel}
accessibilityRole={accessibilityRole}
accessibilityStates={accessibilityStates}
style={[
{renderButton({
route,
onPress: () => onTabPress({ route }),
onLongPress: () => onTabLongPress({ route }),
testID,
accessibilityLabel,
accessibilityRole,
accessibilityStates,
style: [
styles.tab,
{ backgroundColor },
this.shouldUseHorizontalLabels()
? styles.tabLandscape
: styles.tabPortrait,
tabStyle,
]}
>
{this.renderIcon(scene)}
{this.renderLabel(scene)}
</ButtonComponent>
],
children: (
<React.Fragment>
{this.renderIcon(scene)}
{this.renderLabel(scene)}
</React.Fragment>
),
})}
</NavigationContext.Provider>
);
})}
47 changes: 25 additions & 22 deletions packages/bottom-tabs/src/views/BottomTabView.tsx
Original file line number Diff line number Diff line change
@@ -11,13 +11,15 @@ import { TabNavigationState } from '@react-navigation/routers';
import { ScreenContainer } from 'react-native-screens';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import ResourceSavingScene from './ResourceSavingScene';
import BottomTabBar from './BottomTabBar';
import {
BottomTabNavigationConfig,
BottomTabDescriptorMap,
BottomTabNavigationHelpers,
BottomTabBarProps,
BottomTabBarButtonProps,
} from '../types';
import ResourceSavingScene from './ResourceSavingScene';

type Props = BottomTabNavigationConfig & {
state: TabNavigationState;
@@ -49,13 +51,16 @@ export default class BottomTabView extends React.Component<Props, State> {
loaded: [this.props.state.index],
};

private getButtonComponent = ({ route }: { route: Route<string> }) => {
private renderButton = ({
route,
...rest
}: { route: Route<string> } & BottomTabBarButtonProps) => {
const { descriptors } = this.props;
const descriptor = descriptors[route.key];
const options = descriptor.options;

if (options.tabBarButtonComponent) {
return options.tabBarButtonComponent;
if (options.tabBarButton) {
return options.tabBarButton(rest);
}

return undefined;
@@ -159,7 +164,7 @@ export default class BottomTabView extends React.Component<Props, State> {

private renderTabBar = () => {
const {
tabBarComponent: TabBarComponent = BottomTabBar,
tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
tabBarOptions,
state,
navigation,
@@ -174,23 +179,21 @@ export default class BottomTabView extends React.Component<Props, State> {
return null;
}

return (
<TabBarComponent
{...tabBarOptions}
state={state}
descriptors={descriptors}
navigation={navigation}
onTabPress={this.handleTabPress}
onTabLongPress={this.handleTabLongPress}
getLabelText={this.getLabelText}
getButtonComponent={this.getButtonComponent}
getAccessibilityLabel={this.getAccessibilityLabel}
getAccessibilityRole={this.getAccessibilityRole}
getAccessibilityStates={this.getAccessibilityStates}
getTestID={this.getTestID}
renderIcon={this.renderIcon}
/>
);
return tabBar({
...tabBarOptions,
state: state,
descriptors: descriptors,
navigation: navigation,
onTabPress: this.handleTabPress,
onTabLongPress: this.handleTabLongPress,
getLabelText: this.getLabelText,
getAccessibilityLabel: this.getAccessibilityLabel,
getAccessibilityRole: this.getAccessibilityRole,
getAccessibilityStates: this.getAccessibilityStates,
getTestID: this.getTestID,
renderButton: this.renderButton,
renderIcon: this.renderIcon,
});
};

render() {
8 changes: 8 additions & 0 deletions packages/compat/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [5.0.0-alpha.12](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.11...@react-navigation/compat@5.0.0-alpha.12) (2019-11-04)

**Note:** Version bump only for package @react-navigation/compat





# [5.0.0-alpha.11](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.10...@react-navigation/compat@5.0.0-alpha.11) (2019-10-30)


4 changes: 2 additions & 2 deletions packages/compat/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@react-navigation/compat",
"description": "Compatibility layer to write navigator definitions in static configuration format",
"version": "5.0.0-alpha.11",
"version": "5.0.0-alpha.12",
"license": "MIT",
"repository": {
"type": "git",
@@ -24,7 +24,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/routers": "^5.0.0-alpha.11"
"@react-navigation/routers": "^5.0.0-alpha.12"
},
"devDependencies": {
"@types/react": "^16.9.4",
8 changes: 8 additions & 0 deletions packages/drawer/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.19...@react-navigation/drawer@5.0.0-alpha.20) (2019-11-04)

**Note:** Version bump only for package @react-navigation/drawer





# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.18...@react-navigation/drawer@5.0.0-alpha.19) (2019-11-02)

**Note:** Version bump only for package @react-navigation/drawer
4 changes: 2 additions & 2 deletions packages/drawer/package.json
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
"material",
"drawer"
],
"version": "5.0.0-alpha.19",
"version": "5.0.0-alpha.20",
"license": "MIT",
"repository": {
"type": "git",
@@ -34,7 +34,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/routers": "^5.0.0-alpha.11"
"@react-navigation/routers": "^5.0.0-alpha.12"
},
"devDependencies": {
"@react-native-community/bob": "^0.7.0",
8 changes: 4 additions & 4 deletions packages/drawer/src/types.tsx
Original file line number Diff line number Diff line change
@@ -69,14 +69,14 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
*/
unmountInactiveScreens?: boolean;
/**
* Custom component used to render as the content of the drawer, for example, navigation items.
* Defaults to `DrawerItems`.
* Function that returns React element to render as the content of the drawer, for example, navigation items.
* Defaults to `DrawerContent`.
*/
contentComponent: React.ComponentType<DrawerContentComponentProps<T>>;
drawerContent: (props: DrawerContentComponentProps<T>) => React.ReactNode;
/**
* Options for the content component which will be passed as props.
*/
contentOptions?: T;
drawerContentOptions?: T;
/**
* Style object for the component wrapping the screen content.
*/
27 changes: 14 additions & 13 deletions packages/drawer/src/views/DrawerView.tsx
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@ import {
DrawerDescriptorMap,
DrawerNavigationConfig,
DrawerNavigationHelpers,
DrawerContentComponentProps,
} from '../types';

type Props = Omit<DrawerNavigationConfig, 'overlayColor'> & {
@@ -64,7 +65,9 @@ const getDefaultDrawerWidth = ({
export default class DrawerView extends React.PureComponent<Props, State> {
static defaultProps = {
lazy: true,
contentComponent: DrawerContent,
drawerContent: (props: DrawerContentComponentProps) => (
<DrawerContent {...props} />
),
drawerPosition: I18nManager.isRTL ? 'right' : 'left',
keyboardDismissMode: 'on-drag',
overlayColor: 'rgba(0, 0, 0, 0.5)',
@@ -135,20 +138,18 @@ export default class DrawerView extends React.PureComponent<Props, State> {
navigation,
descriptors,
drawerPosition,
contentComponent: ContentComponent,
contentOptions,
drawerContent,
drawerContentOptions,
} = this.props;

return (
<ContentComponent
progress={progress}
state={state}
navigation={navigation}
descriptors={descriptors}
drawerPosition={drawerPosition}
{...contentOptions}
/>
);
return drawerContent({
...drawerContentOptions,
progress: progress,
state: state,
navigation: navigation,
descriptors: descriptors,
drawerPosition: drawerPosition,
});
};

private renderContent = () => {
Loading