Comments (5)
my code in detecting the current state of the bottomsheet. I only have 2 snap points, Full height and zero height, so the % should be 1 and 0.
Be careful tho if you have snap points [100%,30%,0], the call back sometimes will NOT be exactly 30% e.g. 29.999999 ....
bottomSheetCallback = ([value]) => {
//1 is closed, 0 is opened
if (value === 1) {
//closed
}
if (value === 0) {
//opened
}
}
render() {
return (
<View style={{position: 'absolute', bottom: 0, left: 0, height: containerHeight, width: containerWidth}} pointerEvents={'box-none'}>
<BottomSheet
ref={ref => this.bottomSheet = ref}
snapPoints={[COMMONS.DEVICE_HEIGHT, 0]}
initialSnap={1}
callbackNode={this.value_fall}
renderHeader={this.renderHeader}
/>
<Animated.Code
exec={
block([
cond(eq(this.value_fall, 0), call([this.value_fall], this.bottomSheetCallback)),
cond(eq(this.value_fall, 1), call([this.value_fall], this.bottomSheetCallback)),
// Animated.call([this.value_fall], this.logNativeValue ), // 1 close -> 0 when open
set(this.value_backdrop, sub(1, this.value_fall)), //backdrop opacity, 1 - %
])
}/>
{/*Overlay shadow*/}
{this.props.store.NavigationStore.isApplicationCameraVisible ? (
<Animated.View style={{
position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
opacity: this.value_backdrop,
backgroundColor: '#000'
}}
pointerEvents={'none'}
/>
) : null}
</View>
);
from react-native-reanimated-bottom-sheet.
Use the callbackNode
from react-native-reanimated-bottom-sheet.
Hi @samfriend, thanks for your reply. Can you give me an example of usage? It's not clear how to use this feature.
from react-native-reanimated-bottom-sheet.
Hmmm so in this case, I need to add react-native-reanimated
as a direct dependency, right? That is what I was trying to avoid, anyway, looks like necessary. Thanks for the explanation and clear example.
from react-native-reanimated-bottom-sheet.
my code in detecting the current state of the bottomsheet. I only have 2 snap points, Full height and zero height, so the % should be 1 and 0.
Be careful tho if you have snap points [100%,30%,0], the call back sometimes will NOT be exactly 30% e.g. 29.999999 ....
bottomSheetCallback = ([value]) => { //1 is closed, 0 is opened if (value === 1) { //closed } if (value === 0) { //opened } } render() { return ( <View style={{position: 'absolute', bottom: 0, left: 0, height: containerHeight, width: containerWidth}} pointerEvents={'box-none'}> <BottomSheet ref={ref => this.bottomSheet = ref} snapPoints={[COMMONS.DEVICE_HEIGHT, 0]} initialSnap={1} callbackNode={this.value_fall} renderHeader={this.renderHeader} /> <Animated.Code exec={ block([ cond(eq(this.value_fall, 0), call([this.value_fall], this.bottomSheetCallback)), cond(eq(this.value_fall, 1), call([this.value_fall], this.bottomSheetCallback)), // Animated.call([this.value_fall], this.logNativeValue ), // 1 close -> 0 when open set(this.value_backdrop, sub(1, this.value_fall)), //backdrop opacity, 1 - % ]) }/> {/*Overlay shadow*/} {this.props.store.NavigationStore.isApplicationCameraVisible ? ( <Animated.View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, opacity: this.value_backdrop, backgroundColor: '#000' }} pointerEvents={'none'} /> ) : null} </View> );
Is it possible to get index when there are more than 2 snapPoints?
from react-native-reanimated-bottom-sheet.
Related Issues (20)
- Bottomsheet is under other components
- use in react js app HOT 1
- Bottomsheet automatically opening and closing on rotation HOT 1
- how to scroll list to the bottom? HOT 1
- Overlay HOT 2
- Property 'snapToIndex' does not exist on type 'never'.ts(2339) HOT 2
- Is the package still maintained? HOT 1
- BottomSheet is overlapping the Content
- can't run in RN-cli HOT 1
- enabledGestureInteraction Prop
- not working in RN 0.69 HOT 4
- FlatList wont Scroll Till end of screen HOT 4
- Is this community still active? HOT 1
- BottomSheet import from react-native-reanimated-bottom-sheet is not available in RN 0.69.1 HOT 1
- Drag not working at all
- Preventing keyboard from dismissing with FlatList in BottomSheet
- How to set content height dynamically based on content?
- export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' HOT 2
- reanimated-bottom-sheet & react-native-reanimated HOT 4
- Cannot read property 'prototype' of undefined HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-reanimated-bottom-sheet.