colorfy-software/react-native-modalfy

🥞 Modal citizen of React Native.

react-native-modalfy's Issues

Keep params updated in openModal()

I'm passing the props of the containing component (which includes a user object) as a param in the openModal method.

openModal('InventoryModal', props)

When the player makes an action that causes the user object to update in the parent component, the change is not updated within the modal.

I assumed this would just work like regular FC props, where if {user} prop being passed in is updated, it would also update the view within the modal. Is this not the case? If not, how can I keep the params in sync like props do typically when using functional components?

PS - I also posted the question on Stack Overflow (but couldn't tag it, as my reputation isn't the 1500 required to create a new tag):
https://stackoverflow.com/questions/63625365/keep-params-updated-in-open-modal-when-using-react-native-modalfy

Backdrop not being rendered after initial close

After opening and closing a modal, the next time a modal is opened there is no backdrop.

package version: v2.1.0
react-native version: 0.63.4

createModalStack: 'backdropOpacity: 0' falls back to the default value

When using 0 for backdropOpacity, it falls back to default value.

const stack = createModalStack(modalConfig, {
  backdropOpacity: 0,
});

The issue is in this line:

react-native-modalfy/lib/ModalStack.tsx

Line 133 in df2bf5c

outputRange: [0, backdropOpacity || 0.6],

The || operator should be changed to ??.

Typescript issues while compiling

I am having a type issue

'unknown' is not assignable to parameter of type 'Error | undefined'.
  Type 'unknown' is not assignable to type 'Error'.

        subscriber.listener(null, error)

Close modal in redux

Hi, I have a loading modal inside redux, but i can't close modal when api has been completed, I like your library and using for my project. This is my code

 function* fetchLoginSaga(action: FetchLoginRequest) {
  try {
    openModal("LoadingModal");
    const response: AxiosResponse = yield call(() => loginRequest(action));
    const result = response.status === 200;
    closeModal("LoadingModal");
    if (result) {

    } else {
      yield put(fetchLoginFailure());
    }
  } catch (e) {
    openModal("ErrorModal");
  }
}

Xiaomi phones that hides the bottom navbar have issues clicking bottom pixels because of modalprovider

I implemented this recently and i've gotten bunch of reports from xiaomi users specifically. I bought a Pocophone f1 to replicate the issue and it only happens if the user hides their navigation bar from the settings.

THe pixels where the navigation bar is supposed to be is unclickable because of the ModalProvider. removing it fixes the problem

Width of stacked modals

Hey guys,

Absolutely love what this library has to offer. I figured rather than writing out questions on reddit I should put them here where they could come in handy to other people.

I have a stack of modals and I'm trying to figure out why there's some sort of nesting of the margin/padding going on

MP4 video if the nesting issue --> https://imgur.com/a/KSk8R5m

It seems like each successive modal stacked on top of the first one bases it's sizing off the first modal, maybe? Or there's some odd margin/padding effect I'm not thinking of?

Here's another example, where the first modal behind is full width, and then the next modal (which I would ideally like to just sit perfectly on top of the first one) is some odd set of it's width.

Goofing around with the inspector - it appears to be some sort of width calculation - so I'm thinking I can just use the windowWidth minus appropriate margins to set width here if needed - but thought this might be worth posting in case some other more elegant solution is obvious.

Thanks!

Possible to have a modal stack? (modal on top of modal)

I am building a forum, while navigating between comments in a post, there will be a modal above modal,
can this library achieve it?

[Expo] Bare new project - getting main has not been registered and TypeError: modalComponent is not an Object. (evaluating ''modal' in modalComponent')

Created a bare expo project and try to implement the way documentation. I am getting error.

App.js

---

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { ModalProvider, createModalStack } from 'react-native-modalfy';
import { ErrorModal } from './src/components/Modals';
const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions);


export default function App() {
  return (
    <ModalProvider stack={stack}>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </ModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Modal.js

---

import React from 'react'
import { Button, Text, View } from 'react-native'

const ErrorModal = ({ modal: { closeModal, params } }) => (
    <View>
        <Text>An error occured!</Text>
        <Text>{params.message}</Text>
        <Button onPress={closeModal} title="OK" />
    </View>
)

export default ErrorModal

---

Error in Console

TypeError: modalComponent is not an Object. (evaluating ''modal' in modalComponent')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:203:6 in guardedLoadModule
at http://10.10.10.246:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:128582:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

animateInConfig not working?

Hey,

First of all thanks for the awesome library, it really helped me with keeping my modals very well organised and reduced the amount of boilerplate code I had to have with the previous modal library.

I tried changing the duration of the fade in effect with the following ModalOptions as per documentation:

const defaultOptions: ModalOptions = {
  backdropOpacity: 0.6,
  animateInConfig: {
    duration: 50,
  },
  animateOutConfig: {
    duration: 50,
  },
};

The new duration value for the animate out is picking up right and the animation is quicker, however the animation does not react to changes made in the animatedInConfig object - I tried completely restarting the app but whichever duration I set the modal is always using the default value. Is there something that I'm doing wrong or could this be an issue?

Appreciate all the hard work!

Opening a modal over another modal

onDismiss callback?

Hi,

Thanks for creating such an awesome library!

I wanna ask whether this library has the functionality of onDismiss callback?

So far, I know I can dismiss through clicking at "close" icon or go back to previous modal by tapping at the shaded region behind the modal.

Any way to dismiss and close modal when I tap at shaded region instead of going back to previous modal ?

Thank you.

backBehavior "none" only for one Modal

Hi Guys!

Thanks for this nice lib, very easy and it got smooth animations.

I would love to have mandatory modals, but the backBehavior config is set to all Modals that I'll define with createModalStack(modalConfig, defaultOptions).

Is there any way to set this to only one modal?

Thank you

Cannot read property 'openedItems' of undefined

Hi,
I have follow the installation process for modalfy but it crash at runtime and send me this error :

Im my app I currently just have "import {ModalProvider} from 'react-native-modalfy';" in app.js,
and wrap my "" with "".
As I don't really have a clue about why this issue is happening I don't know what to bring you about my config or other thing, let me know if I can provide something else that help resolve this problem.

Best regards,

Crash report when calling closeAllModals() and openModal(), undefined is not an object

Breaking out of Issue 73, I've updated to 3.2.0, and it seems to have fixed a lot of errors, but I'm still seeing this one crash log in production occasionally:

Are you sure the recent optional chaining fix doesn't need done elsewhere as well?

When looking at your fix, before the slice check:
currentModalHash: [...currentState.stack.openedItems].slice(-1)[0]?.hash,

may it be possible that any of these are also undefined: currentState or currentState.stack or currentState.stack.openedItems ?

The crash:

Fatal Exception: com.facebook.react.common.c: TypeError: undefined is not an object (evaluating 'f.default.getState().currentModal')

This error is located at:
    in l
    in p
    in RCTView
    in Unknown
    in R
    in Unknown
    in RCTView
    in Unknown
    in R
    in Unknown
    in p
    in y
    in P
    in RCTView
    in Unknown
    in l
    in RCTView
    in Unknown
    in R
    in Unknown
    in PanGestureHandler
    in S
    in w
    in RCTView
    in Unknown
    in v
    in l
    in C
    in x
    in p
    in RCTView
    in Unknown
    in M
    in b
    in C
    in l
    in v
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in B
    in Unknown
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in b, stack:
C:\Users\...\node_modules\react-native-modalfy\src\lib\ModalProvider.tsx:39:openModal
C:\Users\...\app\screens\raid-screen\raid-screen.tsx:29:useEffect$argument_0
C:\Users\...\node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-prod.js:5467:commitHookEffectListMount
C:\Users\...\node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-prod.js:7003:flushPassiveEffects
C:\Users\...\node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-prod.js:6849:scheduleCallback$argument_1
C:\Users\...\node_modules\scheduler\cjs\scheduler.production.min.js:16:V
C:\Users\...\node_modules\scheduler\cjs\scheduler.production.min.js:10:w
C:\Users\...\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:214:_allocateCallback$argument_0
C:\Users\...\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:_callTimer
C:\Users\...\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:357:callTimers
C:\Users\...\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419:__callFunction
C:\Users\...\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:__guard$argument_0
C:\Users\...\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370:__guard
C:\Users\...\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:callFunctionReturnFlushedQueue
value@-1

       at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loopOnce(Looper.java:226)
       at android.os.Looper.loop(Looper.java:313)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:920)

Swipe from one modal to another?

Hi, is there a way to swipe from one modal to another? Almost like scrolling modals...

closeAllModals() and others sometimes do not run

I've updated to the latest 3.3.0 release. But now I'm seeing another issue.

In my app, when I navigate the user to another screen, I like to close all open modals (sometimes the user is navigated due to a change in data, for example where they are being attacked by another player, so I need to react to it).

I'm seeing intermittent behavior where closeAllModals() is not being run at all though. I've passed in a logging callback, and usually I don't see that logged, and the modal stays open on top of the navigation change below the modal, so the user doesn't notice they are being attacked.

I even log currentModal immediately before to check if there is a currentModal open, and it is correct. Any ideas?

  const navToAttack = async () => {
    props.navigation.navigate("attack", {
      attackId: user.attackId
    })
    console.log(currentModal)
    closeAllModals(() => {
      console.log('closed all')
    })
  }

When the modal stays open occasionally, I just see the currentModal logged, but no callback logging:
MainMenuModal

Where in the code could I manually do some logging in your plugin to help troubleshoot? I tried adding logging to both files' functions and rebuilding, but I never see the added statement logged:
node_modules\react-native-modalfy\lib\commonjs\lib\ModalState.js
node_modules\react-native-modalfy\lib\module\lib\ModalState.js

  const closeAllModals = () => {
    console.log('test closeAllModals')
    const {
      openedItems
    } = state.stack;
    openedItems.clear();
    setState(currentState => ({
      currentModal: null,
      stack: { ...currentState.stack,
        openedItems
      }
    }));
  };

Thanks for any help in troubleshooting this issue!

A complete example with react-navigation stack

Im missing a example to work modal with react-navigation, how i can work with AppNavigator

Crash report when calling closeAllModals() and openModal(), undefined is not an object

Thanks for your great library!

I am currently on v3.0.1, and getting a lot of crash reports dealing with "undefined is not an object".

Can this fail more gracefully (just early return) when undefined is not an object?

closeAllModals()

Fatal Exception: com.facebook.react.common.c
TypeError: undefined is not an object (evaluating '(0,v.default)(n.stack.openedItems).slice(-1)[0].hash') This error is located at: in l in p in RCTView in Unknown in R in Unknown in RCTView in Unknown in R in Unknown in p in y in P in RCTView in Unknown in l in RCTView in Unknown in R in Unknown in PanGestureHandler in S in w in RCTView in Unknown in v in l in C in x in p in RCTView in Unknown in M in b in C in l in v in Unknown in Unknown in Unknown in Unknown in B in Unknown in RCTView in Unknown in RCTView in Unknown in b, stack: <unknown>@1410:3955 o@1410:503 f@1410:3724 closeAllModals@1410:4352 <unknown>@1627:3754 Ul@63:66789 Ha@63:84456 Ea@63:78229 Ea@-1 ft@63:26099 _a@63:75396 jr@63:48144 jr@-1 <unknown>@1634:5683 _@1337:2386 <unknown>@1337:2603 value@28:1292 <unknown>@1335:1355 value@28:1292 <unknown>@530:1635 value@28:1292 value@44:3556 <unknown>@44:673 value@44:2503 value@44:645 value@-1

openModal()

Fatal Exception: com.facebook.react.common.c
TypeError: undefined is not an object (evaluating 'f.default.getState().currentModal') This error is located at: in l in p in RCTView in Unknown in R in Unknown in RCTView in Unknown in R in Unknown in p in y in P in RCTView in Unknown in l in RCTView in Unknown in R in Unknown in PanGestureHandler in S in w in RCTView in Unknown in v in l in C in x in p in RCTView in Unknown in M in b in C in l in v in Unknown in Unknown in Unknown in Unknown in B in Unknown in RCTView in Unknown in RCTView in Unknown in b, stack: openModal@1423:1013 <unknown>@1635:1086 Ul@63:66789 Ha@63:84456 <unknown>@63:82784 Y@179:2883 e@179:400 <unknown>@91:1256 k@91:499 callTimers@91:2652 value@44:3556 <unknown>@44:673 value@44:2503 value@44:645 value@-1

ScrollView within modal breaks positioning

Hi, first off, thanks for a bloody amazing library! It's totally changed the way I handle modals in my applications from a stupid mess of local state and weird edge-case handling into a beautiful abstraction.

So in my modal provider I have this:

import React from 'react'
import { ModalProvider, createModalStack } from 'react-native-modalfy'

import * as modals from './'

const defaultOptions = {
  backdropOpacity: 0.4,
  position: 'center'
}

const stack = createModalStack(modals, defaultOptions)

export default ({ children }) => (
  <ModalProvider stack={stack}>{children}</ModalProvider>
)

I had recently re-found the position option after the initial implementation, as I was adding some annoying height styles to my modal views to get it in the position I wanted.

But some of my modals don't position correctly:

import React from 'react'
import { StyleSheet, View, ScrollView } from 'react-native'
import {
  Headline,
  Paragraph,
  Button,
  TouchableRipple
} from 'react-native-paper'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

const LocationResetModal = ({
  theme: { colors, ...theme },
  modal: { closeModal },
  resetLocation
}) => {
  const handleSubmitLocation = () => {
    closeModal()
    resetLocation()
  }

  return (
    <View
      style={[
        styles.contentContainer,
        {
          backgroundColor: colors.secondary,
          borderRadius: theme.roundness
        }
      ]}
    >
      <View style={styles.header}>
        <Headline>Are you sure?</Headline>
        <TouchableRipple onPress={() => closeModal()}>
          <Icon size={24} name="close" />
        </TouchableRipple>
      </View>

      <ScrollView style={styles.container}>
        <Paragraph>
          If you change your location, you will lose all items in your basket!
        </Paragraph>
      </ScrollView>

      <View style={styles.buttonContainer}>
        <Button
          style={[styles.button, styles.marginRight]}
          mode="contained"
          compact
          onPress={() => closeModal()}
        >
          Go back
        </Button>
        <Button
          style={styles.button}
          mode="outlined"
          compact
          onPress={() => handleSubmitLocation()}
        >
          I’m sure
        </Button>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  contentContainer: {
    padding: 24,
    margin: 24
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  container: {},
  buttonContainer: {
    paddingTop: 12,
    flexDirection: 'row'
  },
  button: {
    flex: 1
  },
  marginRight: {
    marginRight: 12
  }
})

export default LocationResetModal

This modal will always render at the top of the screen, regardless of config option.

If I replace the ScrollView around the central content elements with a View, it works fine!
(it's a scroll view because I copy-pasted from a terms & conditions modal...)

Let me know if you need anything else. I'll be available for the next week, on mobile only though.

Override Backdrop component?

Is there any way to replace the component used for the Backdrop? I'd like to add support for closing the modal when the backdrop is pressed.

Animation conflict

Thanks for providing such a good library!

issues: When the next Modal enters the field, it will affect the exit animation of the previous Modal.

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-modalfy": "^2.1.0"
  }

Demo

import React, { PureComponent } from 'react';
import {View,Text,Button, Easing} from 'react-native'
import {createModalStack, ModalProvider, modalfy} from 'react-native-modalfy';
const {openModal} = modalfy();

class DefaultModal extends PureComponent {
  static modalOptions = {
    animateInConfig: {
      easing: Easing.linear,
      duration: 200,
    },
    animateOutConfig: {
      easing: Easing.out(Easing.circle),
      duration: 200,
    },
    backdropOpacity: 0.4,
    transitionOptions: animatedValue => ({
      opacity: animatedValue.interpolate({
        inputRange: [0, 1, 2],
        outputRange: [0, 1, 0],
      }),
      transform: [
        {
          scale: animatedValue.interpolate({
            inputRange: [0, 1, 1],
            outputRange: [0.4, 1, 1],
            extrapolate: 'clamp'
          }),
        },
      ],
    }),
  }

  render(){
    return(
      <View style={{
        alignSelf:'center',
        width: 300,
        height: 300,
        alignItems:'center',
        justifyContent:'center',
        paddingTop: 5,
        backgroundColor:'white'}}>
        <Text>{'Default'}</Text>
      </View>
    )
  }
}

class BottomModal extends PureComponent {
  static modalOptions = {
    transitionOptions: animatedValue => ({
      opacity: animatedValue.interpolate({
        inputRange: [0, 1, 2],
        outputRange: [0.5, 1, 0],
      }),
      transform: [
        {
          translateY: animatedValue.interpolate({
            inputRange: [0, 1, 2],
            outputRange: [200, 0, -200],
          }),
        },
        {
          scale: animatedValue.interpolate({
            inputRange: [0, 1, 2],
            outputRange: [1, 1, 0.1],
          }),
        },
      ],
    }),
    animateInConfig: {
      easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
      duration: 300,
    },
    animateOutConfig: {
      easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
      duration: 300,
    },
    backdropOpacity: 0.4,
    shouldAnimateOut: true,
  }

  render(){
    const {modal} = this.props;
    return(
      <View style={{
        alignSelf:'center',
        width: 300,
        height: 300,
        alignItems:'center',
        justifyContent:'center',
        paddingTop: 5,
        backgroundColor:'white'}}>
        <Text>{'After clicking \'show DefaultModal\', you can see that BottomModal is not executed according to the set animation. \n\n '}</Text>
        <Button title={'show DefaultModal'} onPress={()=>{
          modal.closeModal();
          modal.openModal('DefaultModal')
        }}/>
      </View>
    )
  }
}

const config = {
  DefaultModal,
  BottomModal
};
const ModalStack = createModalStack(config);

const App = () => {
  return (
    <ModalProvider stack={ModalStack}>
      <View style={{flex:1,alignItems:'center', justifyContent:'center'}}>
        <Text onPress={()=>{openModal('BottomModal')}}>{'show BottomModal'}</Text>
      </View>

    </ModalProvider>
  );
};

export default App;

Can I set ModalOptions for each Modal?

[Android] Gesture events problem cause of FlingGestureHandler

First of all, big thank you for this library. Amazing way to avoid boilerplate code and writing once your modal components.

I've experiencing a problem when using a webview inside the modal.
More specifically, i'm using this library https://github.com/YanYuanFE/react-native-signature-canvas inside the modal.

In Android the fling gesture is blocking me from drawing in the webview's canvas even if i disable the flingGesture.
I think the problem is that the fling gesture handler still listening to events, even if it's disabled.
Somehow on iOs is working fine. I think natively FlingGestureHandler has a different implementation (?).

If i remove FlingGestureHandler wrapper from the StackItem, then it's working fine. It has an enabled property so maybe it's better using this, to disable fling gesture when disableFlingGesture = true.

Allow a prop to avoid keyboard

The current modal does not avoid keyboard. Is there any tip/trick to make that happen?

how can we reconfigure modals using react-native-modalfy separately as well as globally?

Move animation logic to react-native-reanimated.

Currently frames are dropping when opening and close the modal.
I am using this library in my App. My app drops the frame when opening and closing the modal. There are no extra renders in my component only issue can be Animation implementation under the hood.

Platform-Agnostic Support

First of all, this is an amazing library. I love the state management rationale behind this, and I think all modal state should be handled this way.

One thing I wish this library did have is web support. In the spirit of React (with React being a platform-agnostic language for building UIs), it would be really cool to get web support for this. There doesn't seem to be many native dependencies here.

Can we abstract this out to be mostly platform agnostic? How can I help with this effort?

Android open/close modal works only once

Hello, first of all, thanks for this great library, it's really clean and approaches modals in React Native in a nice way. I've been implementing them using this library in my app and everything has went well, until I've noticed that the open/close interaction works only the first time.

What happens is when I try to open the modal every subsequent time, it opens, but it opens in such a way that it seems like the backdrop is overlaying the modal (like it has a higher zIndex), and with that, the modal is completely non actionable.

I cannot reproduce this issue on your example app which has been built with Expo 42, however, it is reproducible on an Expo 44 project.

Steps to reproduce:

1. instantiate an Expo 44 app
2. run expo start
3. copy over the code from the sample app
4. The opening & closing will work on android only once.

The same behaviour works as intended on iOS. Any help would be greatly appreciated.

StatusBarTranslucent props support

Now, RN Modal supports StatusBarTranslucent props, so will Modalfy follow up?

Closing modal doesn't animate out, closes instantly after duration

When calling closeModal(), the closing animation never happens. It waits the amount of time of the duration, then instantly closes. I've tested this by setting the duration to 3 seconds... there is no visible transition happening when closing.

This problem however doesn't exist on openModal(), which works fine.

  const defaultOptions: ModalOptions = {
    backdropOpacity: 0.9,
    disableFlingGesture: true,
    animateInConfig: {
      easing: Easing.inOut(Easing.exp),
      duration: 3000,
    },
    animateOutConfig: {
      easing: Easing.inOut(Easing.exp),
      duration: 3000,
    }
  }

Any ideas?

[Web] Container height in mobile browsers

Hello, thank you for the great library!
I've noticed that ModalStack which is fixed by 100vh, is having issues on the mobile browser, as shown in the screenshot below (iOS Safari). It also happens in Android Chrome with navigation bar. It seams that using window.innerHeight instead of 100vh should fix this issue.

Steps to reproduce:

instantiate an Expo app
run expo start
copy over the code from the sample app
open in mobile browser
Any help would be greatly appreciated.

Is it possible show/hide modals immediately?

https://snack.expo.dev/_LMD_OgPl

First of all, thank you for providing an easy-to-use library.
I wanted modals to �show and hide faster than the default setting.
But(perhaps because of the backdrop animation?) the child modals appeared relatively quickly, but the root modal could not reduce the latency.
Even for child modals, it seems that the modal window takes time to close.

Closing the current modal while opening other

I am opening an modal upon pressing a button from another modal and would need to close previously opened modal.

Please assist. below code doesn't work.

<Button onPress={this.confirmOrder} title="CONFIRM" />

confirmOrder = () => { const { modal: { openModal, closeModal }, } = this.props; closeModal; openModal('NewOrderPost'); };

calling openModal with same modal opens that modal again over previous modal

• I have a button on press of which I open a modal.
• when users clicking over button multiple times very quickly multiple instances of same modal gets created.
• One way I can fix this by using event throttle when calling the open modal. I feel App becomes slow when modal content is more. So users pressed the modal open buttons multiple times as a results multiple instances of modal gets created.

When using Modal component shipped with React Native, It always stays in DOM and accepts the prop visible to be true or false. So it feels faster.
But I think when using this library. You Modal Component gets added to DOM only when openModal is called.

Can we make modal opening little bit more performant?

Request: callback on closing modal

The use case for me is that I'd like to perform a function after closing the modal. However if I start the function while the modal is still disappearing, the experience is a jarred closing animation. It would be nice to have a callback that fires when a modal has closed.

e.g.

closeModal(afterCloseCallback)

Type Error Upon Installation

Awesome library everyone! I haven't integrated it into our production version yet, but we plan to as soon as we can get it working.

Upon installation, I got this type error. Any ideas on what could fix this? I've tried nuking and reinstalling node_modules. I'm using yarn, and node version v12.4.0.

node_modules/react-native-modalfy/utils/getStackItemData.ts:1:36 - error TS7016: Could not find a declaration file for module 'react-is'. '<OmittedPath>/mobile/node_modules/react-is/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-is` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-is';`

1 import { isValidElementType } from 'react-is'
                                     ~~~~~~~~~~

node_modules/react-native-modalfy/utils/getStackItemData.ts:3:30 - error TS2307: Cannot find module 'types' or its corresponding type declarations.

3 import { ModalOptions } from 'types'
                               ~~~~~~~

Thank you in advance 😄

Passing params with TypeScript issue

I implemented everything by looking at the docs. TypeScript does not complain at all but the value from props.testParam is undefined where value from props.modal.getParam('testParam') is expected but TypeScript shows erros.

Is there a way to change backbuttonbehavior on runtime ?

How to subscribe to all modal close events?

I'm currently using shallow routing on Next Js with this library on the web. I'd like to track the modal close event so whenever a modal is closed by clicking on the backdrop I can trigger a change in the URL to remove the shallow route that's added when a modal is pushed.

Is this currently possible? Or should I extend the current modal hook functions to include my custom functionality?

Android phones with hidden bottom navbar have issues clicking bottom pixels because ModalStack has wrong translateY value and cover some of bottom content

I reproduced issue that Android phones with hidden bottom navbar have issues clicking bottom pixels because ModalStack has wrong translateY value (see screenshot) and cover some of bottom content. I think problem with wrong Dimensions.get('window').height value on some android devices when native bottom navbar is hidden. In my case hidden android navbar programmatically in MainActivity.java:
@OverRide
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}

Test device: Huawei P smart 2019 (POT-LX1) Android 9
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-modalfy": "2.1.1",
"react-native-gesture-handler": "1.6.1"

Modal doesn't scroll up when keyboard is open on iOS

I created a modal using react-native-modalfy with an input field in it. On android everything is working as expected(i.e., modal moving up when keyboard appears) but on iOS, whenever I try to type something the keyboard appears on the modal UI and doesn't allow me to see anything that happens on the modal UI. Is there any workaround to get past this issue? @CharlesMangwa

TransitionPresets

Please add TransitionPresets

for example as in react-navigation

import {
  TransitionPresets,
} from '@react-navigation/stack';

import { TransitionPresets } from 'react-native-modalfy'

const ActionSheet = () => ...

ActionSheet.modalOptions = {
   TransitionPresets.ActionSheet,
}

Incorrect typings for closeModal

/**
   * This function closes the currently displayed modal by default.
   *
   * You can also provide a `modalName` if you want to close
   * a different modal than the latest opened.
   *
   * @example modalfy().closeModal()
   * @see https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalprop#closemodal
   */
  closeModal: () => ModalState.closeModal()

Current typings specify that closeModal takes 0 arguments, but the note/comment states that it takes an optional modal identifier.

Add value param in `onClose` listener about close action

Thanks again for your support adding in the onClose listener.

Would it be possible to send an ENUM or something similar about the action that triggered the close. E.i allCloseModals, closeModal, a click on the overlay, etc. I noticed the animation listener returns the animated value, so it seems inline with the API.

We are currently using Next JS on web and handling some dynamic routes with this library. We're currently trying to close the modal via the back button by calling closeModal but this triggers are onClose method on that modal, which tries to navigate the user back when they click on the overlay to change URL; this results in two navigations when hitting back in the browser.

I understand this use case especially is pretty niche, let me know what you think.

Prevent from closing when touched outside

Can we prevent modal from closing when touch outside happens? For example loading modal?

Demo app in expo

It would be nice to have a demo app , to test and feel component in real device

CloseModals not updating the currentModal value

Say if I call openModal a few times e.g.

openModal('page1')

openModal('page2')

openModal('page3')

then use currentModal to then close the pages

closeModals(currentModal) //page 3 closes

closeModals(currentModal) //nothing happens

closeModals(currentModal) //nothing happens

This is because currentModal in the state is not being updated when calling closeModals. I've added a temp fix for my use-case at the minute over here: https://github.com/jxshco/react-native-modalfy as an example.

Modals with different heights

I have on my app three different modal's height. but, when I need open two modals on the same time the modals overlap except the modals that have the same height. I would like to know if there is an option that I could to add to the transitionOptions for detect the height on everymodal automatically.

I read the documentation and I saw that you have a vh value but is not clear for me how I could use. I wait for your response. Thank you so much.

Here I let the code that I need change:

  transitionOptions: (animatedValue) => ({
    transform: [
      {
        translateY: animatedValue.interpolate({
          inputRange: [0, 1, 2],
          outputRange: [0, 0, -170],
        }),
      },
    ],
  }),
}

Unable to override backdropOpacity and backButtonBehavior

Hi, great library, just what I was looking for!
From the docs, I read that options could be overridden through:

1. static modalOptions
2. modal specific options
3. defaultOptions

in the same order of priority. However backdropOpacity and backButtonBehavior is always being picked from number 3.

checked the code in ModalStack.js const { stack: { defaultOptions: { backdropOpacity }, }, } = this.props
and it is intentionally picked from defaultOptions, is this a bug or is this how it is supposed to work ?