Skip to content
This repository was archived by the owner on Apr 15, 2020. It is now read-only.

Commit e7a2aa8

Browse files
ericvicentiericvicenti
committed
Starting new Transitioner API for gestures
1 parent ab9102f commit e7a2aa8

7 files changed

Lines changed: 221 additions & 503 deletions

File tree

‎App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import SharedEl from "./examples/SharedEl";
1212

1313
import { Provider as LayoutProvider } from "./LayoutContext";
1414

15+
process.env.REACT_NAV_LOGGING = true;
16+
1517
const Examples = ({ navigation }) => (
1618
<View style={{ flex: 1, justifyContent: "center" }}>
1719
{Object.keys(EXAMPLES).map(exampleName => (
@@ -37,12 +39,12 @@ const AppNavigator = createSwitchNavigator({
3739
...EXAMPLES,
3840
});
3941

40-
const StatefulAppNavigator = createNavigationContainer(AppNavigator);
42+
// const StatefulAppNavigator = createNavigationContainer(AppNavigator);
4143
// const StatefulAppNavigator = createNavigationContainer(Fade);
4244
// const StatefulAppNavigator = createNavigationContainer(Modal);
4345
// const StatefulAppNavigator = createNavigationContainer(Gesture);
4446
// const StatefulAppNavigator = createNavigationContainer(CardStack);
45-
// const StatefulAppNavigator = createNavigationContainer(SharedEl);
47+
const StatefulAppNavigator = createNavigationContainer(SharedEl);
4648

4749
const App = () => (
4850
<LayoutProvider style={{ flex: 1 }}>

‎CardTransition.js‎

Lines changed: 1 addition & 301 deletions
Original file line numberDiff line numberDiff line change
@@ -213,19 +213,13 @@ export default class CardTransition extends React.Component {
213213
gestureVelocityX,
214214
} = transition;
215215
screenWidth.setValue(layout.width);
216-
const fromTranslate = fromState.routes.find(r => r.key === myKey)
217-
? 0
218-
: layout.width;
219-
const toTranslate = toState.routes.find(r => r.key === myKey)
220-
? 0
221-
: layout.width;
222216

223217
const styles = {
224218
transform: [
225219
{
226220
translateX: interpolate(progress, {
227221
inputRange: [0, 1],
228-
outputRange: [fromTranslate, toTranslate],
222+
outputRange: [layout.width, 0],
229223
}),
230224
},
231225
],
@@ -260,297 +254,3 @@ export default class CardTransition extends React.Component {
260254
);
261255
};
262256
}
263-
264-
// export default class CardTransition extends React.Component {
265-
// static navigationOptions = {
266-
// createTransition: transition => {
267-
// const progress = new Value(0);
268-
// const behindAnimatedStyle = {
269-
// opacity: interpolate(progress, {
270-
// inputRange: [0, 1],
271-
// outputRange: [1, 0]
272-
// })
273-
// };
274-
// return { behindAnimatedStyle, progress };
275-
// },
276-
// getBehindTransitionAnimatedStyle: transition => {
277-
// return {
278-
// opacity: interpolate(transition.progress, {
279-
// inputRange: [0, 1],
280-
// outputRange: [1, 0]
281-
// })
282-
// };
283-
// },
284-
// runTransition: async (transition, screenComponents) => {
285-
// const { fromState, toState } = transition;
286-
// let transitionKey = fromState.routes[fromState.index].key;
287-
// if (toState && toState.index >= fromState.index) {
288-
// transitionKey = toState.routes[toState.index].key;
289-
// }
290-
// const screen =
291-
// screenComponents[transitionKey] &&
292-
// screenComponents[transitionKey].current;
293-
// if (screen && screen.isAnimatingClosed && screen.isAnimatingClosed()) {
294-
// await screen.waitForCloseAnimation();
295-
// return;
296-
// }
297-
// await new Promise(resolve => {
298-
// // The .start() callback for `.spring(` doesn't fire, :( ..using timing temporarily instead..
299-
// timing(transition.progress, {
300-
// toValue: 1,
301-
// // Spring Config:
302-
// // https://github.com/react-navigation/react-navigation-stack/blob/6b10e8afd681c8aa81d785791f4f41f1d3647b51/src/views/StackView/StackViewTransitionConfigs.js#L12
303-
// // stiffness: 1000,
304-
// // damping: 500,
305-
// // mass: 3,
306-
307-
// // Sad timing Config:
308-
// easing: Easing.inOut(Easing.cubic),
309-
// duration: 250
310-
// }).start(resolve);
311-
// });
312-
// }
313-
// };
314-
// _panGesture = React.createRef();
315-
// _gestureVelocityX = new Value(0);
316-
// _gestureTranslateX = new Value(0);
317-
// _gestureLastVelocityX = new Value(0);
318-
// _gestureLastTranslateX = new Value(0);
319-
// _gesturePrevTranslateX = new Value(0);
320-
// _gestureState = new Value(State.END);
321-
// _clock = new Clock();
322-
// _offsetX = new Value();
323-
// _isClosing = and(
324-
// neq(this._gestureState, State.ACTIVE),
325-
// greaterThan(
326-
// add(
327-
// this._gestureLastTranslateX,
328-
// multiply(TOSS_SEC, this._gestureLastVelocityX)
329-
// ),
330-
// 100
331-
// )
332-
// );
333-
// _springState = {
334-
// finished: new Value(0),
335-
// velocity: new Value(0),
336-
// position: new Value(0),
337-
// time: new Value(0)
338-
// };
339-
340-
// isAnimatingClosed = () => {
341-
// return this._isClosingViaGesture;
342-
// };
343-
// _animationCloseSubscribers = [];
344-
// waitForCloseAnimation = async () => {
345-
// await new Promise((resolve, reject) => {
346-
// this._animationCloseSubscribers.push(resolve);
347-
// setTimeout(reject, 2000);
348-
// });
349-
// };
350-
351-
// _springConfig = {
352-
// stiffness: 1000,
353-
// damping: 500,
354-
// mass: 3,
355-
// overshootClamping: true,
356-
// restSpeedThreshold: 0.001,
357-
// restDisplacementThreshold: 0.001,
358-
// toValue: new Value()
359-
// };
360-
361-
// _renderWithLayout = layout => {
362-
// const { transition } = this.props;
363-
364-
// // spring logic inspired by https://github.com/kmagiera/react-native-reanimated/blob/master/Example/snappable/index.js#L30
365-
366-
// const gesturePosition = [
367-
// cond(
368-
// eq(this._gestureState, State.ACTIVE),
369-
// [
370-
// stopClock(this._clock),
371-
// set(
372-
// this._offsetX,
373-
// add(
374-
// this._offsetX,
375-
// sub(this._gestureTranslateX, this._gesturePrevTranslateX)
376-
// )
377-
// ),
378-
// // transition &&
379-
// // set(
380-
// // transition.progress,
381-
// // divide(
382-
// // add(
383-
// // this._offsetX,
384-
// // sub(this._gestureTranslateX, this._gesturePrevTranslateX)
385-
// // ),
386-
// // layout.width
387-
// // )
388-
// // ),
389-
// set(this._gesturePrevTranslateX, this._gestureTranslateX),
390-
// set(this._gestureLastTranslateX, this._gestureTranslateX),
391-
// set(this._gestureLastVelocityX, this._gestureVelocityX),
392-
// this._offsetX
393-
// ],
394-
// [
395-
// set(this._gesturePrevTranslateX, 0),
396-
// set(
397-
// this._offsetX,
398-
// cond(
399-
// defined(this._offsetX),
400-
// [
401-
// cond(clockRunning(this._clock), 0, [
402-
// set(this._springState.finished, 0),
403-
// set(this._springState.velocity, this._gestureVelocityX),
404-
// set(this._springState.position, this._offsetX),
405-
// set(
406-
// this._springConfig.toValue,
407-
// cond(this._isClosing, layout.width, 0)
408-
// ),
409-
// startClock(this._clock)
410-
// ]),
411-
// spring(this._clock, this._springState, this._springConfig),
412-
// cond(this._springState.finished, stopClock(this._clock)),
413-
// call(
414-
// [and(this._springState.finished, this._isClosing)],
415-
// states => {
416-
// const [isComplete] = states;
417-
// if (isComplete) {
418-
// this._animationCloseSubscribers.forEach(closeSubscriber =>
419-
// closeSubscriber()
420-
// );
421-
// this._animationCloseSubscribers = [];
422-
// this._springState = {
423-
// finished: new Value(0),
424-
// velocity: new Value(0),
425-
// position: new Value(0),
426-
// time: new Value(0)
427-
// };
428-
// }
429-
// }
430-
// ),
431-
// this._springState.position
432-
// ],
433-
// 0
434-
// )
435-
// )
436-
// ]
437-
// )
438-
// ];
439-
// let cardTranslateX = gesturePosition;
440-
441-
// if (
442-
// transition &&
443-
// transition.transitionRouteKey === this.props.navigation.state.key &&
444-
// !this._isClosingViaGesture
445-
// ) {
446-
// const { progress, fromState, toState } = transition;
447-
// const isForward = toState.index >= fromState.index;
448-
449-
// const transitionTranslate = multiply(
450-
// isForward ? sub(1, progress) : progress,
451-
// layout.width
452-
// );
453-
// cardTranslateX = add(gesturePosition, transitionTranslate);
454-
// }
455-
456-
// return (
457-
// <React.Fragment>
458-
// <PanGestureHandler
459-
// minOffsetX={10}
460-
// hitSlop={{ right: 0, width: 100 }}
461-
// onHandlerStateChange={event(
462-
// [
463-
// {
464-
// nativeEvent: {
465-
// state: this._gestureState
466-
// }
467-
// }
468-
// ],
469-
// {
470-
// listener: ({ nativeEvent }) => {
471-
// // this is not firing :(
472-
// debugger;
473-
// }
474-
// }
475-
// )}
476-
// // :(
477-
// // ExceptionsManager.js:84 Warning: Failed prop type: Invalid prop `onHandlerStateChange` of type `object` supplied to `Handler`, expected `function`.
478-
// // in Handler (at CardTransition.js:173)
479-
// // in CardTransition (at App.js:177)
480-
// // in CardExample (at Transitioner.js:197)
481-
// // in RCTView (at View.js:43)
482-
// // in AnimatedComponent (at Transitioner.js:192)
483-
// // in Transitioner (at createNavigator.js:48)
484-
// // in Navigator (at createNavigationContainer.js:315)
485-
// // in NavigationContainer (at App.js:451)
486-
// // in RCTView (at View.js:43)
487-
// // in RCTView (at View.js:43)
488-
// // in InternalLayoutProvider (at LayoutContext.js:244)
489-
// // in LayoutProvider (at App.js:450)
490-
// // in App (at renderApplication.js:32)
491-
// // in RCTView (at View.js:43)
492-
// // in RCTView (at View.js:43)
493-
// // in AppContainer (at renderApplication.js:31)
494-
// onGestureEvent={event(
495-
// [
496-
// {
497-
// nativeEvent: {
498-
// translationX: this._gestureTranslateX,
499-
// velocityX: this._gestureVelocityX
500-
// }
501-
// }
502-
// ],
503-
// {
504-
// listener: ({ nativeEvent }) => {
505-
// // this is not firing :(
506-
// debugger;
507-
// }
508-
// }
509-
// )}
510-
// ref={this._panGesture}
511-
// >
512-
// <Animated.View
513-
// style={{
514-
// shadowColor: "#000",
515-
// shadowOffset: { width: 0, height: 0 },
516-
// shadowRadius: 5,
517-
// shadowOpacity: interpolate(cardTranslateX, {
518-
// inputRange: [0, layout.width],
519-
// outputRange: [0.2, 0],
520-
// extrapolate: "clamp"
521-
// }),
522-
// backgroundColor: "#E9E9EF",
523-
// flex: 1,
524-
// opacity: 1,
525-
// transform: [
526-
// {
527-
// translateX: interpolate(cardTranslateX, {
528-
// inputRange: [0, layout.width],
529-
// outputRange: [0, layout.width],
530-
// extrapolate: "clamp"
531-
// })
532-
// }
533-
// ]
534-
// }}
535-
// >
536-
// {this.props.children}
537-
// </Animated.View>
538-
// </PanGestureHandler>
539-
// <Animated.Code
540-
// exec={call([this._isClosing], values => {
541-
// const [isClosing] = values;
542-
// const wasClosing = this._isClosingViaGesture;
543-
544-
// if (isClosing && !wasClosing) {
545-
// this._isClosingViaGesture = true;
546-
// this.props.navigation.goBack();
547-
// }
548-
// })}
549-
// />
550-
// </React.Fragment>
551-
// );
552-
// };
553-
// render() {
554-
// return <Consumer>{this._renderWithLayout}</Consumer>;
555-
// }
556-
// }

0 commit comments

Comments
 (0)