react-native-alert-pickers v1.3.1

About

An advanced alerts and pickers with js.

Installation

$ npm install react-native-alert-pickers
$ react-native link react-native-alert-pickers

Contents

Advanced Pickers

• APColorPicker
• APContactPicker
• APLocalePicker
• APImagePicker

Advanced Alerts

• APAlert
• APTextFieldAlert

Notes

All APXXXPickers or APXXXAlerts aren't support props while config.
For example:

/// Bad use
<APColorPicker mode="hls" ref={r => (this.picker = r)} />

/// Good use
<APColorPicker ref={r => (this.picker = r)} />

Usages

APColorPicker

• 配置(Configuration)

• 方法(Method)

/**
* @param colorPickerConfig: The picker's config
* refrence `Configuration`
*/
show({ colorPickerConfig?: APColorPickerConfig })

• Usage

// import module
import { APColorPicker } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APColorPicker ref={r => (this.picker = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
	// Normal
	this.picker.show()
	// Use keyword `global`
	// global.picker.show()
	
	// maybe you want to show with "hsla", easy...
	// this.picker.show({ mode: "hsla" })
	// also, if you want to set `cancelButton`
	// this.picker.show({ cancelButton: { title: "Oh, Amazing!", font: { color: "skyblue" } } })
}

• Results

The mode is "rgba" or "hlsa":

APContactPicker

• 配置(Configuration)

• 方法(Method)

/**
* @param contactPickerConfig: The picker's config
* refrence `Configuration`
*/
show({ contactPickerConfig?: APContactPickerConfig })

• Usage

// import module
import { APContactPicker } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APContactPicker ref={r => (this.picker = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
  // Normal
  this.picker.show()
  // Use keyword `global`
  // global.picker.show()

  // add some config
  // this.picker.show({ #your_configuration# })
}

• Results

APLocalePicker

• 配置(Configuration)

• 方法(Method)

/**
* @param localePickerConfig: The picker's config
* refrence `Configuration`
*/
show({ localePickerConfig?: APLocalePickerConfig })

• Usage

// import module
import { APLocalePicker } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APLocalePicker ref={r => (this.picker = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
  // Normal
  this.picker.show()
  // Use keyword `global`
  // global.picker.show()

  // add some config
  // this.picker.show({ #your_configuration# })
}

• Results

mode: phoneCode

mode: country

APImagePicker(iOS only)

• 配置(Configuration)

• 方法(Method)

/**
* @param imagePickerConfig: The picker's config
* refrence `Configuration`
*/
show({ imagePickerConfig?: APImagePickerConfig })

• Usage

// import module
import { APImagePicker } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APImagePicker ref={r => (this.picker = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
  // Normal
  this.picker.show()
  // Use keyword `global`
  // global.picker.show()

  // add some config
  // this.picker.show({ #your_configuration# })
}

• Results

APAlert

• 配置(Configuration)

• 方法(Method)

/**
* @param alertConfig: The picker's config
* refrence `Configuration`
*/
show({ alertConfig?: APAlertConfig })

// Convenience methods
alert({ alertConfig?: APAlertConfig })
actionSheet({ alertConfig?: APAlertCofnig})

• Usage

// import module
import { APAlert } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APAlert ref={r => (this.alert = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
  // Normal
  this.alert.show()
  // Use keyword `global`
  // global.alert.show()

  // add some config
  // this.alert.show({ #your_configuration# })
}

• Results

APTextFieldAlert

• 配置(Configuration)

• 方法(Method)

/**
* @param textFieldAlertConfig: The picker's config
* refrence `Configuration`
*/
show({ textFieldAlertConfig?: APTextFieldAlertConfig })

• Usage

// import module
import { APTextFieldAlert } from "react-native-alert-pickers"

// Use
render() {
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <APTextFieldAlert ref={r => (this.alert = r)} />
      </View>
    );
  }

// Show picker
_onShow = () => {
    this.alert.show({
      icon: { source: require("./interior_design_1.jpg") },
      title: "Log in",
      message: "Enter your Username and Password to login.",
      textFields: [
        {
          key: "username",
          config: { placeholder: "Choose your username" },
          borderStyle: { borderRadius: 0 }
        },
        {
          key: "password",
          config: { placeholder: "Enter your password" }
        }
      ],
      alertButtons: [
        { title: "Log in", onPress: vals => console.log(vals) },
        { title: "Cancel", font: { color: "red" } }
      ]
    })
  }
  
  // the vals format is associated with textFields key, eg: { username: "", password: "" }

• Results

Properities

• APFont
• APImage
• APButton
• APTextField
• APSearchBar

APFont

APImage

APButton

APTextField

APSearchBar

APBorderStyle