// 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" } } })
}

// 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# })
}

// 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# })
}

// 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# })
}

// 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# })
}

// 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: () => {
          /// TODO1: your request
          this.alert.startAnimating()
          ...urlRequest
          this.alert.dismiss(values => navigate('authed'))

          /// TODO2: get values only
          this.alert.dismiss(values => console.log(JSON.stringify(values)))
        } },
        { title: "Cancel", font: { color: "red" }, onPress: () => this.alert.dismiss() }
      ]
    })
  }

  // the vals format is associated with textFields key, eg: { username: "", password: "" }