Comments (15)
I am facing the same problem. Any news with fix to this? @gorhom
from react-native-portal.
Ok, I have found a solution.
I wrapped my Portal provider with GestureHandlerRootView
<GestureHandlerRootView style={{ flex: 1 }}>
<PortalProvider>
<RootNavigator
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
</PortalProvider>
</GestureHandlerRootView>
and my BottomSheet component looks like this:
<Portal>
<BottomSheet {...props] >
<Content />
</BottomSheet>
</Portal>
From my side is closed. Thanks for help.
from react-native-portal.
react-native-reanimated and use portal => problem
from react-native-portal.
Any reproducible sample code to work on ?
from react-native-portal.
thanks @miihauu & @AlanSl for investigating this issue, i have added a section in the readme for the usage with gesture handler.
i'll close the ticket, if someone still faces the issue, please create a new issue
from react-native-portal.
Could the underlying cause be similar to this (solved) issue on react-native-modalfy
- colorfy-software/react-native-modalfy#66?
They're doing a similar thing to this library (using context for pure-JS portal/modal-like behaviour without using React Native's Modal
) and their issue was also specific to Android, and also seemed to happen when reanimated was in use and when the feature is used multiple times.
Looks like their issue turned out to be something to do with timing when elements inside the portal/pseudo-modal contained reanimated-powered enter/exit animations.
(off-topic - I don't know why there has been three comments on this issue in the last 20 minutes, mine is completely coincidental 😅)
from react-native-portal.
@AlanSl Thank you for your involvment. I've figured out that app is not exactly freezing, but the bottom sheet is not reacting for dragging it down when it is wrapped in <Portal></Portal>
. When I placed button inside sheet to closing it - it works, but I would like to have ability to use gestures. On iOS it works fine so only android devices have problems with that.
Thanks and still looking for solution for that.
from react-native-portal.
i just encountered this issue again. I think it might be due to "exiting" animation of an Animated.View. The structure i have is something like this
<PortalHost name="menu" />
<AppNavigator>
...many levels deeper a component that gets mounted/unmounted when menu is activated/dismissed
<Portal hostName="menu">
<Animated.View exiting={exitingAnimation} ...>
...
</Animated.View>
</Portal>
so maybe Animated.View tries to play its exiting animation but Portal does something upon unmount that breaks it all? But again it works fine on iOS...
from react-native-portal.
any news?
from react-native-portal.
@hodangnamtien I have to the same problem
from react-native-portal.
Same problem. After two times make portal visible, android app become freeze
from react-native-portal.
The same issue on my end. Would be grateful for some updates about this issue from you. @gorhom
from react-native-portal.
I am using react-native-portal
with react-native-bottom-sheet
.
Applying provider in App.tsx
const App = () => {
return (
<PortalProvider>
<RootNavigator
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
</PortalProvider>
)}
Using Portal with BottomSheet. This Sheet
component is showing with Map (Mapbox library) in background.
const Sheet = () => {
const { bottomSheetRef } = myContextHook()
return (
<Portal>
<BottomSheet
index={-1}
ref={bottomSheetRef}
snapPoints={[10, 75]}
enablePanDownToClose
backdropComponent={(props) => (
<BottomSheetBackdrop {...props} pressBehavior={'close'} appearsOnIndex={0} disappearsOnIndex={-1} />
)}
onChange={() => {}}
>
<BottomSheetScrollView contentContainerStyle={{ paddingBottom: '8%' }}>
<Box>
My content
</Box>
</BottomSheetScrollView>
</BottomSheet>
</Portal>
)
}
"dependencies": {
"@gorhom/bottom-sheet": "^4.1.5",
"@gorhom/portal": "^1.0.13",
"react-native-reanimated": "^2.3.1",
"react-native-screens": "3.10.2",
Issue appears only on Android. iOS works fine.
from react-native-portal.
I tried a few combinations of reanimated
animations, portals and navigators on a standalone app on an Android device, and couldn't replicate this. Even navigating during an exit animation in a portal worked fine.
So this is more subtle than "react-native-reanimated and use portal => problem". More example cases would help.
@miihauu There's a lot of possible causes in that example; dozens of animations within BottomSheet alone, plus the navigator. Does the issue still occur with that bottom-sheet / portal setup without the navigator? E.g. if you temporarily simplify it to this:
const App = () => {
return (
<PortalProvider>
<View>/* Some pressable that brings up the bottom sheet */</View>
<Sheet />
</PortalProvider>
)}
from react-native-portal.
@lightrow I commented this "exiting" code then fine but without animated. when re-comment and after first-time call exiting => I don't see any bottom sheets. How can we fix it? And Seem I see a run function with 'worklet' maybe this bottomsheet also die
from react-native-portal.
Related Issues (20)
- Cant swipe my modal
- Is there a way to change the host name to another host name? HOT 4
- When i use flalist inside this component and data=[] the RefreshControl fails to trigger. HOT 1
- Error `__DEV__ is not defined` on Web if not patched manually in webpack
- Couldn't find a navigation object HOT 1
- Nesting Portals
- Context doesn't behave as expected HOT 5
- Importing FullWindowOverlay is only valid on iOS devices. HOT 2
- Portal content constantly re-rendering
- Keeping only last Portal node in PortalHost HOT 1
- Can not mock <Portal /> using Jest and react-test-renderer HOT 2
- I need help with handling state changes coming from another component HOT 1
- Is there a way to dynamically add some node in Portal? HOT 1
- FullWindowOverlay and Portal fails on react native fullscreen presentation modal HOT 4
- unmounting the wrong component when using `addPortal` and `Portal` together.
- Portal not displayed when it's inside BottomSheetModal HOT 2
- Portal not placed over react native navigation tabs HOT 7
- Use contextBridge? HOT 4
- Flicker appears on keyboard close in form page. HOT 2
- [BottomSheetModal] [BottomSheetFlatList] Persist last scroll position on the flatlist when reopening the bottom sheet modal again HOT 1
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-portal.