Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add bottom clamp option #108

Merged
merged 6 commits into from Oct 23, 2019
Merged

feat: add bottom clamp option #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e1ca6ed
feat(index.tx): flag to allow clamping for the most bottom snapPoint
sebqq Oct 7, 2019
ccda125
Update README.md
sebqq Oct 16, 2019
c6beb34
Add reactivity to clamping functionality
sebqq Oct 18, 2019
cb81659
Add reactivity to enableBottomClamp prop too
sebqq Oct 18, 2019
5d6d1ba
move clampingEnabled directly to animation declaration
sebqq Oct 23, 2019
7a8851e
add underscore before unused method's param
sebqq Oct 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Expand Up @@ -66,6 +66,7 @@ class Example extends React.Component {
| enabledHeaderGestureInteraction | no | `true` | Defines if bottom sheet header could be scrollable by gesture. |
| enabledContentGestureInteraction | no | `true` | Defines if bottom sheet content could be scrollable by gesture. |
| enabledManualSnapping | no | `true` | If `false` blocks snapping using `snapTo` method. |
| enabledBottomClamp | no | `false` | If `true` block movement is clamped from bottom to minimal snappoint. |
| enabledInnerScrolling | no | `true` | Defines whether it's possible to scroll inner content of bottom sheet. |
| callbackNode | no | | `reanimated` node which holds position of bottom sheet, where `0` it the highest snap point and `1` is the lowest. |
| contentPosition | no | | `reanimated` node which holds position of bottom sheet's content (in dp) |
Expand Down
27 changes: 26 additions & 1 deletion src/index.tsx
View file
Open in desktop
Expand Up @@ -41,6 +41,11 @@ type Props = {
*/
enabledContentTapInteraction?: boolean

/**
* When true, clamp bottom position to first snapPoint.
*/
enabledBottomClamp?: boolean

/**
* If false blocks snapping using snapTo method. Defaults to true.
*/
Expand Down Expand Up @@ -286,6 +291,7 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
initialSnap: 0,
enabledImperativeSnapping: true,
enabledGestureInteraction: true,
enabledBottomClamp: false,
enabledHeaderGestureInteraction: true,
enabledContentGestureInteraction: true,
enabledContentTapInteraction: true,
Expand Down Expand Up @@ -317,6 +323,7 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
private tapRef: React.RefObject<TapGestureHandler>
private snapPoint: Animated.Node<number>
private Y: Animated.Node<number>
private clampingValue: Animated.Value<number> = new Value(0)
private onOpenStartValue: Animated.Value<number> = new Value(0)
private onOpenEndValue: Animated.Value<number> = new Value(0)
private onCloseStartValue: Animated.Value<number> = new Value(1)
Expand Down Expand Up @@ -358,6 +365,10 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
// current snap point desired
this.snapPoint = currentSnapPoint()

if (props.enabledBottomClamp) {
this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
}

const masterClock = new Clock()
const prevMasterDrag = new Value(0)
const wasRun: Animated.Value<number> = new Value(0)
Expand Down Expand Up @@ -406,7 +417,14 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
),
cond(
greaterThan(masterOffseted, snapPoints[0]),
masterOffseted,
cond(
and(
props.enabledBottomClamp ? 1 : 0,
greaterThan(masterOffseted, this.clampingValue)
),
this.clampingValue,
masterOffseted
),
max(
multiply(
sub(
Expand All @@ -432,6 +450,13 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
)
}

componentDidUpdate(_prevProps: Props, prevState: State) {
const { snapPoints } = this.state
if (this.props.enabledBottomClamp && snapPoints !== prevState.snapPoints) {
this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
}
}

private runSpring(
clock: Animated.Clock,
value: Animated.Value<number>,
Expand Down