Question 205106 in React native Question posted in
The official React Native documentation can be found here.

make a custom alert window with an input in react native

I want to create a window that has an input when a button is pressed

Hello, I would like to know how I can create a custom alert-type window that has an input, that appears when a button is pressed. In case it is not possible with an alert-type window, it could be opening another view of the app

Tags:

2

Answers


  1. 0 
    import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Modal } from 'react-native';

const CustomAlert = ({ visible, onClose, onSubmit }) => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (text) => {
    setInputValue(text);
  };

  const handleSubmit = () => {
    onSubmit(inputValue);
    setInputValue('');
  };

  return (
    <Modal visible={visible} animationType="slide" transparent>
      <View style={styles.container}>
        <View style={styles.alertBox}>
          <Text style={styles.title}>Enter your input:</Text>
          <TextInput
            style={styles.input}
            value={inputValue}
            onChangeText={handleInputChange}
          />
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={onClose}>
              <Text style={styles.buttonText}>Cancel</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={handleSubmit}>
              <Text style={styles.buttonText}>Submit</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  alertBox: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 8,
    width: '80%',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  button: {
    marginLeft: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
    backgroundColor: '#007AFF',
    borderRadius: 4,
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
  },
};

export default CustomAlert;
    Login or Signup to reply.
  2. 0

    So I am sharing my customModal component’s code below ,

    import { StyleSheet, Text, View, Modal, TouchableOpacity, TouchableWithoutFeedback, Image } from 'react-native'
import React from 'react'
import { colors, fonts } from '../constants';
import LinearGradient from 'react-native-linear-gradient';
import Texts from './Texts';


const CustomModal = ({
    animationType,
    cancelText,
    okText,
    modalContent,
    modalChild,
    onPressCancel,
    onPressOk,
    visible,
    onPressOutsideTap,
    showModalOkButton,
    showModalCancelButton,
    source,
    imageStyle,
    showImage,
    colorss,
    okButtonStyle,
    extraStyle,
    modalChildStyle,
    extraModalStyle
}) => {

    const handleModalInsideTap = () => {
        // Do nothing when the user taps inside the modal
    };

    const handleModalOutsideTap = () => {
        handleModalClose();
    };

    return (
        <Modal visible={visible} animationType={animationType} transparent={true}>
            <TouchableWithoutFeedback onPress={onPressOutsideTap}>
                <LinearGradient // Wrap the modal content with LinearGradient
                    colors={colorss} // Define your desired gradient colors
                    style={styles.modalContainer}
                >
                    <TouchableWithoutFeedback onPress={handleModalInsideTap}>
                        <View style={[styles.modalContent, extraStyle]}>
                            {showImage && <Image source={source} style={imageStyle} />}
                            <Text style={[styles.modalText, extraModalStyle]}>
                                {modalContent}{"n"}
                                <Text numberOfLines={2} style={[styles.modalChild, modalChildStyle]} >{modalChild}</Text>
                            </Text>
                            <View style={styles.modalButtons}>
                                {showModalCancelButton && <TouchableOpacity
                                    style={styles.cancelButton}
                                    onPress={onPressCancel}
                                >
                                    <Text style={styles.cancelButtonText}>{cancelText}</Text>
                                </TouchableOpacity>}
                                {showModalOkButton && <TouchableOpacity
                                    style={[styles.okButton, okButtonStyle]}
                                    onPress={onPressOk}
                                >
                                    <Text style={styles.okButtonText}>{okText}</Text>
                                </TouchableOpacity>}
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </LinearGradient>
            </TouchableWithoutFeedback>
        </Modal>
    )
}

export default CustomModal

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        backgroundColor: colors.white,
        padding: 20,
        borderRadius: 15,
    },
    modalText: {
        fontSize: 18,
        marginBottom: 20,
        textAlign: "center",
        color: colors.black,
        fontWeight: "400",
        marginBottom: 10,
    },
    modalButtons: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        marginTop: 20,
    },
    okButton: {
        backgroundColor: colors.green,
        borderRadius: 15,
        paddingHorizontal: 20,
        // paddingVertical: 5.5,
        minWidth: 90,
        justifyContent: "center",
        alignItems: "center",
    },
    cancelButton: {
        backgroundColor: colors.white,
        borderRadius: 15,
        paddingHorizontal: 20,
        paddingVertical: 5.5,
        borderWidth: 1,
        borderColor: colors.lightGreen,
        minWidth: 90,
        justifyContent: "center",
        alignItems: "center",
    },
    okButtonText: {
        color: colors.white,
        // padding: 10
    },
    cancelButtonText: {
        color: colors.black,
        // padding: 10
    },
    modalChild: {
        fontFamily: fonts.Regular,
        fontSize: 16,
        color: colors.black,
        lineHeight: 25
    }
})

    Use the above component in your parent component as however you want . This is the most customizable component. Use your own color codes and fonts . USe this in your parent component like this ,

       <CustomModal
        showImage={true}
        source={images.wrong}
        visible={showErrModal}
        modalChild={"Invalid Credentialsn Please Enter valid details"}
        showModalCancelButton={false}
        showModalOkButton={true}
        okText={"Okay"}
        onPressOk={modalErr}
        colorss={[
          "rgba(0, 0, 0, 0.4)",
          "rgba(0, 0, 0, 0.4)",
          "rgba(0, 0, 0, 0.4)",
        ]}
        imageStyle={styles.modalImage}
        okButtonStyle={styles.okButtonStyle}
        extraStyle={styles.modalContent}
      />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search