react-native-dialog-input-custom

React native dialog input customizable

Usage no npm install needed!

<script type="module">
  import reactNativeDialogInputCustom from 'https://cdn.skypack.dev/react-native-dialog-input-custom';
</script>

README

react-native-dialog-input-custom

This is a dialog input for react native, it's really customizable. It works fine in Android and iOS.

Setup

npm install --save react-native-dialog-input

Basic Usage


import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import DialogInput from 'react-native-dialog-input-custom';



export default class App extends Component<> {
  constructor(props){
    super(props);
    this.state = {
      dialogIsVisible: true
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <DialogInput 
        dialogIsVisible={this.state.dialogIsVisible}
        closeDialogInput={() => this.setState({dialogIsVisible: false})}
        submitInput={(textValue) => console.warn(textValue)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Example (Basic)

React Native Dialog Input iOS React Native Dialog Input Android

Custom Usage



import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import DialogInput from 'react-native-dialog-input-custom';



export default class App extends Component<> {
  constructor(props) {
    super(props);
    this.state = {
      dialogIsVisible: true
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <DialogInput
          dialogIsVisible={this.state.dialogIsVisible}
          closeDialogInput={() => this.setState({ dialogIsVisible: false })}
          submitInput={(textValue) => console.warn(textValue)}
          outerContainerStyle={{ backgroundColor: 'rgba(0,0,0, 0.75)' }}
          containerStyle={{ backgroundColor: 'rgba(255,0,0, 0.2)', borderColor: 'red', borderWidth: 5 }}
          titleStyle={{ color: 'white' }}
          title="This is the title"
          subTitleStyle={{ color: 'white' }}
          subtitle="This is the subtitle"
          placeholderInput="This is the text inside placeholder..."
          placeholderTextColor="black"
          textInputStyle={{ borderColor: 'black', borderWidth: 2 }}
          secureTextEntry={false}
          buttonsStyle={{ borderColor: 'white' }}
          textCancelStyle={{ color: 'white' }}
          submitTextStyle={{ color: 'white', fontStyle: 'italic' }}
          cancelButtonText="CANCEL"
          submitButtonText="CONFIRM"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});


Example (Custom)

React Native Dialog Input iOS React Native Dialog Input Android

Properties

name description type
dialogIsVisible Value to show the dialog Boolean
outerContainerStyle Style for the background of the component Object (OPTIONAL)
containerStyle Style for the container of the component Object (OPTIONAL)
titleStyle Style for the title Object (OPTIONAL)
title Value of the title String (OPTIONAL)
subTitleStyle Value of the subtitle String (OPTIONAL)
placeholderInput Value of the placeholder String (OPTIONAL)
placeholderTextColor Color of the placeholder String (OPTIONAL)
textInputStyle Style for the TextInput component Object (OPTIONAL)
secureTextEntry Value for the secure text property Boolean (OPTIONAL), default FALSE
buttonsStyle Style for the two buttons Object (OPTIONAL)
textCancelStyle Style for the "Cancel" Button Object (OPTIONAL)
submitTextStyle Style for the "Submit" Button Object (OPTIONAL)
cancelButtonText Value of the "Cancel" Button String (OPTIONAL)
submitButtonText Value of the "Submit" Button String (OPTIONAL)

Methods

name description returns
closeDialogInput() Event fired when the user press the Cancel Button and Submit Button, used to close the dialog -
submitInput() Event fired when the user press the Submit button, it will also invoke closeDialogInput(), and returns the value of the text input String