react-native-prompt-async

https://www.npmjs.com/package/react-native-prompt-async

Package async similar to the JavaScript 'prompt' method, it's called in a single line with await

Table of Contents

• Installation
• Usage
• Response
• Props

Installation

npm i react-native-prompt-async

or

yarn add react-native-prompt-async

After installation, you must import InitializePrompt and include it in the main root file of your app, usually "App.js".

import { View } from "react-native";
import { initializePrompt } from "react-native-prompt-async";

export default function App (){

  return (
    <View>
      <InitializePrompt/>
      {/* your code */}
    </View>
  );
}

Usage

You can pass just a string by referencing the title property of the prompt or you can pass an object with the properties

import react from 'react';
import { View, Text, Pressable } from "react-native";
import prompt from 'react-native-prompt-async';

function App() {

  async function action (){
    const response = await prompt("¿question?");
    // your code
  }

  return (
    <View>
      <Pressable onPress={action} >
        <Text>Button</Text>
      </Pressable>
    </View>
  );
}

passing properties to the object as parameters

async function action (){
  const response = await prompt({
    title: "¿Why are you a programmer??", 
	  description: "hello:)"
  });
  // your code
}

Response

prompt returns only 3 types of data, false, true or string.

false will be returned only if the user presses the button associated to the cancelButton property or also if he presses the overlay component (gray background) as long as the isOverlayClose property is true.

string will only be returned if the user presses the button that is not associated to the cancelButton property as long as the text field is not empty.

true will only be returned if the alert property is true and the user presses the button that is not associated to the cancelButton property.

Props

All props are optional

Prop	Type	Default	Description
title	string	""	Title of prompt (Main word).
description	string	""	Prompt description, text that goes between the title and the text field.
placeholder	string	"Enter the required.."	placeholder of TextInput.
placeholderTextColor	string	"#DADADA"	placeholderTextColor of TextInput.
textInputDefaultValue	string	""	defaultValue of TextInput.
autofocus	bool	true	Sets the autofocus property of the prompt's TextInput. if true as soon as the prompt window opens the keyboard will be activated automatically.
cancelButton	string	"left"	Property that receives "left" or "right". Property that assigns as "close or cancel button" to any of the two buttons. if cancelButton is "left" then the left Button is going to be the close or cancel Button.
leftButtonText	string	"Cancel"	Text to be displayed on the left button.
rightButtonText	string	"Done"	Text to be displayed on the right button.
leftButtonTextColor	string	"#D22929"	Text color displayed on the left button.
rightButtonTextColor	string	"#76C856"	Text color displayed on the right Button.
isOverlayClose	bool	false	Establishes whether the overlay (gray background) when pressed closes or cancels the prompt, if false it will not do so.
keyboardSpace	number	0	Space between keyboard and prompt window, range 1-500.
alert	bool	false	if true: sets the prompt to alert. button not associated with cancelButton returns true.
buttonHidden	bool	none	hides either or both buttons. receives "left", "right" or "all" as a value. if "all" hides all buttons. if "left" or "right" hides the corresponding button.

This is how it looks by default:

This is how it looks like applying the description property with the value "hello:)":

This is how it looks like applying the placeholderTextColor property with the value "blue":

This is how it looks like applying the darkMode property with the value true and the keyboardSpace property with the value 50:

This is how it looks like applying the cancelButton property with the value "right": GIF 1