Comments (46)
@Under-Warz - just to make sure, did you set both enabledInnerScrolling
and enabledContentTapInteraction
to false?
from react-native-reanimated-bottom-sheet.
here is the config I've made to make it work on both iOS and Android with button and horizontal drag slider
<BottomSheet
enabledContentGestureInteraction={false}
enabledInnerScrolling={false}
enabledContentTapInteraction={false}
snapPoints={[250, 50]}
renderHeader={renderHeader}
renderContent={renderContent}
onCloseStart={handleCloseStarted}
/>
And the button inside the view use TouchableOpacity
from RN for iOS and TouchableOpacity
from react-native-gesture-handler
for Android
from react-native-reanimated-bottom-sheet.
I see the problem.
Gesture-handler ecosystem might not be consistent in some parts with RN gesture system. So I recommend using touchable from RNGH.
However, they do not work on iOS (:cry:). As a temporary fix, you might use RNGH touchables on Android and RN touchables on iOS.
It should not be like, but it's a problem in RNGH.
from react-native-reanimated-bottom-sheet.
same issues
from react-native-reanimated-bottom-sheet.
Sorry for not being very active. I’ll happily accept any PRs but now I’m truly overwhelmed by my job and react navigation stuff. Sorry I do my best, but I’m not any superhero :/
from react-native-reanimated-bottom-sheet.
Please fix this issue, we are waiting for fixes
from react-native-reanimated-bottom-sheet.
After a little rework of @slorber example I've got something like this. Works at least for iOS at the time and I will test it on android tomorrow.
import React, { memo } from "react";
import { Platform, TouchableOpacity } from "react-native";
import { TouchableOpacity as RNGHTouchableOpacity } from "react-native-gesture-handler";
const BottomSheetButton = ({ children, ...otherProps }) => {
if (Platform.OS === "android") {
return (
<RNGHTouchableOpacity {...otherProps}>{children}</RNGHTouchableOpacity>
);
}
return <TouchableOpacity {...otherProps}>{children}</TouchableOpacity>;
};
export default memo(BottomSheetButton);
Anyways,, hope that #85 get merge asap...
from react-native-reanimated-bottom-sheet.
One work around i found was to call snapTo
twice.
<TouchableOpacity
onPress={() => {
bottomSheetRef.current?.snapTo(0);
bottomSheetRef.current?.snapTo(0);
}}
>
from react-native-reanimated-bottom-sheet.
If that helps you can do a custom component to fix it like this one:
import { TouchableOpacity as RNGHTouchableOpacity } from 'react-native-gesture-handler';
const BottomSheetTouchableWorkaround = ({
children,
onPress,
}: {
children: ReactNode;
onPress: () => void;
}) =>
Platform.select({
android: <RNGHTouchableOpacity onPress={onPress}>{children}</RNGHTouchableOpacity>,
ios: (
<TouchableOpacity onPress={onPress}>{children}</AppTouchableOpacity>
),
});
from react-native-reanimated-bottom-sheet.
Hi all
add this prop to BottomSheet
enabledContentTapInteraction={false}
✅
from react-native-reanimated-bottom-sheet.
@safaiyeh 's solution worked perfectly for me 🎉
from react-native-reanimated-bottom-sheet.
@Fallup I implement a mini-player So the parent View i set the height to 60 and backgroundColor: black,
and as i say i can't respond to any action inside the component inside the renderContent Function
But when i deleted the background property from View style,
The player Component actions work well!!
So why? :"D
<View style={{height: 60}}>
<BottomSheet
ref={bottomSheetRef}
initialSnap={0}
callbackNode={fall}
snapPoints={snapPoints}
renderHeader={renderHeader}
renderContent={renderContent}
enabledManualSnapping
enabledBottomInitialAnimation
enabledBottomClamp
overdragResistanceFactor={500}
enabledContentTapInteraction={true}
enabledInnerScrolling={false}
enabledContentGestureInteraction={false}
/>
</View>
from react-native-reanimated-bottom-sheet.
I need the internal scroll but with this configuration not working the scroll, works only onpress but the scroll does not, how does this project to operate the scroll and also the onpress
https://market.nativebase.io/view/react-native-cryptostream-app-theme????????????'
i find a solution for me
<View style={styles.container}>
<BottomSheet
ref={this.bs}
snapPoints={['85%', '51%']}
renderContent={this.renderInner}
renderHeader={this.renderHeader}
initialSnap={1}
enabledInnerScrolling={true}
enabledContentTapInteraction={false}
/>
</View>
in renderinner
<Animated.View style={styles.panel}>
<View style={styles.align}>
<Icon
active
type={'FontAwesome5'}
name="directions"
style={{ color: "red",right:'10%' }}
/>
<Text style={styles.panelTitle}>{this.state.request.address_final}</Text>
</View>
<View style={styles.align}>
<Icon
active
type={'MaterialIcons'}
name="my-location"
style={{ color: "blue",right:'10%' }}
/>
<Text style={styles.panelSubtitle}>{this.state.request.direction}</Text>
</View>
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
<View style={styles.align}>
<Text style={styles.titleText}>
Presupuesto
</Text>
<Text style={{fontSize: 20, textAlign:'right',flex:1 }}>
${this.state.request.budget}
</Text>
</View>
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
<View style={styles.align}>
<Text style={styles.titleText}>
Numero de pasajeros
</Text>
<Text style={{fontSize: 20, textAlign:'right',flex:1 }}>
{this.state.request.number_users}
</Text>
</View>
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
<View style={{flexDirection:'column',padding:10,}}>
<Text style={{fontSize: 14,color: 'gray',marginBottom: 10}}>
Datos adicionales
</Text>
<Text style={{fontSize: 15}}>
{this.state.request.description}
</Text>
</View>
<Button
warning
large
rounded
onPress={() => Alert.alert(
'',
'Esta seguro que desea cancelar el servicio?',
[
{text: 'Si', onPress: () => this.CancelService()},
{text: 'No', onPress: () => null},
],
{cancelable: true},
)}>
<Text>Cancelar</Text>
</Button>
</Animated.View>
and important in style
panel: { // height: '100%', padding: 20, backgroundColor: 'white', },
from react-native-reanimated-bottom-sheet.
Having the same issue, and I stumbled upon the same workaround on my own, however, this is not a perfect solution if one uses a UI library, (ex: react-native-paper) in my case, then the components stop working (ex: button) and there is not easy way to patch it, besides re-implementing the components using Touchables.
Just my 2 cents here, would like to know if/when this gets fixed.
from react-native-reanimated-bottom-sheet.
@Under-Warz - just to make sure, did you set both
enabledInnerScrolling
andenabledContentTapInteraction
to false?
It solved my problem for react native switch,
for any slider in use you also need to disable enabledContentGestureInteraction.
from react-native-reanimated-bottom-sheet.
Hmm cool. Tried the workaround and it's working. Hope your PR gets merged soon.
In the meantime, do you think #15 is related ? Or were you even able to reproduce the issue ? @osdnk
from react-native-reanimated-bottom-sheet.
I was able to repro, but I don’t have now a strong opinion
from react-native-reanimated-bottom-sheet.
is this fixed yet in the new release?
from react-native-reanimated-bottom-sheet.
@osdnk Looks like the pull is ready, no? This blocks a lot of plans for our app, possible to merge?
from react-native-reanimated-bottom-sheet.
And react-native-gesture-handler not working on iOS, so we have to choose touchable dependent on OS
from react-native-reanimated-bottom-sheet.
@osdnk I think the big question is if this pull is what would fix this issue. If so, it's waiting to be reviewed/merged.
from react-native-reanimated-bottom-sheet.
I face a little difference from this problem.
I use FlatList, TextInput and TouchableOpacity from the Gesture Handler in BottomSheet.
I use TextInput in the BottomSheet header to filter the data that will be created by FlatList. If TextInput never focuses when BottomSheet appears, BottomSheet can hide when I touch each item, or I can say, it can be programmatically hidden. But, once TextInput is focused, BottomSheet won't hide programmatically.
IDK why this BottomSheet can not be hidden but the onPress function is executed properly.
FYI, I put this.bottomSheet.current.snapTo (0) in the onPress function with the method for saving selected items.
I hope this problem will be resolved in the next release because my boss has asked when I can release this application.
from react-native-reanimated-bottom-sheet.
Might be resolved by the PR I just submitted: #85
from react-native-reanimated-bottom-sheet.
@sebinq - were you able to try the PR I submitted? It’s working great for me (both iOS and Android) but your use case may be different.
from react-native-reanimated-bottom-sheet.
@rgoldiez i didn't right now I'm in busy but tomorrow maybe :)
from react-native-reanimated-bottom-sheet.
@rgoldiez same issue with the new prop enabledContentTapInteraction
on Android
from react-native-reanimated-bottom-sheet.
@Under-Warz - just to make sure, did you set both
enabledInnerScrolling
andenabledContentTapInteraction
to false?
Set enabledInnerScrolling
and enabledContentTapInteraction
to false to make work with onPress()
from react-native-reanimated-bottom-sheet.
I need the internal scroll but with this configuration not working the scroll, works only onpress but the scroll does not, how does this project to operate the scroll and also the onpress
https://market.nativebase.io/view/react-native-cryptostream-app-theme????????????'
from react-native-reanimated-bottom-sheet.
Hey
For what it's worth, here's the solution I've found to encapsulate the workaround:
export const AppBottomSheetTouchableWrapper = (
props: { children: ReactNode } & Pick<
TouchableWithoutFeedbackProps,
'onPress' | 'disabled'
>,
) =>
Platform.select({
android: <RNGHTouchableWithoutFeedback {...props} />,
ios: (
<TouchableWithoutFeedback {...props}>
<View>
<View pointerEvents="none">{props.children}</View>
</View>
</TouchableWithoutFeedback>
),
});
And I have to wrap the existing touchable component (without providing it the onPress prop:)
<AppBottomSheetTouchableWrapper onPress={onPress}>
<AppButton>ButtonText</AppButton>
</AppBottomSheetTouchableWrapper>
I'm happy with that as it seems to encapsulate the workaround with a common abstraction for both platforms
from react-native-reanimated-bottom-sheet.
Does anyone have a workaround to make a <FlatList />
scrollable? I have used a combination of these workarounds within my app (we use lots of sheets with Touchbales in renderContent
and renderHeader
and FlastLists within renderContent
) and none of the workarounds seem to allow scrolling within a <FlatList />
for Android only. iOS works great. Same goes for a WebView within renderContent
I have tried setting each enabledInnerScrolling={true/false}
enabledContentTapInteraction={true/false}
enabledGestureInteraction={true/false
and it didn't seem to make a difference.
from react-native-reanimated-bottom-sheet.
When I inspect there's a <BottomSheetBehavior />
blocking gestures above my components.
from react-native-reanimated-bottom-sheet.
Have you tried using flatlist component from react native gesture package?
from react-native-reanimated-bottom-sheet.
@ospfranco I have, thank you. Unfortunately it's the same. I think it is stemming from having multiple sheets rendered at once and somehow it's pushing a BottomSheetBehavior
up, even when all sheets are closed. This is my best guess so far. It's not consistent either, sometimes it's there, sometimes it's not.
from react-native-reanimated-bottom-sheet.
Hey Guys. I too encountered the same issue. and I have tried an alternative solution and it worked for me and per my requirement.
I just added an Alert on TouchableOpacity and on Alert OnPress handled the HideBottomSheet.
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK', onPress: () => {
this.bs.current.snapTo(0);
}
},
],
{ cancelable: false },
);
from react-native-reanimated-bottom-sheet.
Nice, I'm assuming the first tap brings the content to view.. then gets initialized. Not exactly sure if that logic sounds right. Might be a step in the right direction about the bug.
from react-native-reanimated-bottom-sheet.
yea @safaiyeh i was having the same issue, i created a button to snapTo but it took two button presses to get the component to respond.
what's interesting is that in my other project (expo based), this works just fine
but this current non expo project has the issue.
TouchableOpacity from RN is also not working on android
TouchableWithoutFeedback works fine
react version 16.8.1
react native version 0.61.3
react native gesture handler 1.5.3
react native reanimated 1.7.0
from react-native-reanimated-bottom-sheet.
Yeah I tried TouchableOpacity
and it didn’t work. So I came up with the double call because of the double tap.
from react-native-reanimated-bottom-sheet.
This problem still exists and @safaiyeh double call workaround does not work for me unfortunately. Will this be fixed anytime soon? Thank you!
edit:
@Under-Warz - just to make sure, did you set both
enabledInnerScrolling
andenabledContentTapInteraction
to false?
setting these 2 to false works for me actually! not sure why, but thanks!
from react-native-reanimated-bottom-sheet.
Used same workaround as @safaiyeh, issue is reproducible for both platforms
from react-native-reanimated-bottom-sheet.
Same issue. Again @safaiyeh 's workaround works for me
from react-native-reanimated-bottom-sheet.
One work around i found was to call
snapTo
twice.<TouchableOpacity onPress={() => { bottomSheetRef.current?.snapTo(0); bottomSheetRef.current?.snapTo(0); }} >
I don't know do i have same issue but evry time i am tring to close bottom sheet after pressing button inside the sheet, it doesnt closing even tho i see that my method working (i am changing quality of a hls stream in player) but snapTo
doesnt working. And aftet second press it working exactly how i want, but now i need to press 2 times button which shows bottom sheet.
chooseQuality = (quality: ParsedStream) => {
this.setState({
currentQuality: quality.url
})
this.bottomSheet.current.snapTo(1);
this.bottomSheet.current.snapTo(1);
}
copying evrywhere where i call snapTo
and call it 2 times fixes my problem, but oh my this is some mess for me, i am new to react and js and this is looking like a terrible workaround... but, man, with my knowledge of coding i have no idea what is the better way to fix it.
from react-native-reanimated-bottom-sheet.
Hello Guys,
Hope you Fine,
I have same issue, in render content, I import my own component "Player Controller"
but I can't press to any action inside it, So How can I solve it?
const renderContent = () => {
return (
<AnimatedView
style={[styles.contentContainer, {opacity: animatedContentOpacity}]}>
<Player />
</AnimatedView>
)
}
from react-native-reanimated-bottom-sheet.
For me the issue was that I had to put the BottomSheet View
above the screen content View
in the component tree:
<View>
<View style={{flex: 1}}>
...BottomSheet here
</View>
<View>
... actual screen content here
</View>
</View>
It didn't matter what zIndex
I specified to the BottomSheet it was correctly placedin the bottom but the there was always some glitch with the interactive elements - either buttons or scroll view was not tap-able. Only the order of elements solved this for me.
Also I have few buttons and horizontal scroll view inside the BottomSheet and it is working fine with standard Button
from react-native, but I had to use ScrollView
from gesture-handler:
import { ScrollView } from 'react-native-gesture-handler'
My BottomSheet configuration looks like this:
<BottomSheet
ref={refBottomSheet}
snapPoints={snapPoints}
initialSnap={0}
enabledManualSnapping
enabledBottomInitialAnimation
enabledBottomClamp
overdragResistanceFactor={200}
enabledContentTapInteraction={true}
enabledInnerScrolling={false}
enabledContentGestureInteraction={false}
renderContent={renderFooterContent}
renderHeader={renderFooterHeader}
/>
from react-native-reanimated-bottom-sheet.
@timothystewart6 Did you able to solve the Webview interaction problem?
from react-native-reanimated-bottom-sheet.
I haven't tried that. you can send make a sandbox.
@timothystewart6 Did you able to solve the Webview interaction problem?
from react-native-reanimated-bottom-sheet.
yes i have the same problem with bottomsheet when i put a touchableopacity , it didnr work any help pleaase ?
here is my code
` <BottomSheet
isVisible={isVisible}
containerStyle={{backgroundColor:'green',marginTop:metrics.heightPercentageToDP(50),borderTopLeftRadius:20,borderTopRightRadius:20}}
modalProps={{
animationType: 'fade',
hardwareAccelerated: true,
onRequestClose: () => {
setVisilibe(!isVisible);
},
}}>
<Icon name="close" color="white" size={50} onPress={()=>setVisilibe(false)} style={{alignSelf:'center'}}/>
<Button text="hello from bottomsheet2" onPress={()=>setVisilibe(!isVisible)}/>
<TouchableOpacity onPress={()=>setVisilibe(!isVisible)} style={{borderWidth:2}}>
<Text>helooooooooooooo</Text>
</TouchableOpacity>
</BottomSheet>`
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.