React-native-ui-kitten: Warning during state update.

[rodelrebucas]

I've got this error:

Warning: Cannot update during an existing state transition (such as withinrender). 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]
);

label={labelWithError}
style={style.addInput}
status="basic"
placeholder="ID"
value={value}
onChangeText={onChangeTextReset}
/>

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 https://github.com/akveo/react-native-ui-kitten/issues/1094#issuecomment-630141254

[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.