Compare commits

..

6 Commits

Author SHA1 Message Date
Satyajit Sahoo
e87925c086 chore: publish
- @react-navigation/bottom-tabs@5.0.0-alpha.23
 - @react-navigation/core@5.0.0-alpha.26
 - @react-navigation/drawer@5.0.0-alpha.25
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.22
 - @react-navigation/material-top-tabs@5.0.0-alpha.20
 - @react-navigation/native-stack@5.0.0-alpha.15
 - @react-navigation/stack@5.0.0-alpha.40
2019-12-07 05:23:12 +01:00
Satyajit Sahoo
7b13a81ac8 fix: don't handle replace if screen to replace with isn't present
fixes #193
2019-12-07 05:22:19 +01:00
Satyajit Sahoo
d618ab382e feat: export underlying views used to build navigators (#191)
Exporting the underlying views makes it easy to build custom navigators on top of our views. Libraries such as react-native-router-flux rely on such exports to build custom routing solutions while being able to take advantage of our work.

This can also be the solution to adding custom behaviour without us needing to add separate config to override the router.
2019-12-04 00:22:53 +01:00
Satyajit Sahoo
c7a5cfd5b2 chore: publish
- @react-navigation/stack@5.0.0-alpha.39
2019-12-03 20:40:35 +01:00
Satyajit Sahoo
87d445b4e4 fix: disable pointerEvents on header when not focused 2019-12-03 20:33:41 +01:00
Satyajit Sahoo
eaf88478cc fix: correctly update layout on onLayout events 2019-12-03 20:32:38 +01:00
31 changed files with 209 additions and 100 deletions

View File

@@ -3,6 +3,17 @@
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.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.22...@react-navigation/bottom-tabs@5.0.0-alpha.23) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.21...@react-navigation/bottom-tabs@5.0.0-alpha.22) (2019-11-17)

View File

@@ -10,7 +10,7 @@
"android",
"tab"
],
"version": "5.0.0-alpha.22",
"version": "5.0.0-alpha.23",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -6,6 +6,7 @@ export { default as createBottomTabNavigator } from './navigators/createBottomTa
/**
* Views
*/
export { default as BottomTabView } from './views/BottomTabView';
export { default as BottomTabBar } from './views/BottomTabBar';
/**

View File

@@ -3,6 +3,17 @@
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.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.25...@react-navigation/core@5.0.0-alpha.26) (2019-12-07)
### Bug Fixes
* don't handle replace if screen to replace with isn't present ([7b13a81](https://github.com/react-navigation/navigation-ex/commit/7b13a81ac8260879c8658be5704f46db59a72c73)), closes [#193](https://github.com/react-navigation/navigation-ex/issues/193)
# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.24...@react-navigation/core@5.0.0-alpha.25) (2019-11-29)

View File

@@ -6,7 +6,7 @@
"react-native",
"react-navigation"
],
"version": "5.0.0-alpha.25",
"version": "5.0.0-alpha.26",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -22,6 +22,10 @@ const BaseRouter = {
const { name, key, params } = action.payload;
if (!state.routeNames.includes(name)) {
return null;
}
return {
...state,
routes: state.routes.map((route, i) =>

View File

@@ -65,6 +65,15 @@ it("doesn't handle REPLACE if source key isn't present", () => {
expect(result).toBe(null);
});
it("doesn't handle REPLACE if screen to replace with isn't present", () => {
const result = BaseRouter.getStateForAction(
STATE,
CommonActions.replace('nonexistent', { answer: 42 })
);
expect(result).toBe(null);
});
it('sets params for the focused screen with SET_PARAMS', () => {
const result = BaseRouter.getStateForAction(
STATE,

View File

@@ -3,6 +3,17 @@
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.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.24...@react-navigation/drawer@5.0.0-alpha.25) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.23...@react-navigation/drawer@5.0.0-alpha.24) (2019-11-27)

View File

@@ -11,7 +11,7 @@
"material",
"drawer"
],
"version": "5.0.0-alpha.24",
"version": "5.0.0-alpha.25",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -6,10 +6,10 @@ export { default as createDrawerNavigator } from './navigators/createDrawerNavig
/**
* Views
*/
export { default as DrawerView } from './views/DrawerView';
export { default as DrawerItem } from './views/DrawerItem';
export { default as DrawerItemList } from './views/DrawerItemList';
export { default as DrawerContent } from './views/DrawerContent';
export { default as DrawerView } from './views/DrawerView';
/**
* Utilities

View File

@@ -40,10 +40,10 @@ function DrawerNavigator({
return (
<DrawerView
{...rest}
state={state}
descriptors={descriptors}
navigation={navigation}
{...rest}
/>
);
}

View File

@@ -3,6 +3,17 @@
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.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.21...@react-navigation/material-bottom-tabs@5.0.0-alpha.22) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.20...@react-navigation/material-bottom-tabs@5.0.0-alpha.21) (2019-11-17)
**Note:** Version bump only for package @react-navigation/material-bottom-tabs

View File

@@ -11,7 +11,7 @@
"material",
"tab"
],
"version": "5.0.0-alpha.21",
"version": "5.0.0-alpha.22",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -3,6 +3,11 @@
*/
export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
/**
* Views
*/
export { default as MaterialBottomTabView } from './views/MaterialBottomTabView';
/**
* Types
*/

View File

@@ -3,6 +3,17 @@
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/material-top-tabs@5.0.0-alpha.19...@react-navigation/material-top-tabs@5.0.0-alpha.20) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.18...@react-navigation/material-top-tabs@5.0.0-alpha.19) (2019-11-20)
**Note:** Version bump only for package @react-navigation/material-top-tabs

View File

@@ -11,7 +11,7 @@
"material",
"tab"
],
"version": "5.0.0-alpha.19",
"version": "5.0.0-alpha.20",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -6,6 +6,7 @@ export { default as createMaterialTopTabNavigator } from './navigators/createMat
/**
* Views
*/
export { default as MaterialTopTabView } from './views/MaterialTopTabView';
export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
/**

View File

@@ -3,6 +3,17 @@
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.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.14](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.13...@react-navigation/native-stack@5.0.0-alpha.14) (2019-11-20)
**Note:** Version bump only for package @react-navigation/native-stack

View File

@@ -6,7 +6,7 @@
"react-native",
"react-navigation"
],
"version": "5.0.0-alpha.14",
"version": "5.0.0-alpha.15",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -3,6 +3,11 @@
*/
export { default as createNativeStackNavigator } from './navigators/createNativeStackNavigator';
/**
* Views
*/
export { default as NativeStackView } from './views/NativeStackView';
/**
* Types
*/

View File

@@ -16,7 +16,7 @@ import {
screensEnabled,
// eslint-disable-next-line import/no-unresolved
} from 'react-native-screens';
import StackView from '../views/StackView';
import NativeStackView from '../views/NativeStackView';
import {
NativeStackNavigatorProps,
NativeStackNavigationOptions,
@@ -64,11 +64,11 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
);
return (
<StackView
<NativeStackView
{...rest}
state={state}
navigation={navigation}
descriptors={descriptors}
{...rest}
/>
);
}

View File

@@ -29,7 +29,11 @@ type Props = {
descriptors: NativeStackDescriptorMap;
};
export default function StackView({ state, navigation, descriptors }: Props) {
export default function NativeStackView({
state,
navigation,
descriptors,
}: Props) {
return (
<ScreenStack style={styles.scenes}>
{state.routes.map(route => {

View File

@@ -3,6 +3,29 @@
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.40](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.39...@react-navigation/stack@5.0.0-alpha.40) (2019-12-07)
### Features
* export underlying views used to build navigators ([#191](https://github.com/react-navigation/navigation-ex/issues/191)) ([d618ab3](https://github.com/react-navigation/navigation-ex/commit/d618ab382ecc5eccbcd5faa89e76f9ed2d75f405))
# [5.0.0-alpha.39](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.38...@react-navigation/stack@5.0.0-alpha.39) (2019-12-03)
### Bug Fixes
* correctly update layout on onLayout events ([eaf8847](https://github.com/react-navigation/navigation-ex/commit/eaf88478cc392fb9ff0b69c7539595920db8e010))
* disable pointerEvents on header when not focused ([87d445b](https://github.com/react-navigation/navigation-ex/commit/87d445b4e4468cf6c17787f47dd875ab8a95598a))
# [5.0.0-alpha.38](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.37...@react-navigation/stack@5.0.0-alpha.38) (2019-11-29)

View File

@@ -10,7 +10,7 @@
"android",
"stack"
],
"version": "5.0.0-alpha.38",
"version": "5.0.0-alpha.40",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -16,6 +16,7 @@ export const Assets = [
/**
* Views
*/
export { default as StackView } from './views/Stack/StackView';
export { default as Header } from './views/Header/Header';
export { default as HeaderTitle } from './views/Header/HeaderTitle';
export { default as HeaderBackButton } from './views/Header/HeaderBackButton';

View File

@@ -11,7 +11,6 @@ import {
StackNavigationState,
StackActions,
} from '@react-navigation/routers';
import KeyboardManager from '../views/KeyboardManager';
import StackView from '../views/Stack/StackView';
import {
StackNavigationConfig,
@@ -24,7 +23,6 @@ type Props = DefaultNavigatorOptions<StackNavigationOptions> &
StackNavigationConfig;
function StackNavigator({
keyboardHandlingEnabled,
initialRouteName,
children,
screenOptions,
@@ -64,17 +62,12 @@ function StackNavigator({
);
return (
<KeyboardManager enabled={keyboardHandlingEnabled !== false}>
{props => (
<StackView
state={state}
descriptors={descriptors}
navigation={navigation}
{...rest}
{...props}
/>
)}
</KeyboardManager>
<StackView
{...rest}
state={state}
descriptors={descriptors}
navigation={navigation}
/>
);
}

View File

@@ -114,7 +114,7 @@ export default function HeaderContainer({
})
: undefined
}
pointerEvents="box-none"
pointerEvents={isFocused ? 'box-none' : 'none'}
accessibilityElementsHidden={!isFocused}
importantForAccessibility={
isFocused ? 'auto' : 'no-hide-descendants'

View File

@@ -79,17 +79,20 @@ export default class HeaderSegment extends React.Component<Props, State> {
private handleTitleLayout = (e: LayoutChangeEvent) => {
const { height, width } = e.nativeEvent.layout;
const { titleLayout } = this.state;
if (
titleLayout &&
height === titleLayout.height &&
width === titleLayout.width
) {
return;
}
this.setState(({ titleLayout }) => {
if (
titleLayout &&
height === titleLayout.height &&
width === titleLayout.width
) {
return null;
}
this.setState({ titleLayout: { height, width } });
return {
titleLayout: { height, width },
};
});
};
private handleLeftLabelLayout = (e: LayoutChangeEvent) => {

View File

@@ -60,7 +60,7 @@ type Props = TransitionPreset & {
floatingHeaderHeight: number;
};
export default class StackItem extends React.PureComponent<Props> {
export default class CardContainer extends React.PureComponent<Props> {
private handleOpen = () => {
const { scene, onTransitionEnd, onOpenRoute } = this.props;

View File

@@ -16,7 +16,7 @@ import { StackNavigationState } from '@react-navigation/routers';
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
import StackItem from './StackItem';
import CardContainer from './CardContainer';
import {
DefaultTransition,
ModalTransition,
@@ -139,7 +139,7 @@ const getFloatingHeaderHeights = (
}, {});
};
export default class Stack extends React.Component<Props, State> {
export default class CardStack extends React.Component<Props, State> {
static getDerivedStateFromProps(props: Props, state: State) {
if (
props.routes === state.routes &&
@@ -233,25 +233,24 @@ export default class Stack extends React.Component<Props, State> {
private handleLayout = (e: LayoutChangeEvent) => {
const { height, width } = e.nativeEvent.layout;
if (
height === this.state.layout.height &&
width === this.state.layout.width
) {
return;
}
const layout = { width, height };
this.setState(state => ({
layout,
floatingHeaderHeights: getFloatingHeaderHeights(
this.props.routes,
this.props.insets,
state.descriptors,
this.setState((state, props) => {
if (height === state.layout.height && width === state.layout.width) {
return null;
}
return {
layout,
{}
),
}));
floatingHeaderHeights: getFloatingHeaderHeights(
props.routes,
props.insets,
state.descriptors,
layout,
{}
),
};
});
};
private handleFloatingHeaderLayout = ({
@@ -261,23 +260,20 @@ export default class Stack extends React.Component<Props, State> {
route: Route<string>;
height: number;
}) => {
const previousHeight = this.state.floatingHeaderHeights[route.key];
this.setState(({ floatingHeaderHeights }) => {
const previousHeight = this.state.floatingHeaderHeights[route.key];
if (previousHeight && previousHeight === height) {
return;
}
if (previousHeight && previousHeight === height) {
return null;
}
// Update in next frame to make sure it's applied after screen's onLayout
requestAnimationFrame(() =>
requestAnimationFrame(() => {
this.setState(state => ({
floatingHeaderHeights: {
...state.floatingHeaderHeights,
[route.key]: height,
},
}));
})
);
return {
floatingHeaderHeights: {
...floatingHeaderHeights,
[route.key]: height,
},
};
});
};
private handleTransitionStart = (
@@ -435,7 +431,7 @@ export default class Stack extends React.Component<Props, State> {
active={isScreenActive}
pointerEvents="box-none"
>
<StackItem
<CardContainer
index={index}
active={index === self.length - 1}
focused={focused}

View File

@@ -4,7 +4,8 @@ import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
import { Route } from '@react-navigation/core';
import { StackActions, StackNavigationState } from '@react-navigation/routers';
import Stack from './Stack';
import CardStack from './CardStack';
import KeyboardManager from '../KeyboardManager';
import HeaderContainer, {
Props as HeaderContainerProps,
} from '../Header/HeaderContainer';
@@ -19,9 +20,6 @@ type Props = StackNavigationConfig & {
state: StackNavigationState;
navigation: StackNavigationHelpers;
descriptors: StackDescriptorMap;
onPageChangeStart?: () => void;
onPageChangeConfirm?: () => void;
onPageChangeCancel?: () => void;
};
type State = {
@@ -307,9 +305,7 @@ class StackView extends React.Component<Props, State> {
const {
state,
navigation,
onPageChangeStart,
onPageChangeConfirm,
onPageChangeCancel,
keyboardHandlingEnabled,
mode = 'card',
...rest
} = this.props;
@@ -328,28 +324,30 @@ class StackView extends React.Component<Props, State> {
<SafeAreaProviderCompat>
<SafeAreaConsumer>
{insets => (
<Stack
mode={mode}
insets={insets as EdgeInsets}
getPreviousRoute={this.getPreviousRoute}
getGesturesEnabled={this.getGesturesEnabled}
routes={routes}
openingRouteKeys={openingRouteKeys}
closingRouteKeys={closingRouteKeys}
onGoBack={this.handleGoBack}
onOpenRoute={this.handleOpenRoute}
onCloseRoute={this.handleCloseRoute}
onPageChangeStart={onPageChangeStart}
onPageChangeConfirm={onPageChangeConfirm}
onPageChangeCancel={onPageChangeCancel}
renderHeader={this.renderHeader}
renderScene={this.renderScene}
headerMode={headerMode}
state={state}
navigation={navigation}
descriptors={descriptors}
{...rest}
/>
<KeyboardManager enabled={keyboardHandlingEnabled !== false}>
{props => (
<CardStack
mode={mode}
insets={insets as EdgeInsets}
getPreviousRoute={this.getPreviousRoute}
getGesturesEnabled={this.getGesturesEnabled}
routes={routes}
openingRouteKeys={openingRouteKeys}
closingRouteKeys={closingRouteKeys}
onGoBack={this.handleGoBack}
onOpenRoute={this.handleOpenRoute}
onCloseRoute={this.handleCloseRoute}
renderHeader={this.renderHeader}
renderScene={this.renderScene}
headerMode={headerMode}
state={state}
navigation={navigation}
descriptors={descriptors}
{...rest}
{...props}
/>
)}
</KeyboardManager>
)}
</SafeAreaConsumer>
</SafeAreaProviderCompat>