Custom Alert works only once

Question

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

EDIT @Thinker's answer works but How to render this customAlert component from action? If an action or api call completes, how to render this component and show message in any screen as actions in redux does not allow to render compponent there because they are not react functional components....

Answer 1

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>
  );
};