Cannot read property 'layout' of null

[abdullahIsa]

Hello i am getting this error.

"react-native": "0.70.4" "react-native-modalize": "^2.1.1"

[jersonpl]

Same problem.

"react-native": "0.70.5", "react-native-modalize": "^2.1.1",

[RalissonMattias]

same here

[Ilannildo]

Same problem.

"react-native": "0.70.5", "react-native-modalize": "^2.1.1",

[alexfoxy]

Yep also getting this issue:

"react-native-modalize": "^2.0.13",
"react-native": "0.70.5",

[willLopesz]

I'm having the same problem, but it only occurs when I remove the adjustToContentHeight property, if anyone else can test if this is it?!

[filipepalheta]

same here,

"react-native": "0.70.5", "react-native-modalize": "^2.1.1",

[cedricjacobs]

@willLopesz I see the same behaviour.

[aryella-lacerda]

@willLopesz I just tested this. The warning only occurs when I use modelHeight instead of adjustToContentHeight. It also occurs when I use neither of these props. Once I set adjustToContentHeight to true, the warning disappears.

"react-native": "0.70.6",
"react-native-modalize": "^2.0.13",

EDIT: And it only happens on Android for me. I have Hermes activated, too.

[willLopesz]

@aryella-lacerda Exactly what happens to me, android only, but I need to limit the height because it is a flatlist, did anyone manage to solve it?

[Kirangaira]

Any solution for this warning? @jeremybarbet

[nathangabriel27]

Same problem with no solution. I tried to define AdjustToContentHeight, but it is bad when there is a SearchBar. By setting avoidKeyboardLikeIOS it passes the screen height in android. @jeremybarbet

"react-native": "0.70.6", "react-native-modalize":"^2.1.1",

[Kirangaira]

Any solution to avoid this warning when using modalHeight? @jeremybarbet

[MarouaniALA]

any news here

[Sheharyar566]

I'm not sure what it does but adding avoidKeyboardLikeIOS={true} removed the warning

[amerllica]

It happens because of the following code:

if (!avoidKeyboardLikeIOS && !adjustToContentHeight) {
    keyboardAvoidingViewProps.onLayout = handleModalizeContentLayout;
}

And the handleModalizeContentLayout has an unhandled promise rejection

const handleModalizeContentLayout = ({ nativeEvent: { layout } }) => {
    const value = Math.min(layout.height + (!adjustToContentHeight || keyboardHeight ? layout.y : 0), endHeight -
        react_native_1.Platform.select({
            ios: 0,
            android: keyboardHeight,
            default: 0,
        }));
    setModalHeightValue(value);
};

You are getting that warning, what's the solution, make false the condition in the if sentence, how? by making avoidKeyboardLikeIOS or adjustToContentHeight true.

[carlosdavid0]

@amerllica você criou pr?

[mmkhmk]

I'm facing the same issue.

[mcvictormurillo]

Esto funciona para mi 😃 <Modalize disableScrollIfPossible={false} adjustToContentHeight={true}> {children} </Modalize>

[vvv-sss]

I don't know how much healthy it is but I used a promise to force the modilize to think that avoidKeyboardLikeIOS is true on rendering of modal and after switch to false and my perfomance on Android remains as I want.

const returnTrueThenFalse = () =>
    new Promise(resolve => setTimeout(() => resolve(false), 1000));

const handleAvoidKeyboardLikeIOS = () => {
    return isIOS ? true : (returnTrueThenFalse().then() as unknown as boolean);
  };

avoidKeyboardLikeIOS={handleAvoidKeyboardLikeIOS()}

[germanao]

Same here, this can be particularly problematic to work around when using many inputs in the component.

[alainib]

i still get this error on Android, the content of my Modelize change ( i have accordion inside Modalize to show/hide long text content so height change) and i use onLayout to compute children height. adjustToContentHeight not working to add scroll on the fly.

import React, {useState, forwardRef} from 'react';
import {Dimensions, View, Platform} from 'react-native';

import {Modalize} from 'react-native-modalize';
import {Portal} from 'react-native-portalize';

const {height: windowHeight} = Dimensions.get('window');

/**
 * Modalize is a scrollview by default, but it doesn't work on android when we don't
 * put height in pixels with adjustToContentHeight={true} parameter
 *
 * this component compute child height and set modalHeight
 */
const ModalizeAdjustToContentHeight = forwardRef((props, ref) => {
  const [childHeight, setChildHeight] = useState(0);
  const [modalHeight, setModalHeight] = useState(0);
  const {adjustToContentHeight, footerHeaderHeight, children, ...mprops} =
    props;
  const enableComputedHeight = adjustToContentHeight && Platform.OS !== 'ios';

  const handleOnLayoutChange = (height: number) => {
    const m = footerHeaderHeight
      ? windowHeight - footerHeaderHeight
      : windowHeight;
    const mh = Math.min(height, m);

    setModalHeight(mh);
    setChildHeight(height);
  };

  const renderContent = () => {
    if (Platform.OS === 'ios') {
      return (
        <Portal>
          <Modalize
            {...mprops}
            ref={ref}
            adjustToContentHeight={adjustToContentHeight}>
            {children}
          </Modalize>
        </Portal>
      );
    }
    return (
      <Portal>
        <Modalize
          {...mprops}
          ref={ref}
          adjustToContentHeight={false}
          childrenStyle={
            enableComputedHeight && childHeight !== 0
              ? {height: childHeight}
              : null
          }
          modalHeight={modalHeight}>
          <View
            onLayout={(event: any) => {
              if (enableComputedHeight) {
                const {height} = event?.nativeEvent?.layout;
                handleOnLayoutChange(height);
              }
            }}>
            {children}
          </View>
        </Modalize>
      </Portal>
    );
  };

  return renderContent();
});

export default ModalizeAdjustToContentHeight;

[lortschi]

It would be nice if someone of the contributors for this api could make after 4 months bug localization a PR to fix this in the code base. Thanks!

[tuanngocptn]

Hello, I have the same problem. I really hope receive the answer . Thanks so much :<

[Orijinn-github]

Same here. Cannot use the workaround with scrollable height with inputs.

[AndreCosta101]

Same here. Is this lib still being maintained by anyone?

[carlosdavid0]

I stopped at this error

I added the react-native-gesture-handler library to the project and called it in app.ts like this

`import React, { useEffect, useRef, useState } from "react"; import Routes from "./src/Routes/index.routes"; import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {

return ( <GestureHandlerRootView style={{ flex: 1 }} > <Routes /> </GestureHandlerRootView> ); }`

[MarouaniALA]

If anyone still searching, you can use modalHeight option but you should set avoidKeyboardLikeIOS={true} and keyboardAvoidingBehavior={isIos() ? undefined : 'height'}

[Vimal1464]

I stopped at this error

I added the react-native-gesture-handler library to the project and called it in app.ts like this

`import React, { useEffect, useRef, useState } from "react"; import Routes from "./src/Routes/index.routes"; import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {

return ( <GestureHandlerRootView style={{ flex: 1 }} > ); }`

It works

[arnoldc]

same as well for me im running 0.71.17 was having unresponsive modal in android and my hermes is is enabled

<GestureHandlerRootView style={{ flex: 1 }} >

this works but the warning is still there