Comments (41)
Thanks @JonnyBurger for the dive in. I think in the early version of the package, withReactModal
was only allowed for iOS and not Android because I run in these issues. Not sure why I removed this condition later π
I'll add a note on the documentation about that.
@Frindecent You might have forgotten to install react-native-gesture-handler
: https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION (provides a repo with the issue I can run locally if the issue still persists)
from react-native-modalize.
Thnx me later..!!!
after spending hours....
import { GestureHandlerRootView } from "react-native-gesture-handler";
"react-native-gesture-handler": "^2.6.0", add this line in package.json
from react-native-modalize.
this helps me to make swipeable working
https://aboutreact.com/swipe-gestures-not-working-in-android/
from react-native-modalize.
HI @WrathChaos, yes I looked at it, you forget to install RNGH on android: https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#android
For everyone else on the discussion, and that have an issue with Android, make sure first you complete this step, otherwise, it won't work on android.
from react-native-modalize.
@jeremybarbet its allready there since i am using react-navigation .
no idea whatsup.. should be some issue with gesture-handler. still looking into it. i will shortly provide a repo with the issue
from react-native-modalize.
Hi,
I will close this issue. Multiple new features have been introduced:
withReactModal
is now working with Android if you are usingreact-native-gesture-handler
>= 1.6.0- I wrapped Modalize with
GestureHandlerRootView
fromreact-native-gesture-handler
that setup the package automatically without having to do the manual step on Android MainApplication.java file or with thegestureHandlerRootHOC
if you are usingreact-native-navigation
. - I published a package called
react-native-portalize
to be able to render Modalize on top of a bottom tab navigation (for example)
from react-native-modalize.
@JonnyBurger That's indeed really broken.
I never use Modalize
with withReactModal
since it should disappear from the react-native core, and I'm working with react-native-navigation
all the time that have showOverlay
function that makes it super easy to display anything wherever you are in your app.
- With that being said, we need a new one to do it. I haven't check new
react-navigation
API in details, but they must have a way to show overlay. - We still need a solution for users not using both of these navigators.
I have no answer yet, I'm open for ideas or feedbacks
from react-native-modalize.
Hi,
I am also facing a similar issue, with updated react, react-native and gesture lib.
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-modalize": "^1.1.1",
"react-navigation": "^3.11.1"
from react-native-modalize.
@jeremybarbet yeah I am on SDK 36 now and everything is working for me, as long as I don't use the Header Component. (It won't capture taps on android). I ended up placing my stuff inside of it using a high zIndex. Its stable now for me.
Sidenote: not working when using withReactModal. I had to use a portal!
from react-native-modalize.
The issue might be the use of the withReactModal
props, I haven't test it for a bit of time. Can you try to take it out and see if it works?
If you still have issue, could you create a simple repo containing the issue, so I could run it and look at it :)
from react-native-modalize.
Hey, just hit this issue as awell.
It indeed has to do with the modal, I made a repro: https://snack.expo.io/@jonnyburger/sponaneous-edamame
Of course one could put the modal at the top of the React tree to circumvent this problem, but it would be nice if we could colocate the code in the same component from where you are calling the modal.
from react-native-modalize.
Thanks everyone, I will try again. If I still have that issue, I will notify everyone later :)
from react-native-modalize.
@saurabhdsachan Are you using either <Modal>
(from react-native) or withReactModal={true}
?
from react-native-modalize.
@saurabhdsachan Are you using either
<Modal>
(from react-native) orwithReactModal={true}
?
Hi @jeremybarbet ,
No, I am not using <Modal>
or withReactModal={true}
here is the sample file.
import React from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import Modalize from 'react-native-modalize';
import faker from 'faker';
import { Button } from '@components/index';
const { width } = Dimensions.get('window');
export default class Designs extends React.PureComponent {
static navigationOptions = {
header: null,
};
modal = React.createRef();
renderContent = () => [
<View style={s.content__header} key='0'>
<Text style={s.content__heading}>Article title</Text>
<Text style={s.content__subheading}>November 11st 2018</Text>
</View>,
<View style={s.content__inside} key='1'>
<Text style={s.content__paragraph}>{faker.lorem.paragraphs(3)}</Text>
<Text style={[s.content__subheading, { marginTop: 30 }]}>Horizontal ScrollView</Text>
<ScrollView style={s.content__scrollview} horizontal>
{Array(5)
.fill(0)
.map((_, i) => (
<View key={i} style={s.content__block} />
))}
</ScrollView>
<Text style={s.content__paragraph}>{faker.lorem.paragraphs(2)}</Text>
<Text style={[s.content__subheading, { marginTop: 30 }]}>Vertical ScrollView</Text>
<ScrollView style={[s.content__scrollview, { height: 200 }]}>
{Array(5)
.fill(0)
.map((_, i) => (
<View key={i} style={[s.content__block, { width, marginBottom: 20 }]} />
))}
</ScrollView>
<TextInput style={s.content__input} placeholder='Type your username' />
</View>,
];
onClosed = () => {
const { onClosed } = this.props;
if (onClosed) {
onClosed();
}
};
openModal = () => {
if (this.modal.current) {
this.modal.current.open();
}
};
render() {
return (
<>
<Modalize
ref={this.modal}
onClosed={this.onClosed}
scrollViewProps={{
showsVerticalScrollIndicator: false,
stickyHeaderIndices: [0],
}}
>
{this.renderContent()}
</Modalize>
<Button color='primary' onPress={() => this.openModal()}>
<Text>Hi</Text>
</Button>
</>
);
}
}
const s = StyleSheet.create({});
from react-native-modalize.
Could you create a git repository with the error? your code looks good, so I would need to try it to check
from react-native-modalize.
Regarding the error if you use Modal, there might be nothing we can do about it since it is a bug in component in React native or react-native-gesture-handler.
Possible related upstream issues:
software-mansion/react-native-gesture-handler#139
software-mansion/react-native-gesture-handler#332
from react-native-modalize.
Could you create a git repository with the error? your code looks good, so I would need to try it to check
Hi @jeremybarbet
It worked found an issue with gesture handler while creating a new git repository.
Thanks
from react-native-modalize.
@saurabhdsachan could you help me with it too? same thing on android. i have tried with putting only the modalizer in render method so that it is a clean page. still not able to use the swipe able gestures with it
from react-native-modalize.
thats the whole of my component. still not able to do it on actual device using s8
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Modalize from 'react-native-modalize';
// You can import from local files
// or any pure javascript modules available in npm
export default class App extends React.Component {
modalRef = React.createRef();
componentDidMount() {
this.modalRef.current.open();
}
render() {
return (
<Modalize
ref={this.modalRef}
withHandle
modalHeight = {200}
>
</Modalize>
);
}
}
from react-native-modalize.
I have the same issue. swipe modal or tap the overlay does not work on android.
"react-native-gesture-handler": "^1.4.1",
"react-native": "0.61.0",
"react-navigation": "^3.11.1",
"react-native-modalize": "^1.2.1",
from react-native-modalize.
I can absolutely confirm this. After SPENDING hours to get the swipe to dismiss work on android (using a portal), just found out, that my component just don't WORK on android as soon as I wrap around it. It's just PERFECT on iOS (works fully as intended, an animated horizontal ScrollView), but on Android, I can't click the absolute header nor can I swipe. (Even with the portal, no use of withReactModal).
When I use "withReactModal", the swiping works but the swipe to dismiss breaks.
@jeremybarbet, can you help out here? I am so close to wipe modalize on android
from react-native-modalize.
Unfortunately this wonβt help us Expo people
from react-native-modalize.
@jeremybarbet Is there any improvement in this issue? It simply cannot be closed via swiping on Android.
from react-native-modalize.
@WrathChaos I'm too busy on other projects, unfortunately, to dig into it. If anyone can look at it, I would be more than grateful.
Are you using expo? There is a one known issue with [email protected]
cf: #23 and I the only solution I found was to upgrade expo.
Otherwise, if you don't have the latest versions of react-native
and react-native-gesture-handler
you should try to upgrade them.
We are using it in a couple of projects at Ueno and on personal projects, along with react-native-navigation
and we don't have any issue with ios nor android.
from react-native-modalize.
I'm using it with Pure React Native and latest versions of react-native
and react-native-gesture-handler
however I use it with react-navigation
. It totally works with iOS but nothing happens on Android
from react-native-modalize.
If you could recreate a simple reproducible repo, with the issue it would help
from react-native-modalize.
Sure, I'm gonna send you a repo link
from react-native-modalize.
Hi again @jeremybarbet,
Can you please check this repo?
https://github.com/WrathChaos/React-Native-Modalize-Android-Gesture-Problem-Example
This is an example of reproducible Android Swipe to Dismiss
problem. Also, I've used one of your examples.
Waiting for your investigation :)
Thank you
from react-native-modalize.
@jeremybarbet Do you have a chance to check the example? I really need a solution
from react-native-modalize.
I am an Expo user, its installed and added
from react-native-modalize.
HI @WrathChaos, yes I looked at it, you forget to install RNGH on android: https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#android
For everyone else on the discussion, and that have an issue with Android, make sure first you complete this step, otherwise, it won't work on android.
That fixed the issue for Android! Thank you so much, totally missed it. I think you should add this as FAQ part. Really important! Thank you and awesome work man
from react-native-modalize.
@hirbod Have you been able to try the latest expo example I did: https://github.com/jeremybarbet/react-native-modalize/tree/master/examples/expo It has latest version of expo/expo-sdk/RNGH and I tested it under Android and iOS
@WrathChaos Thanks, glad it works! It's already in the documentation, but not really well displayed, I'll make it more obvious!
from react-native-modalize.
@hirbod Great that's good to know. Yes, using Modal
along react-native-gesture-handler
is a known issue on RNGH Android side, and we can't really do anything about that.
I will work on a Provider to display Modalize on top of everything, as soon as I can
from react-native-modalize.
Would be great, thanks!
from react-native-modalize.
@ybonnetain If you are talking about this props https://github.com/react-native-community/react-native-modal#available-props, this is not the Modal from RN core but another modal library. I'm not using it inside this project
from react-native-modalize.
Thanks @saurabhdsachan! I confirm the solution indeed works. So far so good on android, not sure what the effect is on other gestures, will do more testing later.
Am using almost same versions too:
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-modalize": "^1.3.7-rc.5",
"react-navigation": "^3.11.1"
Edit: seems no effect on other gestures. solution by MariShielaFurio totally fixes the swipe-gesture-inside-modal problem for my version.
from react-native-modalize.
I had this issue for a while and want to share what worked for me
1- I have used react-native-portalize as mentioned.
2- removed the withReactModal prop from the modalize
3- wrapped the modalize with Portal from react-native-portalize and the component that I want modal on top of it -which was a tab navigator- with Host from react-native-portalize
4- completed the setup of gesture handler as mentioned here https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION
For me the magic happened at step 4 as I didn't do it earlier.
from react-native-modalize.
Now try to use a TextInput in your setup, you'll go crazy just like me that why you thought you found the perfect solution, :)
You haven't I haven't none of those portal libraries work very well, they have rerender issues.
from react-native-modalize.
Hi,
I will close this issue. Multiple new features have been introduced:
withReactModal
is now working with Android if you are usingreact-native-gesture-handler
>= 1.6.0- I wrapped Modalize with
GestureHandlerRootView
fromreact-native-gesture-handler
that setup the package automatically without having to do the manual step on Android MainApplication.java file or with thegestureHandlerRootHOC
if you are usingreact-native-navigation
.- I published a package called
react-native-portalize
to be able to render Modalize on top of a bottom tab navigation (for example)
Hi @jeremybarbet ,
react-native-portalize not working for me, it throws an error 'No portal manager defined'
How I used:
In Tabs Container
....
<Host>
<Tab.Navigator>
....
</Tab.Navigaator>
</Host>
In Modalize screen
<Portal>
<Modalize ref={combinedRef} HeaderComponent={renderHeader} >
<RNWebView ...... />
</Modalize>
</Portal>
I want to render web view on top of all like modal
from react-native-modalize.
it work with me
After installation, wrap your entry point with or gestureHandlerRootHOC.
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */};
}
from react-native-modalize.
This worked for me
import { GestureHandlerRootView } from 'react-native-gesture-handler';
<GestureHandlerRootView style={styles.main}>
<StatusBar barStyle={'light-content'} />
<AxiosInterceptor>
<Modal >
<NavigateComp />
</Modal>
</AxiosInterceptor>
</GestureHandlerRootView>
from react-native-modalize.
Related Issues (20)
- avoidKeyboardLikeIOS not working well on android HOT 2
- Can't scroll with adjustToContentHeight (android 10) HOT 2
- new modalize on top of previous modalize HOT 1
- TextInput with iOS hardware keyboard not working
- How to disable android back button when modalize is opened
- Determine current modal height and/or current position
- panGestureAnimatedValue doesn't change with <Modalize>.open()
- Drag event is not available when model up-down.
- Rerender "renderItem" + "keyExtractor" HOT 1
- Left hand swipe up not working
- scroll not working with HeaderComponent on android HOT 5
- how to open the modal when a success API response comes? in the then callback
- Text Flickering While Typing HOT 2
- Handle is visible above a plain view
- Modal Jumping height after opening if I'm closing it with pan gesture HOT 9
- [Error][On Android only] Open the modal and touch two fingers to close the modal HOT 2
- Error: Warning: This synthetic event is reused for performance reasons HOT 1
- Modal Size HOT 1
- how to enable gesture outside Modalize without closing it HOT 1
- React navigation Header showing on top of modal Overlay ?? 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-modalize.