Comments (11)
@paranoia5 Hooks version:
const MyBottomSheet = (props: Props) => {
const { onClose } = props
const bottomSheetRef = useRef<BottomSheet | null>(null)
const callbackNode = useRef(new Animated.Value(1))
Animated.useCode(
Animated.onChange(
callbackNode.current,
Animated.block([
Animated.cond(
Animated.greaterOrEq(callbackNode.current, 1),
Animated.call([], () => {
onClose && onClose()
})
),
])
),
[onClose]
)
return (
<React.Fragment>
<BottomSheet
ref={bottomSheetRef}
callbackNode={callbackNode.current}
initialSnap={0}
snapPoints={[0, MODAL_HEIGHT]}
renderHeader={...}
renderContent={...}
/>
</React.Fragment>
)
}
from react-native-reanimated-bottom-sheet.
@songxiaoliang @jcatink Here you have code which works with normal classes :) I hope it will help:
Snack: https://snack.expo.io/HJgqFIq-S
Code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated'
import Constants from 'expo-constants';
import BottomSheet from 'reanimated-bottom-sheet';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
class MySheet extends React.Component {
bottomSheetRef = React.createRef();
callbackNode = new Animated.Value(0);
throttleFlag = false;
state = {
callback: 0,
}
setCallback = (callback) => {
if (!this.throttleFlag) {
this.throttleFlag = true
setTimeout(() => {
this.throttleFlag = false
this.setState({ callback })
}, 100)
}
}
render() {
return (
<React.Fragment>
<Text style={styles.paragraph}>Callback: {this.state.callback}</Text>
<Animated.Code exec={() => Animated.block([Animated.call([this.callbackNode], ([callback]) => this.setCallback(callback))])} />
<BottomSheet
ref={this.bottomSheetRef}
callbackNode={this.callbackNode}
snapPoints={[100, "80%"]}
renderHeader={() => <View style={styles.header}><Text>GRAB ME</Text></View>}
renderContent={() => (
<Card>
<AssetExample />
</Card>
)}
/>
</React.Fragment>
);
}
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<MySheet />
</View>
);
}
}
const styles = StyleSheet.create({
header: {
alignSelf:'center',
backgroundColor: 'turquoise',
width: 200,
height: 20,
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
top: 100,
left: 50,
position:"absolute",
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
from react-native-reanimated-bottom-sheet.
You can combine Animated.Code
component with callbackNode
property e.g.
class MySheet extends React.Component {
bottomSheetRef = React.createRef()
callbackNode = React.createRef()
render() {
return (
<React.Fragment>
{this.callbackNode.current && (
<Animated.Code>
{() => Animated.call(
[this.callbackNode.current],
(args) => {
// do someething
}
)
}
</Animated.Code>
)}
<BottomSheet
ref={this.bottomSheetRef}
callbackNode={this.callbackNode}
snapPoints={[0, '80%']}
renderHeader={
() => (
// your header
)
}
renderContent={
() => (
// your content
)
}
/>
</React.Fragment>
)
}
In this example if args[0] === 1 - sheet is fully opened
if args[0] === 0 sheet is fully closed
from react-native-reanimated-bottom-sheet.
tried your solution @ajanauskas but didn't work with me. callbackNode.current is always null.
from react-native-reanimated-bottom-sheet.
@songxiaoliang if it works with you, could you please share with us. I'm using functional components and react hooks.
from react-native-reanimated-bottom-sheet.
@ajanauskas not working
<ModalBox position="bottom" backButtonClose backdropPressToClose onOpened={this.onModalOpened} onClosed={this.onModalClosed} ref={(ref) => { this.modal = ref; }} > {this.callbackNode.current && ( <Animated.Code> { () => Animated.call( [this.callbackNode.current], (args) => { // do someething alert(args) } ) } </Animated.Code> )} <BottomSheet ref={this.bottomSheetRef} callbackNode={this.callbackNode} snapPoints={[300, 600, 0]} renderContent={() => children} /> </ModalBox>
from react-native-reanimated-bottom-sheet.
@paranoia5 not working
from react-native-reanimated-bottom-sheet.
@ajanauskas Can you give an example of not using hooks?
from react-native-reanimated-bottom-sheet.
Any use without hooks? Or a possible library fix? Why is it always null anyway?
from react-native-reanimated-bottom-sheet.
I want to implement a close callback that listens to the bottom-sheet. How do I implement this?
Isn't it enough to set an additional lowest snapPoint (in case you already don't have one with 0 value) and check whether callbackNode equals to 0? Or is more like in #81 and the issue can also be closed?
from react-native-reanimated-bottom-sheet.
Closing due to lack of activity, feel free to create a new issue report if presented solutions were not suffictient.
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.