Compare commits

..

4 Commits

Author SHA1 Message Date
satyajit.happy
75ed888b33 chore: publish
- @react-navigation/bottom-tabs@5.0.0-alpha.19
 - @react-navigation/native-stack@5.0.0-alpha.10
2019-11-04 17:21:32 +01:00
satyajit.happy
ee82ab1d1b refactor: remove TouchableWithoutFeedbackWrapper 2019-11-04 17:20:36 +01:00
satyajit.happy
301c35ec32 fix: popToTop on tab press in native stack 2019-11-04 17:09:42 +01:00
Oliver Winter
22cb675608 fix: fix default BottomTabBar button (#161) 2019-11-04 17:05:05 +01:00
8 changed files with 64 additions and 38 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.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.18...@react-navigation/bottom-tabs@5.0.0-alpha.19) (2019-11-04)
### Bug Fixes
* fix default BottomTabBar button ([#161](https://github.com/react-navigation/navigation-ex/issues/161)) ([22cb675](https://github.com/react-navigation/navigation-ex/commit/22cb675))
# [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

View File

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

View File

@@ -13,8 +13,7 @@ import { Route, NavigationContext } from '@react-navigation/core';
import { SafeAreaConsumer } from 'react-native-safe-area-context';
import TabBarIcon from './TabBarIcon';
import TouchableWithoutFeedbackWrapper from './TouchableWithoutFeedbackWrapper';
import { BottomTabBarProps, BottomTabBarButtonProps } from '../types';
import { BottomTabBarProps } from '../types';
type State = {
dimensions: { height: number; width: number };
@@ -265,9 +264,7 @@ export default class TabBarBottom extends React.Component<Props, State> {
getAccessibilityLabel,
getAccessibilityRole,
getAccessibilityStates,
renderButton = (props: BottomTabBarButtonProps) => (
<TouchableWithoutFeedbackWrapper {...props} />
),
renderButton,
getTestID,
style,
tabStyle,

View File

@@ -1,10 +1,12 @@
import * as React from 'react';
import {
View,
TouchableWithoutFeedback,
StyleSheet,
AccessibilityRole,
AccessibilityStates,
} from 'react-native';
import { Route, CommonActions } from '@react-navigation/core';
import { TabNavigationState } from '@react-navigation/routers';
// eslint-disable-next-line import/no-unresolved
@@ -53,6 +55,8 @@ export default class BottomTabView extends React.Component<Props, State> {
private renderButton = ({
route,
children,
style,
...rest
}: { route: Route<string> } & BottomTabBarButtonProps) => {
const { descriptors } = this.props;
@@ -60,10 +64,14 @@ export default class BottomTabView extends React.Component<Props, State> {
const options = descriptor.options;
if (options.tabBarButton) {
return options.tabBarButton(rest);
return options.tabBarButton({ children, style, ...rest });
}
return undefined;
return (
<TouchableWithoutFeedback {...rest}>
<View style={style}>{children}</View>
</TouchableWithoutFeedback>
);
};
private renderIcon = ({

View File

@@ -1,28 +0,0 @@
import React from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
export default function TouchableWithoutFeedbackWrapper({
onPress,
onLongPress,
testID,
accessibilityLabel,
accessibilityRole,
accessibilityStates,
...rest
}: React.ComponentProps<typeof TouchableWithoutFeedback> & {
children: React.ReactNode;
}) {
return (
<TouchableWithoutFeedback
onPress={onPress}
onLongPress={onLongPress}
testID={testID}
hitSlop={{ left: 15, right: 15, top: 0, bottom: 5 }}
accessibilityLabel={accessibilityLabel}
accessibilityRole={accessibilityRole}
accessibilityStates={accessibilityStates}
>
<View {...rest} />
</TouchableWithoutFeedback>
);
}

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.10](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.9...@react-navigation/native-stack@5.0.0-alpha.10) (2019-11-04)
### Bug Fixes
* popToTop on tab press in native stack ([301c35e](https://github.com/react-navigation/navigation-ex/commit/301c35e))
# [5.0.0-alpha.9](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.8...@react-navigation/native-stack@5.0.0-alpha.9) (2019-11-04)
**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.9",
"version": "5.0.0-alpha.10",
"license": "MIT",
"repository": {
"type": "git",

View File

@@ -1,10 +1,15 @@
import React from 'react';
import { createNavigator, useNavigationBuilder } from '@react-navigation/core';
import {
createNavigator,
useNavigationBuilder,
EventArg,
} from '@react-navigation/core';
import {
StackRouter,
StackNavigationState,
StackRouterOptions,
StackActions,
} from '@react-navigation/routers';
import {
@@ -36,6 +41,28 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
screenOptions,
});
React.useEffect(
() =>
navigation.addListener &&
navigation.addListener('tabPress', (e: EventArg<'tabPress'>) => {
const isFocused = navigation.isFocused();
// Run the operation in the next frame so we're sure all listeners have been run
// This is necessary to know if preventDefault() has been called
requestAnimationFrame(() => {
if (state.index > 0 && isFocused && !e.defaultPrevented) {
// When user taps on already focused tab and we're inside the tab,
// reset the stack to replicate native behaviour
navigation.dispatch({
...StackActions.popToTop(),
target: state.key,
});
}
});
}),
[navigation, state.index, state.key]
);
return (
<StackView
state={state}