I am facing minor problem while using the modalize which is there are blank space at the bottom of the modal. However, the blank space will not showed when using the 'withReactModal'

Any solution to solve it ?

Issue:

I've been using this package in many production apps and it works flawlessly, tho there is one issue I've found so far which is lazy loading of the modalize component (not sure if it's an issue)

Explanation:

I use modalize to show transaction invoices in my app, which is an async action as I need to fetch the data first, the issue is that the data fetching (done inside the modalize itself) starts as soon as the component is mounted in the parent screen, is there a simple fix I'm not aware of?

Expected behavior:

I want data fetching to start when the modal actually opens

Thanks

If I set adjustToContentHeight = true once,
then If I try to set adjustToContentHeight = false
It still adjustToContentHeight = true

is it ok? or bug?

Hi @jeremybarbet ,
i have a big problemon Android. i click TouchableOpacity but it's not working. it's working when i click so many. This problem have only on device, not on simulator

Hi Everone,
How can I remove dim, I want see inside :(
Thanks so much!

When I used with react-navigation, the backdrop start under navigation Bar. But I need the fullscreen Mask，how to set it?

The test of my local with yarn and JEST is success but of Circle CI is failed.
Does anyone know the solution of the error below?

ERR! => Failed to build the preview
ERR! ./node_modules/react-native-modalize/lib/Modalize.js 311:72
ERR! Module parse failed: Unexpected token (311:72)
ERR! You may need an appropriate loader to handle this file type.
ERR! |         _this.renderComponent = function (Component, name) {
ERR! |             // @ts-ignore
ERR! >             var element = React.isValidElement(Component) ? Component : <Component />;
ERR! |             // We don't need to calculate header and footer if they are absolutely positioned
ERR! |             if (Component && utils_1.hasAbsoluteStyle(Component)) {
ERR!  @ ./node_modules/react-native-modalize/lib/index.js 3:17-38
ERR!  @ ./src/organisms/modals/ShareSNSModal.tsx
ERR!  @ ./src/screens/MyPageScreen.tsx
ERR!  @ ./src/screens/MyPageScreen.story.tsx
ERR!  @ ./src sync \.story\.tsx?$
ERR!  @ ./.storybook/config.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js

the docs show set adjustToContentHeight to make fixed content. but the problem if i set adjustToContentHeight props when modal first open get flickering

proof: https://streamable.com/saxyz

Hey, thanks for developing this, this is really useful, I was wondering is there any way to increase/decrease animation duration? or props like that?

Thanks

I suggest you to move
addEventListener('hardwareBackPress') to onAnimateOpen
and
removeEventListener('hardwareBackPress') to onAnimateClose

It won't replace original hardwareBackPress(for example react-navigation) if React Component contains Modalize.

i want to show the modal on top navbar, i have to try with zIndex at but not working,...please help how to fix it, thnks🙂

update : done! with top bar, with change the modal render position , but bottom navbar stil on top

i get this issue:

error: bundling failed: Error: Unable to resolve module react-native-gesture-handlerfrom/Users/gvl/Desktop/modelize/node_modules/react-native-modalize/lib/Modalize.js: Module react-native-gesture-handler does not exist in the Haste module map

i use:
"react": "16.8.3",
"react-native": "0.59.8"

I am using the basic modalize view(https://jeremybarbet.github.io/react-native-modalize/#/USAGE) on a click of a button in my view, but the bottom tab bar hides the view partially. I am unable to understand the react-navigation example, as I am new to react native.
The view has about "New Delhi" about 7-8 times but only 4 being shown.

Great job on the module, turns out to be almost exactly what I need.

Is it somehow possible to make it not be a modal, and always be available? Like Apple Maps does with their search?

This seems to do exactly what I need, minus it being a modal. I need to not have a backdrop. 😄

i have a scrollView in modal. But i cannot scoll it on andoid, also it's normal in iOS. Please,help. Thank so much

Hi, i'm using your library with react-native-router-flux and i had a problem on android, swipeable does not work. Modal builds without errors, works on IOS but android does not respond to swipes. (Sorry, my english is not good :) )

• "react-native-modalize": "^1.1.1"
• "react-native-gesture-handler": "^1.3.0" (react-native link react-native-gesture-handler)
• "react-native": "^0.59.8"
• "react-native-router-flux": "4.0.6"

is possible to replace KeyboardAvoidingView with
react-native-keyboard-aware-scroll-view
it has a lot of features

Hi,

i just found out that "withReactModal" will break swipe to dismiss on android. What can I do to achieve a full screen modal which works as intended on iOS and Android? Without the use of "withReactModal" my modal gets rendered inside my childrens component and has wrong positioning and wrong height @jeremybarbet.

Using "withReactModal" is exactly what I need, a fullscreen modal which perfectly works with my slideshow (which btw was the first and only modal I found which did what I need, because every other lib with flick to dismiss didn't work with slideshows/scrollviews) and swipes up form bottom to top + overlapping the tab bar perfectly. You mentioned to have a look at react-navigation example but there isn't even a stackNavigator or anything else inside of it.

I use react-navigation but your examples didn't help me here. Any help here is appreciated.

<Modalize ref={ref => this.modal = ref}
                flatListProps={{
                    data: this.data,
                    renderItem: this._renderItem,
                    keyExtractor: this.props.keyExtractor || this._keyExtractor,
                    keyboardShouldPersistTaps: 'always',

                }}
                HeaderComponent={this._headerComponent}
                modalHeight={deviceHeight}
                keyboardAvoidingBehavior="height"
                FooterComponent={this.props.multi ? this._footerComponent : null}
            >

            </Modalize>

Do you have any solution? Thanks

With adjustToContentHeight={true} props i can't swipe modal to top

The model only covers the c component its rendered in, there should an option to cover the whole screen, like react native model

HeaderComponent and FooterComponent render many times

export class test extends Component {

    renderHeader = () => {
        console.count('HeaderComponent');
        return (<View />)
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Modalize ref={ref => this.modal = ref} HeaderComponent={this.renderHeader}>

                </Modalize>
                <Button onPress={() => this.modal.open()} title='OPEN'></Button>
            </View>
        )
    }
}

export default test

"react-native": "0.59.8",
"react-native-modalize": "^1.0.0-alpha.23"

console.count() prints 9-10 times, is it normal?

Hello @jeremybarbet, first of all awesome component man!

I am starting to use it on my project, and here's what I am getting now.

What do you think is the problem? Cheers

I'm trying to use the modal in an allways open state. But I need to understand if the modal is opened or not to show a header. But since the modal is allways open, I cant do anything about it. I think maybe there is a way to know if it reached its top position. Is there?

After setting up the package, i get this error while using it with react native navigation. i have followed the example

Currently, flat/section item types are declared with any, this is error prone. Consider this:

type MyItems = { a: number, id: string }

const items : MyItems[] = []

// ...

<Modalize
  ref={ it => ref.current = it }
  flatListProps={ {
     data: items,
     keyExtractor: it => it.key,
     renderItem: ({ item }) => (<Text> { item.jojo }</Text>)
  } } />

In the above example, item is identified by ts as any, so accessing non existing props is fine for the compiler.

You could make this type safe by changing two declarations:

// Options.d.ts
export interface IProps<FlatListItem, SecionListItem> {
    ...
    flatListProps?: FlatListProps<FlatListItem>;
    sectionListProps?: SectionListProps<SecionListItem>;
    ...
}

// Modalize.d.ts
export default class Modalize<FlatListItem = any, SecionListItem = any>
    extends React.Component<IProps<FlatListItem, SecionListItem>, IState> {
   ...
}

With the above example definition, the compiler would complain about my attempt to access non existing props on the item cuz it would infer that it is a MyItems type.

Edit:
I've added the defaults any for the generic types in Modalize class, to keep stuff like:

const modalRef = useRef<Modalize | null>()

working (otherwise you would need to declare the generics there)

I am dynamically updating the contents and it is not updating to its new content hight after update

I have read the docs, there no props or method to subscribe current modal height.

Like a https://github.com/osdnk/react-native-reanimated-bottom-sheet/ they have a props called callbackNode to indicate current modal position.

This is very useful. Example, developer can manipulate and animate the content inside modal, like change the position of handle, hide another component, and others.

So, is there a way to handle this or a trick?

Hey @jeremybarbet

Thanks for the awesome library. So I am trying to get a text input work inside a footer and the keyboardAvoidingView doesn't seem to work when the input is inside the footer. Here is a video of this.

Here is the code for the Modalize component.

<Modalize
        ref={this.modal}
        HeaderComponent={this.renderHeader}
        keyboardAvoidingBehavior="padding"
        modalHeight={DEVICE_HEIGHT - HEADER_HEIGHT}
        FooterComponent={this.renderFooter}
        onClosed={this.onClosed}
        withHandle={false}
        flatListProps={{
          data: comments,
          renderItem: ({ item }) => <SingleComment comment={item} key={item.id} />,
          keyExtractor: (item, index) => (item && item.id ? item.id.toString() : index),
          showsVerticalScrollIndicator: false
        }}
        overlayStyle={{
          backgroundColor: 'rgba(29, 33, 41, 0.2)'
        }}
      />

I've tried all the enums related to keyboardAvoidingBehavior ('height', 'position', 'padding') but none of them seem to work. Any help in pointing me to the right direction would help immensely.

This happens because onScrollViewChange is called before the header height is calculated.

react-native 0.60.4

Cannot read property 'isValidElement' of undefined

Error after updating to react-native-modilize 1.2.0, any help?

I am wondering if there is a possibility to modify the KeyboardAvoidingView behavior of the modal?

Using the latest version of "expo": "32.0.0" make the swipe gesture not working anymore. If you are not using expo, you are not concerned, if you are, you must do:

"expo": 31.0.0,
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"

Hi @jeremybarbet , Where can I find the source code shown in the expo example at the following link: https://expo.io/@jeremdsgn/react-native-modalize

Hi @jeremybarbet ,
It would be possible to add the following features:

1. The possibility to change the background color for example
   if I do that, it works
   style = {{backgroundColor: '#ccc'}}
   but not so:
   style = {{backgroundColor: 'rgba (0,0,0, 1)'}}
2. It would be interesting to have a gradient background I was trying and thinking about rn-gradients that totally in js.

Issue:
Horizontal ScrollView inside the modal does not work.

Solution:
A very similar solution can be introduced -
https://stackoverflow.com/questions/44407955/scrollview-inside-an-panresponder

Hello, really nice module !
i'd like to know how i could use Modalize and react-navigation to open a modal above the all screen (and not use withReactModal).

thanks for your time

Modalize.open() with flatlistprops is showing a deprecation on DEBUG and the app is quiting on RELEASE, here's the dependencies.

"dependencies": { "@react-native-community/async-storage": "^1.6.2", "@react-native-community/geolocation": "^2.0.2", "@react-native-community/netinfo": "^4.2.2", "@react-native-community/push-notification-ios": "^1.0.2", "axios": "^0.19.0", "lodash": "^4.17.15", "lottie-ios": "3.0.3", "lottie-react-native": "^3.1.1", "mobx": "^5.13.0", "mobx-react-lite": "^1.4.1", "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "16.9.0", "react-native": "0.61.0", "react-native-fast-image": "^7.0.2", "react-native-fbsdk": "^1.0.4", "react-native-gesture-handler": "^1.4.1", "react-native-google-signin": "^2.0.0", "react-native-image-crop-picker": "^0.25.2", "react-native-linear-gradient": "^2.5.6", "react-native-modalize": "^1.2.1", "react-native-onesignal": "^3.4.1", "react-native-rate": "^1.1.7", "react-native-reanimated": "https://github.com/kmagiera/react-native-reanimated", "react-native-screens": "^1.0.0-alpha.23", "react-native-splash-screen": "^3.2.0", "react-native-svg": "^9.9.4", "react-native-track-player": "^2.0.0-rc13", "react-native-vector-icons": "^6.6.0", "react-navigation": "^4.0.9", "react-navigation-drawer": "^2.2.2", "react-navigation-stack": "^1.9.0", "react-navigation-tabs": "^2.5.5" },

Here I have used Modalize

<Modalize ref={this.modal}
                          style={{height:'93%'}}
                          handlePosition={'outside'}
                          height={300}>
                    <components.ReactionList wallPostId={this.state.item.id}/>
 </Modalize>

This is a part of components.ReactionList

 <TouchableOpacity style={styles.buttonTab} onPress={this.handlePress}>
                <Text style={{alignSelf: 'center'}}>All Test</Text>
 </TouchableOpacity>

Please let us know how do we solve this issue

General

• Remove definitions file
• Tap gesture on overlay
• Keyboard avoiding view

iOS

• Bounce to the bottom of scrollview, and disable on top of it

Android

• Make it works

hey guys. is there any way i can set custom actions when android back button is pressed? i already tried with onRequestClose props(from react native modal).

use react-native-modal instead original react-native Modal component by adding animations and styles customization options while still providing a plain-simple API.

https://github.com/react-native-community/react-native-modal

Is there a possibility to add sticky headers to the content inside modal?

<Scrollview stickyHeader={[0,1]}>
... Content
</Scrollview>

PS:

1. The absolute property of header and footer component is not clear

Issue:

Keyboard automatically closes after typing a single character on iOS (haven't tested android) when a text input inside the modal is focused

Modal:

<Modalize
                ref={this.modal}
                adjustToContentHeight
                keyboardAvoidingBehavior={'padding'}
                onClosed={this.onClosed}
                modalStyle={{ marginTop: 32 }}
                flatListProps={{
                    stickyHeaderIndices: [0],
                    ListHeaderComponent: () => this._listHeaderComponent(),
                    data: this.data,
                    renderItem: this.renderItem,
                    keyExtractor: item => item.email,
                    showsVerticalScrollIndicator: false,
                }}
            />
        );

ListHeader component:

_listHeaderComponent = () => (
        <View style={{flex: 1, justifyContent: 'center', height: 60, width: '100%', backgroundColor: 'salmon' }}>
            <TextInput
                style={{ fontSize: 20, backgroundColor: 'yellow' }}
                value={this.state.searchQuery}
                onChangeText={searchQuery => this.setState({ searchQuery })}
            />
        </View>
    );

EXPO SNACK: https://snack.expo.io/HkZULlxSB

Hi,

Recently I used your latest version of your modal component (1.0.0-alpha.21). I tried to set adjustToContentHeight to true. Children height was hardcoded with minHeight : 1000 (will have more content later). Then, it was great until the keyboard shown in full screen modal.

Before the keyboard was shown (it was great)

After the keyboard was shown (modal shown until covering the status bar)

Then, the keyboard was dismissed and the TextInput refocused (modal height was changing, but not like the first one)

How to solve this height issue?

This is just an example of what I'm looking for. I wonder that is that possible that can we make our components outside of the modal? Just like the above image's button on the top right side.

How can I change the height of Modalize when clicking a Button :(.
Tks so much