Comments (14)
I do like this:
import React, { useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import { View, TouchableWithoutFeedback } from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet'
import Animated from 'react-native-reanimated'
import { useNavigation } from 'hooks'
const { Value, onChange, call, cond, eq, abs, sub, min } = Animated
const Modal = ({ children, snapPoints = [400, 0], initialSnap = null }) => {
const sheet = useRef(null)
const { closeModal } = useNavigation()
const position = new Value(1)
const opacity = min(abs(sub(position, 1)), 0.8)
const zeroIndex = snapPoints.length - 1
const height = snapPoints[0]
const handleOutsidePress = () => {
sheet.current.snapTo(zeroIndex)
}
useEffect(() => {
if (sheet.current) {
sheet.current.snapTo(initialSnap || 0)
}
}, [])
return (
<View style={{ flex: 1 }}>
<TouchableWithoutFeedback onPress={handleOutsidePress}>
<Animated.View
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
flex: 1,
backgroundColor: '#000',
opacity,
}}
/>
</TouchableWithoutFeedback>
<Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], closeModal))])} />
<BottomSheet
ref={sheet}
initialSnap={zeroIndex}
snapPoints={snapPoints}
callbackNode={position}
renderHeader={() => (
<View
style={{
backgroundColor: 'rgba(255,255,255,0.5)',
width: 50,
height: 3,
margin: 10,
alignSelf: 'center',
borderRadius: 3,
}}
/>
)}
renderContent={() => (
<View
style={{
backgroundColor: '#fff',
padding: 20,
height,
}}
>
{children}
</View>
)}
/>
</View>
)
}
Modal.propTypes = {
children: PropTypes.any,
snapPoints: PropTypes.array,
initialSnap: PropTypes.number,
}
export default Modal
Usage:
const SomeModal = () => {
return (
<Modal snapPoints={[500, 0]}>
<Text>My modal</Text>
</Modal>
)
}
Works like a charm :)
from react-native-reanimated-bottom-sheet.
It's possible to close the bottom sheet by swiping down so in this case the TouchableWithoutFeedback will stay visible and the first tap will try to close already closed sheet. There must be some kind of "closed" event to implement this properly.
from react-native-reanimated-bottom-sheet.
I do like this:
import React, { useRef, useEffect } from 'react' import PropTypes from 'prop-types' import { View, TouchableWithoutFeedback } from 'react-native' import BottomSheet from 'reanimated-bottom-sheet' import Animated from 'react-native-reanimated' import { useNavigation } from 'hooks' const { Value, onChange, call, cond, eq, abs, sub, min } = Animated const Modal = ({ children, snapPoints = [400, 0], initialSnap = null }) => { const sheet = useRef(null) const { closeModal } = useNavigation() const position = new Value(1) const opacity = min(abs(sub(position, 1)), 0.8) const zeroIndex = snapPoints.length - 1 const height = snapPoints[0] const handleOutsidePress = () => { sheet.current.snapTo(zeroIndex) } useEffect(() => { if (sheet.current) { sheet.current.snapTo(initialSnap || 0) } }, []) return ( <View style={{ flex: 1 }}> <TouchableWithoutFeedback onPress={handleOutsidePress}> <Animated.View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, flex: 1, backgroundColor: '#000', opacity, }} /> </TouchableWithoutFeedback> <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], closeModal))])} /> <BottomSheet ref={sheet} initialSnap={zeroIndex} snapPoints={snapPoints} callbackNode={position} renderHeader={() => ( <View style={{ backgroundColor: 'rgba(255,255,255,0.5)', width: 50, height: 3, margin: 10, alignSelf: 'center', borderRadius: 3, }} /> )} renderContent={() => ( <View style={{ backgroundColor: '#fff', padding: 20, height, }} > {children} </View> )} /> </View> ) } Modal.propTypes = { children: PropTypes.any, snapPoints: PropTypes.array, initialSnap: PropTypes.number, } export default Modal
Usage:
const SomeModal = () => { return ( <Modal snapPoints={[500, 0]}> <Text>My modal</Text> </Modal> ) }
Works like a charm :)
using this code, scrollview outside <View style={{ flex: 1 }}>
cannot be scrolled
from react-native-reanimated-bottom-sheet.
Put a TouchableWithoutFeedback
underneath where you can add a onPress
listener to dismiss.
from react-native-reanimated-bottom-sheet.
Good suggestion @satya164 ! I can't seem to get it to trigger however. Each time I tap on the content in the background it routes to the item details. Here's my structure:
<View>
<BottomSheet
ref={this.bottomSheet}
snapPoints={[500, 250, 0]}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
initialSnap={2}
callbackNode={this.fall}
enabledInnerScrolling={false}
/>
<TouchableWithoutFeedback
onPress={() => {
console.log('pressed')
this.bottomSheet.current.snapTo(1)
}}
>
<View style={{
backgroundColor: '#2c2c2f',
}}>
<Animated.ScrollView>
... list items that navigate to item details
</Animated.ScrollView
</View>
</TouchableWithoutFeedback>
</View>
from react-native-reanimated-bottom-sheet.
It needs to be positioned absolutely above your content, not wrap the content if I understand your code
from react-native-reanimated-bottom-sheet.
Not sure I follow. I have a View
(root component) with a BottomSheet
and a ScrollView
wrapped in a TouchableWithoutFeedback
per (I thought) your suggestion. TouchableWithoutFeedback
requires at least one child component.
from react-native-reanimated-bottom-sheet.
Wrapping doesn't work, because then your scrollview handles touches. You want the touchable to be positioned absolutely over your scrollview so it doesn't let any touches go through.
TouchableWithoutFeedback
requires at least one child component.
You can use an empty view
from react-native-reanimated-bottom-sheet.
@lindesvard could you please explain about import { useNavigation } from 'hooks'
and closeModal
?
Is the hooks
from this package here?
If you could provide some resources or information I can look at, that would be so helpful. Thanks
from react-native-reanimated-bottom-sheet.
@lindesvard
Are you using this https://reactnavigation.org/docs/en/next/use-navigation.html ?
from react-native-reanimated-bottom-sheet.
I do like this:
import React, { useRef, useEffect } from 'react' import PropTypes from 'prop-types' import { View, TouchableWithoutFeedback } from 'react-native' import BottomSheet from 'reanimated-bottom-sheet' import Animated from 'react-native-reanimated' import { useNavigation } from 'hooks' const { Value, onChange, call, cond, eq, abs, sub, min } = Animated const Modal = ({ children, snapPoints = [400, 0], initialSnap = null }) => { const sheet = useRef(null) const { closeModal } = useNavigation() const position = new Value(1) const opacity = min(abs(sub(position, 1)), 0.8) const zeroIndex = snapPoints.length - 1 const height = snapPoints[0] const handleOutsidePress = () => { sheet.current.snapTo(zeroIndex) } useEffect(() => { if (sheet.current) { sheet.current.snapTo(initialSnap || 0) } }, []) return ( <View style={{ flex: 1 }}> <TouchableWithoutFeedback onPress={handleOutsidePress}> <Animated.View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, flex: 1, backgroundColor: '#000', opacity, }} /> </TouchableWithoutFeedback> <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], closeModal))])} /> <BottomSheet ref={sheet} initialSnap={zeroIndex} snapPoints={snapPoints} callbackNode={position} renderHeader={() => ( <View style={{ backgroundColor: 'rgba(255,255,255,0.5)', width: 50, height: 3, margin: 10, alignSelf: 'center', borderRadius: 3, }} /> )} renderContent={() => ( <View style={{ backgroundColor: '#fff', padding: 20, height, }} > {children} </View> )} /> </View> ) } Modal.propTypes = { children: PropTypes.any, snapPoints: PropTypes.array, initialSnap: PropTypes.number, } export default Modal
Usage:
const SomeModal = () => { return ( <Modal snapPoints={[500, 0]}> <Text>My modal</Text> </Modal> ) }
Works like a charm :)
state update then not working
from react-native-reanimated-bottom-sheet.
from react-native-reanimated-bottom-sheet.
Thank you for your work. Closing issue, because provided solution was approved.
from react-native-reanimated-bottom-sheet.
This is how I am handling it:
Basically, idea here is:
- Always render bottom sheet content as 100% height
- Then put upper portion with certain height and transparent background, e.g: 60%, which can be Tappable area, tapping on it, close the bottom sheet
- Second 40% screen is for your bottom sheet content (agin, you can adjust these heights)
function renderBottomSheetContent() {
return (
<View
style={{
height: '100%',
display: 'flex',
justifyContent: 'space-between',
}}>
<TouchableOpacity onPress={closeBottomSheet} style={{height: '60%'}} />
<View
style={{
height: '40%',
backgroundColor: COLORS.white,
padding: SIZES.padding,
}}>
<Text>You can put both header and content in content section</Text>
</View>
</View>
);
}
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 18
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.