Comments (12)
loga4
commented on September 15, 2024
2
add <TouchableOpacity> inside scrollview like:
<BottomDrawer
containerHeight={JOBS_LIST_HEIGHT}
offset={TAB_BAR_HEIGHT}
startUp={false}
downDisplay={DOWN_DISPLAY}
roundedEdges={true}
>
<ScrollView horizontal={true}>
<TouchableOpacity>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
</TouchableOpacity>
</ScrollView>
</BottomDrawer>
from rn-bottom-drawer.
Helo3615
commented on September 15, 2024
2
Still not working for me with <TouchableOpacity>
<View>
<BottomDrawer containerHeight={screenHeight * 0.95}
startUp={false}
downDisplay={screenHeight * 0.75}
shadow={true}
style={styles.bottomDrawer}
>
<View style={styles.topBar} />
<ScrollView style={styles.listContainer}>
<TouchableOpacity activeOpacity={1}>
{ content.map((item, index) =>
<ListItem title={item.name}
leftAvatar={{ source: { uri: item.image } }}
subtitle={item.description}
key={index}
subtitleStyle={styles.listSubtitle}
/>
)}
</TouchableOpacity>
</ScrollView>
</BottomDrawer>
</View>from rn-bottom-drawer.
fsobh
commented on September 15, 2024
2
How can I add a FlatList instead of a scrollview?
from rn-bottom-drawer.
impavidum
commented on September 15, 2024
<BottomDrawer
containerHeight={JOBS_LIST_HEIGHT}
offset={TAB_BAR_HEIGHT}
startUp={false}
downDisplay={DOWN_DISPLAY}
roundedEdges={true}
>
<ScrollView horizontal={true}>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
</ScrollView>
</BottomDrawer>
from rn-bottom-drawer.
venzersiz
commented on September 15, 2024
Oh! I got the same problem.
from rn-bottom-drawer.
yasaricli
commented on September 15, 2024
yarn add https://github.com/yasaricli/rn-bottom-drawer.git
<BottomDrawer
containerHeight={420}
offset={10}
downDisplay={340}
roundedEdges={true}
panResponder={false} // add panResponder to false
responder={(panHandlers) => {
return (
<ScrollView horizontal={true}>
<TouchableOpacity>
<View style={styles.date} {...panHandlers}><Text>BottomDrawer</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
<View style={styles.date}><Text>Today</Text></View>
</TouchableOpacity>
</ScrollView>
)
}}
/>from rn-bottom-drawer.
sharpmachine
commented on September 15, 2024
If swipe on the horizontal ScrollView to open or close the drawer, it doesn't work.
from rn-bottom-drawer.
impavidum
commented on September 15, 2024
@sharpmachine https://github.com/osdnk/react-native-reanimated-bottom-sheet
from rn-bottom-drawer.
haneul512
commented on September 15, 2024
How can I add a FlatList instead of a scrollview?
Wrapping TouchableOpacity around each renderItem did the trick for me
from rn-bottom-drawer.
abbasmoosavi
commented on September 15, 2024
Still not working for me with
<TouchableOpacity><View> <BottomDrawer containerHeight={screenHeight * 0.95} startUp={false} downDisplay={screenHeight * 0.75} shadow={true} style={styles.bottomDrawer} > <View style={styles.topBar} /> <ScrollView style={styles.listContainer}> <TouchableOpacity activeOpacity={1}> { content.map((item, index) => <ListItem title={item.name} leftAvatar={{ source: { uri: item.image } }} subtitle={item.description} key={index} subtitleStyle={styles.listSubtitle} /> )} </TouchableOpacity> </ScrollView> </BottomDrawer> </View>
Thanks! save my life
from rn-bottom-drawer.
wl05
commented on September 15, 2024
yarn add https://github.com/yasaricli/rn-bottom-drawer.git<BottomDrawer containerHeight={420} offset={10} downDisplay={340} roundedEdges={true} panResponder={false} // add panResponder to false responder={(panHandlers) => { return ( <ScrollView horizontal={true}> <TouchableOpacity> <View style={styles.date} {...panHandlers}><Text>BottomDrawer</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> <View style={styles.date}><Text>Today</Text></View> </TouchableOpacity> </ScrollView> ) }} />
but how you slide down the drawer?
from rn-bottom-drawer.
fsobh
commented on September 15, 2024
If You also set the nested ScrollView / FlatList style to have a zIndex : 1 , then the first tap gesture made should be detected by the scrolling view before the bottom sheet. this was my only working work around for nested scroll view in BottomSheet for Android. Still works the same on IOS.
Also, use FlatlLst or ScrollView from react-native-gesture-handler instead of react-native
from rn-bottom-drawer.
Related Issues (20)
- scroll callbacks
- iPhone X HOT 3
- Three positions
- Default position bottom HOT 1
- Can't drag if there's a touchable HOT 3
- Lagging in Android HOT 1
- Dyanamic Height for different screens
- Error when using with Typescript HOT 2
- touchableopacity is not working inside swipe view
- Deformity, when turning the screen sideways HOT 4
- AnimatedValue: Attempting to set value to undefined HOT 3
- useNativeDriver required HOT 4
- How can this be extended to a top drawer?
- Typescript compatible? HOT 1
- Issue : UseNativeDriver not specified HOT 1
- Unable to see bottom drawer when orientation is change to landscape
- 2 continous Collapse will cause the content make it to top
- Drawer jumps to top of screen after pulling down when drawer is in downDisplay position HOT 1
- Error
- Error: AnimatedValue: Attempting to set value to undefined
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 rn-bottom-drawer.