status-im/react-navigation-stack
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation-stack.git synced 2025-02-18 09:27:01 +00:00
Code Issues Projects Releases Wiki Activity

Organize a bit more and fix RTL

Browse Source
This commit is contained in:
Brent Vatne 2018-09-24 15:37:48 -07:00
parent 99db956be8
commit 23ea16e9cf
1 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/StackView/StackViewLayout.js
View File

@ -19,7 +19,10 @@ import {
NavigationProvider, NavigationProvider,
} from 'react-navigation'; } from 'react-navigation';
import { ScreenContainer } from 'react-native-screens'; import { ScreenContainer } from 'react-native-screens';
import { PanGestureHandler } from 'react-native-gesture-handler'; import {
PanGestureHandler,
NativeViewGestureHandler,
} from 'react-native-gesture-handler';
import Card from './StackViewCard'; import Card from './StackViewCard';
import Header from '../Header/Header'; import Header from '../Header/Header';
@ -288,13 +291,17 @@ class StackViewLayout extends React.Component {
this._getTransitionConfig().containerStyle, this._getTransitionConfig().containerStyle,
]; ];
// TODO: activate only when within some distance of the edge of the screen
// within the GESTURE_RESPONSE_DISTANCE_HORIZONTAL / VERTICAL threshold
// https://github.com/kmagiera/react-native-gesture-handler/issues/293
return ( return (
<PanGestureHandler <PanGestureHandler
onGestureEvent={this._handlePanGestureEvent} minOffsetX={this._isGestureInverted() ? -15 : 15}
minOffsetX={15}
maxDeltaY={5} maxDeltaY={5}
onGestureEvent={this._handlePanGestureEvent}
onHandlerStateChange={this._handlePanGestureStateChange} onHandlerStateChange={this._handlePanGestureStateChange}
enabled={gesturesEnabled}> enabled={gesturesEnabled}
>
<View style={containerStyle}> <View style={containerStyle}>
<ScreenContainer style={styles.scenes}> <ScreenContainer style={styles.scenes}>
{scenes.map(s => this._renderCard(s))} {scenes.map(s => this._renderCard(s))}
@ -305,39 +312,58 @@ class StackViewLayout extends React.Component {
); );
} }
// Without using Reanimated it's not possible to do all of the following
// stuff with native driver.
_handlePanGestureEvent = ({ nativeEvent }) => { _handlePanGestureEvent = ({ nativeEvent }) => {
// const startValue = this._gestureStartValue; const { mode } = this.props;
// const axis = isVertical ? 'dy' : 'dx'; const isVertical = mode === 'modal';
// const axisDistance = isVertical
// ? layout.height.__getValue()
// : layout.width.__getValue();
// const currentValue =
// axis === 'dx' && gestureDirectionInverted
// ? startValue + gesture[axis] / axisDistance
// : startValue - gesture[axis] / axisDistance;
// const value = clamp(index - 1, currentValue, index);
// position.setValue(value);
if (isVertical) {
this._handleVerticalPan(nativeEvent);
} else {
this._handleHorizontalPan(nativeEvent);
}
};
// Without using Reanimated it's not possible to do all of the following _isGestureInverted = () => {
// stuff with native driver. const {
const { transitionProps: { scene },
transitionProps: { navigation, position, layout, scene }, } = this.props;
mode, const { options } = scene.descriptor;
} = this.props; const { gestureDirection } = options;
const { index } = navigation.state;
const distance = layout.width.__getValue(); return typeof gestureDirection === 'string'
const translation = nativeEvent.translationX; ? gestureDirection === 'inverted'
const currentValue = 1 - translation / distance; : I18nManager.isRTL;
const value = clamp(index - 1, currentValue, index); };
console.log({ distance, translation, currentValue })
position.setValue(value); _handleHorizontalPan = nativeEvent => {
} let {
transitionProps: { navigation, position, layout },
} = this.props;
let { index } = navigation.state;
let distance = layout.width.__getValue();
let translation = nativeEvent.translationX;
if (this._isGestureInverted()) {
translation *= -1;
}
let currentValue = 1 - translation / distance;
let value = clamp(index - 1, currentValue, index);
position.setValue(value);
};
_handleVerticalPan = nativeEvent => {
// todo
};
_handlePanGestureStateChange = ({ nativeEvent }) => { _handlePanGestureStateChange = ({ nativeEvent }) => {
const { oldState, state } = nativeEvent; const { oldState, state } = nativeEvent;
// console.log({ nativeEvent }) // console.log({ nativeEvent })
} };
_getHeaderMode() { _getHeaderMode() {
if (this.props.headerMode) { if (this.props.headerMode) {