Warning during state update.

[ryrebs]

I've got this error:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

my code is:

const [value, setValue] = React.useState("");

 const  onChangeTextReset = React.useCallback(
     (val: string) => {
       setValue(val);
     },
     [setValue, setError]
   );

<Modal>
 <Card disabled={true}>
        <Input
          label={labelWithError}
          style={style.addInput}
          status="basic"
          placeholder="ID"
          value={value}
          onChangeText={onChangeTextReset}
        />
        <Button onPress={add}>Add</Button>
  </Card>
</Modal>

Does anyone have an idea why is this happening?

The code above is working fine and it accomplishes what it does, which is to update value when input changes.
The error only shows up during the first render. It seems setValue is the culprit.

Further warning:

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7852:17 in classComponentUpdater.enqueueForceUpdate
- node_modules/react/cjs/react.development.js:343:34 in Component.prototype.forceUpdate
- node_modules/@ui-kitten/components/theme/modal/modalPanel.component.js:61:23 in ModalPanel#update
- node_modules/@ui-kitten/components/theme/modal/modal.service.js:72:24 in ModalServiceType#update
- node_modules/@ui-kitten/components/ui/modal/modal.component.js:103:28 in Modal#render

Environment:

"@ui-kitten/components": "^5.0.0",
"@ui-kitten/eva-icons": "^5.0.0",

[bchapoton]

Hi, we have the same issue in our project when we set a state in a modal component.
Do you have an idea of when it will be fixed ?

[marklawlor]

Same issue as well, here is a minimal reproduction that is a slight variation from the example in the docs.

For visibility, the issue title should be changed to highlight that this issue is caused by the Modal component (most likely the forcedUpdate during ModalPanel.update)

import React from 'react';
import { StyleSheet } from 'react-native';
import { Button, Card, Layout, Modal, Text } from '@ui-kitten/components';

export const ModalSimpleUsageShowcase = () => {

  const [visible, setVisible] = React.useState(false);
  const [text, setText] = React.useState("Welcome to UI Kitten 😻");

  return (
    <Layout style={styles.container} level='1'>

      <Button onPress={() => setVisible(true)}>
        TOGGLE MODAL
      </Button>

      <Modal visible={visible}>
        <Card disabled={true}>
          <Text>{text}</Text>
          <Button onPress={() => setText("Check console for warning!")}>
            Change Text
          </Button>
        </Card>
      </Modal>

    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    minHeight: 192,
  },
});

[artyorsh]

Please see #1094 (comment)

[marklawlor]

@artyorsh I understand the workaround specified in that ticket. But that is simply a workaround due to an issue with this library performing a forceUpdate during a render function.

I don't have the current capacity to fix this issue right now but looking at the code of ModalPanel, I think I understand the basic issue.

Can you please keep this issue open so it can be tracked. That way either myself or another developer can come back and fix the issue.

[exlnt]

I am trying to build a form within a modal. I have run into this error when using, SELECT, RADIO and CHECKBOX. This issue is going to force me to move to a new screen instead of using a modal. I hope this issue gets resolved soon.

[ErtugrulBEKTIK]

I have same issue when use modal.

[siarheipashkevich]

I have same issue also.

[sergeushenecz]

I have same issue also

[sergeushenecz]

Any news on this bug?

[natheeshsunway]

Any updates?

[sergeushenecz]

@natheeshsunway I have fixed and apply patch. I will create pull request.

[sergeushenecz]

Open pull request.

[AntonBorovoi]

Fixed within version 5.1.1