Skip to content

Commit 5a6e1bb

Browse files
osdnkosdnk
committed
Add content position callback with example
1 parent ab610ca commit 5a6e1bb

File tree

5 files changed

+175
-3
lines changed

5 files changed

+175
-3
lines changed

‎Example/App.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Map from './Map'
66
import BlurToolbar from './BlurToolbar'
77
import Imperative from './Imperative'
88
import Test from './Test'
9+
import Sections from './Sections'
910

1011
const SCREENS = {
1112
map: {
@@ -24,6 +25,10 @@ const SCREENS = {
2425
screen: Test,
2526
title: 'Test',
2627
},
28+
sectionList: {
29+
screen: Sections,
30+
title: 'SectionList',
31+
},
2732
}
2833

2934
class MainScreen extends React.Component {

‎Example/Sections.js

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from 'react'
2+
import { StyleSheet, Text, View } from 'react-native'
3+
import BottomSheet from 'reanimated-bottom-sheet'
4+
import Animated from 'react-native-reanimated'
5+
6+
const Lorem = () => (
7+
<View style={{ height: 500, backgroundColor: 'green' }}>
8+
<Text>
9+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
10+
blanditiis praesentium voluptatum deleniti atque corrupti quos
11+
dolores et quas molestias excepturi sint occaecati cupiditate non
12+
provident, similique sunt in culpa qui officia deserunt mollitia
13+
animi, id est laborum et dolorum fuga. Et harum quidem rerum
14+
facilis est et expedita distinctio. Nam libero tempore, cum soluta
15+
nobis est eligendi optio cumque nihil impedit quo minus id quod
16+
maxime placeat facere possimus, omnis voluptas assumenda est,
17+
omnis dolor repellendus. Temporibus autem quibusdam et aut
18+
officiis debitis aut rerum necessitatibus saepe eveniet ut et
19+
voluptates repudiandae sint et molestiae non recusandae. Itaque
20+
earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
21+
voluptatibus maiores alias consequatur aut perferendis doloribus
22+
asperiores repellat. At vero eos et accusamus et iusto odio
23+
dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
24+
atque corrupti quos dolores et quas molestias excepturi sint
25+
occaecati cupiditate non provident, similique sunt in culpa qui
26+
officia deserunt mollitia animi, id est laborum et dolorum fuga.
27+
Et harum quidem rerum facilis est et expedita distinctio. Nam
28+
libero tempore, cum soluta nobis est eligendi optio cumque nihil
29+
impedit quo minus id quod maxime placeat facere possimus, omnis
30+
voluptas assumenda est, omnis dolor repellendus. Temporibus autem
31+
quibusdam et aut officiis debitis aut rerum necessitatibus saepe
32+
eveniet ut et voluptates repudiandae sint et molestiae non
33+
recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
34+
aut reiciendis voluptatibus maiores alias consequatur aut
35+
perferendis doloribus asperiores repellat.
36+
</Text>
37+
</View>
38+
)
39+
export default class Example extends React.Component {
40+
trans = new Animated.Value(0)
41+
renderHeader = name => (
42+
<View
43+
style={{
44+
width: '100%',
45+
backgroundColor: 'blue',
46+
height: 40,
47+
borderWidth: 2,
48+
}}>
49+
<Text>{name}</Text>
50+
</View>
51+
)
52+
53+
renderInner = () => (
54+
<View>
55+
<Animated.View
56+
style={{
57+
zIndex: 1,
58+
transform: [
59+
{
60+
translateY: this.trans.interpolate({
61+
inputRange: [0, 500, 510],
62+
outputRange: [0, 500, 500],
63+
}),
64+
},
65+
],
66+
}}>
67+
{this.renderHeader('one')}
68+
</Animated.View>
69+
<Lorem/>
70+
71+
<Animated.View
72+
style={{
73+
zIndex: 1,
74+
transform: [
75+
{
76+
translateY: this.trans.interpolate({
77+
inputRange: [0, 540, 1040, 1050],
78+
outputRange: [0, 0, 500, 500],
79+
}),
80+
},
81+
],
82+
}}>
83+
{this.renderHeader('XXX')}
84+
</Animated.View>
85+
<Lorem/>
86+
<Animated.View
87+
style={{
88+
zIndex: 1,
89+
transform: [
90+
{
91+
translateY: this.trans.interpolate({
92+
inputRange: [0, 1080, 1580, 1590],
93+
outputRange: [0, 0, 500, 500],
94+
}),
95+
},
96+
],
97+
}}>
98+
{this.renderHeader('two')}
99+
</Animated.View>
100+
<Lorem/>
101+
<Animated.View
102+
style={{
103+
zIndex: 1,
104+
transform: [
105+
{
106+
translateY: this.trans.interpolate({
107+
inputRange: [0, 1620, 2120, 2130],
108+
outputRange: [0, 0, 500, 500],
109+
}),
110+
},
111+
],
112+
}}>
113+
{this.renderHeader('three')}
114+
</Animated.View>
115+
<Lorem/>
116+
<Animated.View
117+
style={{
118+
zIndex: 1,
119+
transform: [
120+
{
121+
translateY: this.trans.interpolate({
122+
inputRange: [0, 2160, 2660, 2670],
123+
outputRange: [0, 0, 500, 500],
124+
}),
125+
},
126+
],
127+
}}>
128+
{this.renderHeader('mmm')}
129+
</Animated.View>
130+
<Lorem/>
131+
</View>
132+
);
133+
134+
render() {
135+
return (
136+
<View style={styles.container}>
137+
<BottomSheet
138+
contentPosition={this.trans}
139+
snapPoints = {[100, 400]}
140+
renderContent = {this.renderInner}
141+
/>
142+
</View>
143+
)
144+
}
145+
}
146+
147+
const IMAGE_SIZE = 200
148+
149+
const styles = StyleSheet.create({
150+
container: {
151+
flex: 1,
152+
backgroundColor: 'red',
153+
},
154+
box: {
155+
width: IMAGE_SIZE,
156+
height: IMAGE_SIZE,
157+
},
158+
})

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ class Example extends React.Component {
6666
| enabledManualSnapping | no | `true` | If `false` blocks snapping using `snapTo` method. |
6767
| enabledInnerScrolling | no | `true` | Defines whether it's possible to scroll inner content of bottom sheet. |
6868
| callbackNode | no | | `reanimated` node which holds position of bottom sheet, where `0` it the highest snap point and `1` is the lowest. |
69+
| contentPosition | no | | `reanimated` node which holds position of bottom sheet's content (in dp) |
6970
| overdragResistanceFactor | no | 0 | `Defines how violently sheet has to stopped while overdragging. 0 means no overdrag |
7071
| springConfig | no | `{ }` | Overrides config for spring animation |
7172
| innerGestureHandlerRefs | no | | Refs for gesture handlers used for building bottom sheet. The array consists fo three refs. The first for PanGH used for inner content scrolling. The second for PanGH used for header. The third for TapGH used for stopping scrolling the content. |

‎index.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -473,8 +473,13 @@ export default class BottomSheetBehavior extends Component {
473473
<Animated.Code
474474
exec={onChange(this.tapState, cond(eq(this.tapState, State.BEGAN), stopClock(this.decayClock)))}/>
475475
{this.props.callbackNode &&
476-
<Animated.Code
477-
exec={onChange(this.translateMaster, set(this.props.callbackNode, divide(this.translateMaster, this.state.snapPoints[this.state.snapPoints.length - 1])))}/>}
476+
<Animated.Code
477+
exec={onChange(this.translateMaster, set(this.props.callbackNode, divide(this.translateMaster, this.state.snapPoints[this.state.snapPoints.length - 1])))}/>
478+
}
479+
{this.props.contentPosition &&
480+
<Animated.Code
481+
exec={onChange(this.Y, set(this.props.contentPosition, sub(0, this.Y)))}/>
482+
}
478483
</View>
479484
</Animated.View>
480485
</React.Fragment>

‎reanimated-bottom-sheet.d.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@ declare module 'reanimated-bottom-sheet' {
2727
/** Reanimated node which holds position of bottom sheet, where 1 it the highest snap point and 0 is the lowest. */
2828
callbackNode?: Animated.Value<number>;
2929

30-
/** Defines how violently sheet has to stopped while overdragging. 0 means no overdrag. Defaults to 0. */
30+
/** Reanimated node which holds position of bottom sheet;s content (in dp). */
31+
contentPosition?: Animated.Value<number>;
32+
33+
/** Defines how violently sheet has to stopped while overdragging. 0 means no overdrag. Defaults to 0. */
3134
overdragResistanceFactor?: number;
3235

3336
/** Overrides config for spring animation */

0 commit comments

Comments
 (0)