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

feat: swipe velocity impact as prop #249

Merged
merged 9 commits into from
Oct 5, 2019
Merged

feat: swipe velocity impact as prop #249

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
91dd9b1
feat: initial version
osdnk Oct 4, 2019
340708b
fix: snapshots
osdnk Oct 5, 2019
634cc57
Merge branch 'master' into @osdnk/SWI
osdnk Oct 5, 2019
b172cc6
feat: expose prop
osdnk Oct 5, 2019
45f251d
fix: vertical gesture
osdnk Oct 5, 2019
5e6d68d
fix: vertical gesture
osdnk Oct 5, 2019
2cd8f2c
fix: drop console.warn
osdnk Oct 5, 2019
b798206
refactor: swipeVelocityImpact -> gestureVelocityImpact
osdnk Oct 5, 2019
160339e
fix: tests
osdnk Oct 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ Array [
"top": 0,
}
}
gestureVelocityImpact={0.3}
transitionSpec={
Object {
"close": Object {
Expand Down Expand Up @@ -209,6 +210,7 @@ Array [
"top": 0,
}
}
gestureVelocityImpact={0.3}
transitionSpec={
Object {
"close": Object {
Expand Down
2 changes: 2 additions & 0 deletions src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ Array [
"top": 0,
}
}
gestureVelocityImpact={0.3}
transitionSpec={
Object {
"close": Object {
Expand Down Expand Up @@ -378,6 +379,7 @@ Array [
"top": 0,
}
}
gestureVelocityImpact={0.3}
transitionSpec={
Object {
"close": Object {
Expand Down
1 change: 1 addition & 0 deletions src/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export type NavigationStackOptions = HeaderOptions &
};
onTransitionStart?: (props: TransitionCallbackProps) => void;
onTransitionEnd?: (props: TransitionCallbackProps) => void;
gestureVelocityImpact?: number;
};

export type NavigationStackConfig = {
Expand Down
41 changes: 30 additions & 11 deletions src/views/Stack/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ type Props = ViewProps & {
close: TransitionSpec;
};
styleInterpolator: CardStyleInterpolator;
gestureVelocityImpact: number;
containerStyle?: StyleProp<ViewStyle>;
contentStyle?: StyleProp<ViewStyle>;
};
Expand Down Expand Up @@ -89,7 +90,7 @@ const BOTTOM = 1;
const DIRECTION_VERTICAL = -1;
const DIRECTION_HORIZONTAL = 1;

const SWIPE_VELOCITY_IMPACT = 0.3;
const GESTURE_VELOCITY_IMPACT = 0.3;

/**
* The distance of touch start from the edge of the screen where the gesture will be recognized
Expand Down Expand Up @@ -232,10 +233,16 @@ export default class Card extends React.Component<Props> {
overlayEnabled: Platform.OS !== 'ios',
shadowEnabled: true,
gestureEnabled: true,
gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
};

componentDidUpdate(prevProps: Props) {
const { layout, gestureDirection, closing } = this.props;
const {
layout,
gestureDirection,
closing,
gestureVelocityImpact,
} = this.props;
const { width, height } = layout;

if (width !== prevProps.layout.width) {
Expand All @@ -246,6 +253,10 @@ export default class Card extends React.Component<Props> {
this.layout.height.setValue(height);
}

if (gestureVelocityImpact !== prevProps.gestureVelocityImpact) {
this.gestureVelocityImpact.setValue(gestureVelocityImpact);
}

if (gestureDirection !== prevProps.gestureDirection) {
this.direction.setValue(
gestureDirection === 'vertical' ||
Expand Down Expand Up @@ -285,6 +296,9 @@ export default class Card extends React.Component<Props> {
}

private isVisible = new Value<Binary>(TRUE);
private gestureVelocityImpact = new Value<number>(
this.props.gestureVelocityImpact
);
private isVisibleValue: Binary = TRUE;
private nextIsVisible = new Value<Binary | -1>(UNSET);
private verticalGestureDirection = new Value(
Expand Down Expand Up @@ -483,18 +497,19 @@ export default class Card extends React.Component<Props> {

private extrapolatedPosition = add(
this.gesture,
multiply(this.velocity, SWIPE_VELOCITY_IMPACT)
multiply(this.velocity, this.gestureVelocityImpact)
);

private exec = [
cond(
eq(this.direction, DIRECTION_HORIZONTAL),
set(
this.gesture,
set(
this.gesture,
cond(
eq(this.direction, DIRECTION_HORIZONTAL),
multiply(
this.gestureUntraversed,
I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
)
),
this.gestureUntraversed
Comment on lines +504 to +512
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured out it's a bug here. We weren't updating this.gesture in vertical mode.

)
),
set(
Expand Down Expand Up @@ -593,9 +608,13 @@ export default class Card extends React.Component<Props> {
cond(
this.distance,
divide(
multiply(
this.gestureUntraversed,
I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
cond(
eq(this.direction, DIRECTION_HORIZONTAL),
multiply(
this.gestureUntraversed,
I18nManager.isRTL ? MINUS_ONE_NODE : TRUE_NODE
),
this.gestureUntraversed
Comment on lines +611 to +617
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was another bug here. In RTL we were multiplying a gesture in vertical mode as well.

),
this.distance
),
Expand Down
2 changes: 2 additions & 0 deletions src/views/Stack/Stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,7 @@ export default class Stack extends React.Component<Props, State> {
transitionSpec = defaultTransitionPreset.transitionSpec,
cardStyleInterpolator = defaultTransitionPreset.cardStyleInterpolator,
headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
gestureVelocityImpact,
} = descriptor
? descriptor.options
: ({} as NavigationStackOptions);
Expand Down Expand Up @@ -404,6 +405,7 @@ export default class Stack extends React.Component<Props, State> {
transitionSpec={transitionSpec}
cardStyleInterpolator={cardStyleInterpolator}
headerStyleInterpolator={headerStyleInterpolator}
gestureVelocityImpact={gestureVelocityImpact}
/>
</MaybeScreen>
);
Expand Down
3 changes: 3 additions & 0 deletions src/views/Stack/StackItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ type Props = TransitionPreset & {
headerTransparent?: boolean;
floatingHeaderHeight: number;
hasCustomHeader: boolean;
gestureVelocityImpact?: number;
};

export default class StackItem extends React.PureComponent<Props> {
Expand Down Expand Up @@ -120,6 +121,7 @@ export default class StackItem extends React.PureComponent<Props> {
transitionSpec,
cardStyleInterpolator,
headerStyleInterpolator,
gestureVelocityImpact,
} = this.props;

return (
Expand Down Expand Up @@ -153,6 +155,7 @@ export default class StackItem extends React.PureComponent<Props> {
}
contentStyle={cardStyle}
style={StyleSheet.absoluteFill}
gestureVelocityImpact={gestureVelocityImpact}
>
<View style={styles.container}>
<View style={styles.scene}>
Expand Down