Entering input causes modal reloading automatically

Question

In my React Native 0.62.3 app, a modal is used to collect user input. Here is the view code:

import { Modal, View, TextInput, Button } from 'react-native';
const [price, setPrice] = useState(0);
const [shippingCost, setShippingCost] = useState(0);
const ReturnModal = () => {
        if (isModalVisible) {
            return (
                <View style={styles.modalContainer}>
                <Modal visible={isModalVisible} 
                            animationType = {"slide"}
                            transparent={false} 
                            onBackdropPress={() => setModalVisible(false)}>
                        <View style={styles.modal}>
                            <Text>Enter Price</Text>
                            <TextInput keyboardType={'number-pad'} onChange={priceChange} value={price} autoFocus={true} placeholder={'Price'} />
                            <TextInput keyboardType={'number-pad'} onChange={shChange} value={shippingCost}  placeholder={'SnH'} />
                            <View style={{flexDirection:"row"}}>
                            <Button title="Cancel" style={{bordered:true, backgroundColor:'red'}} onPress={modalCancel} />
                            
                            <Button title="OK" style={{bordered:true, backgroundColor:'white'}} onPress={modalOk} />
                            </View>
                        </View>
                    </Modal>
                </View>
            )    
        } else {
            return (null);
        }
    }

    return (
            <Container style={styles.container}>
               //.....view code

              <ReturnModal />
      
          </Container>
    )

Here is 2 functions to reset state of price and shippingCost:

  const priceChange = (value) => {
    if (parseFloat(value)>0) {
        setPrice(Math.ceil(parseFloat(value)));
    }
};

const shChange = (value) => {
    if (parseFloat(value)>=0) {
        setShippingCost(Math.ceil(parseFloat(value)));
    }
};

The problem is that whenever entering in the price field with keystroke, the modal reloads/resets itself automatically. Tried onChangeText in TextInput and it has the same problem.

with `onChangeText`, the automatical reloading of the modal after each and every key stroke still happened. — user938363, Jan 19 '21 at 20:47
Is this also happening when you enter a keystroke inside the second text input, the one with shipping cost? — dianaqqq, Feb 17 '21 at 22:55
https://stackoverflow.com/questions/59891992/keyboard-dismisses-while-typing-textinput-in-nested-functional-component-react-n/60048240#60048240 — Max, Feb 18 '21 at 10:21
your values refer to undefined state since it's defined outside component — Mod3rnx, Feb 18 '21 at 10:56

score 2 · Answer 1 · answered Feb 18 '21 at 10:19

It seems like you're declaring your hooks outside your component. Try putting them inside your ReturnModal function instead, like this:

const ReturnModal = () => {
  const [price, setPrice] = useState(0);
  const [shippingCost, setShippingCost] = useState(0);
  ...

Documentation reference: Using the State Hook.

Also, I would strongly recommend using the React Hooks ESLint Plugin (among others) to detect issues with your hooks. Here is a guide on how to add this to your React Native project: Add Eslint Support to your React Native Project + React Hooks Rules.

score 1 · Answer 2 · answered Jan 22 '22 at 15:34

1

Instead of using animationType = {"slide"} try using animatonType : 'none'

answered Jan 22 '22 at 15:34

Leiverin

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 23 '22 at 07:39

Entering input causes modal reloading automatically

2 Answers2