Custom Alert works only once-CodePudding

I have created custom alert with Modal in react native but it renders only once. This is my component

import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';

const CustomAlert = props => {
  const {title, msg, visible} = props;
  const [alert, setAlert] = useState(visible);
  return (
    <View>
      <Modal
        animationType="fade"
        transparent={true}
        visible={alert}>
        <TouchableOpacity
          style={styles.centeredView}
          onPress={() => {
            // setAlert(false);
          }}>
          <View style={styles.modalView}>
            <Text>{title}</Text>
            <Text>{msg}</Text>
            <TouchableOpacity
              onPress={() => setAlert(false)}>
              <Text style={styles.btnText}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

This is how I'm rendering it my screen

const [alert, setAlert] = useState(false);
const submit = () => {
    let reg = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w\w ) $/;
    if (!name) {
      setAlert(true);
      return;
    }}

And in return on Screen

{alert && <CustomAlert title="asdasd" msg="asd23" visible={alert} />}

And in m Screen when i click on button to render this alert it only works once , i have logged props whis also show once

CodePudding user response：

The setAlert(true) will not trigger/update the alert value because it's already true when it got triggered once. (Because useState will not update the same variable value again)

You can achieve your goal by changing the alert by triggering the setAlert in the onPress of CustomModal directly. Something like this (I haven't run it, but my logic is as below):

This will be your main component:

import { Text, View } from 'react-native';
import React, { useState } from 'react';

const MainComponent = () => {
  const [alert, setAlert] = useState(false);

  const submit = () => {
    let reg = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w\w ) $/;
    if (!name) {
      setAlert(true);
      return;
    }
  };

  return (
    <View>
      {' '}
      {alert && (
        <CustomAlert
          title="asdasd"
          msg="asd23"
          visible={alert}
          onPress={(value) => setAlert(value)}
        />
      )}{' '}
    </View>
  );
};

This is the CustomAlert:

import {Text, View, Modal, TouchableOpacity} from 'react-native';
import React, {useState} from 'react';
import {styles} from '../../Styles';

const CustomAlert = props => {
  const {title, msg, visible, onPress} = props;

  return (
    <View>
      <Modal
        animationType="fade"
        transparent={true}
        visible={alert}>
        <TouchableOpacity
          style={styles.centeredView}
          onPress={() => {
            // setAlert(false);
          }}>
          <View style={styles.modalView}>
            <Text>{title}</Text>
            <Text>{msg}</Text>
            <TouchableOpacity
              onPress={() => onPress(false)}>
              <Text style={styles.btnText}>OK</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};