Neoclassic Placebo Maker

    react-native-picker-delete-module
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    React Native Picker Module with delete button for Android & IOS

    With this package you can easily use picker with onPress function.

    Using react-native-modal and @react-native-picker/picker component for IOS and using RecyclerView and AlertDialog for Android as NativeModule.

    Note: this fork contains the delete button functionality

    v2.0.2 released.

    v2.0.2 has a lot of breaking changes. You should be carefull when using this version.

    v2.0.2

    • Android input.substr issue solved.

    v2.0.1

    • On IOS null value issue solved.

    Version 2.0.0

    • useNativeDriver flag added.
    • @react-native-community/picker added because picker extracted from core react native
    • react-native-modal added to package for IOS
    • selectedColor added
    • disabled & enabled IOS confirm button styles added.
    • Now we can set object array for items or array.
    • IOS part start using hooks
    • confirmButtonStyle & cancelButtonStyle & contentContainerStyle added
    • Adding image to picker item at Android removed. If you need this feature please use v1.3.1
    • And a lot of upgrade...

    Getting Started

    With YARN

    yarn add react-native-picker-delete-module && yarn add react-native-modal && yarn add @react-native-community/picker
    

    After React Native v0.60.0

    cd ios && pod install
    

    Before React Native v0.60.0

    Automatic linking

    react-native link react-native-picker-delete-module
    

    Manual Linking

    Manual Installation (If something went wrong with react-native link)

    Props

    Props Type Default & Description Required OS
    value string - No Android, IOS
    useNativeDriver bool true No IOS
    backdropColor string - No IOS
    backdropOpacity double 0.7 No IOS
    items array / object array - Yes Android, IOS
    title string - No Android, IOS
    titleStyle object {} No IOS
    confirmButtonStyle object {} No IOS
    cancelButtonStyle object {} No IOS
    contentContainerStyle object {} No IOS
    itemStyle object {} No IOS
    cancelButtonTextStyle object {} No IOS
    confirmButtonEnabledTextStyle object {} No IOS
    confirmButtonDisabledTextStyle object {} No IOS
    pickerRef any - Yes Android, IOS
    onValueChange func (value: string) => void Yes Android, IOS
    cancelButton string Cancel No IOS
    confirmButton string Confirm No IOS
    onCancel func - No Android, IOS
    selectedColor string - No Android, IOS

    Usage with Hooks

    import React, { useRef, useState } from "react"
    import { Button, SafeAreaView, Text } from "react-native"
    import ReactNativePickerModule from "react-native-picker-delete-module"
    
    const App = () => {
      const pickerRef = useRef()
      const [value, setValue] = useState()
      const dataset_1 = [1, 2, "Java", "Kotlin", "C++", "C#", "PHP"]
      const dataset_2 = [
        {
          value: 101,
          label: "Javascript",
        },
        {
          value: "golang_101",
          label: "Go",
        },
        {
          value: "kotlin_dsl",
          label: "Kotlin",
        },
        {
          value: "java_101",
          label: "Java",
        },
        {
          value: "cplusplus",
          label: "C++",
        },
        {
          value: "csharp_201",
          label: "C#",
        },
        {
          value: "php_201",
          label: "PHP",
        },
      ]
      return (
        <>
          <SafeAreaView>
            <Button title="Select a language" onPress={() => pickerRef.current.show()} />
            <Text>Selected Item Text: {value}</Text>
          </SafeAreaView>
          <ReactNativePickerModule
            pickerRef={pickerRef}
            value={value}
            title={"Select a language"}
            items={dataset_1}
            titleStyle={{ color: "white" }}
            itemStyle={{ color: "white" }}
            selectedColor="#FC0"
            confirmButtonEnabledTextStyle={{ color: "white" }}
            confirmButtonDisabledTextStyle={{ color: "grey" }}
            cancelButtonTextStyle={{ color: "white" }}
            confirmButtonStyle={{
              backgroundColor: "rgba(0,0,0,1)",
            }}
            cancelButtonStyle={{
              backgroundColor: "rgba(0,0,0,1)",
            }}
            contentContainerStyle={{
              backgroundColor: "rgba(0,0,0,1)",
            }}
            onCancel={() => {
              console.log("Cancelled")
            }}
            onValueChange={value => {
              console.log("value: ", value)
              setValue(value)
            }}
          />
        </>
      )
    }
    
    export default App

    Class Component Example

    import React from "react"
    import { SafeAreaView, Text, Button } from "react-native"
    import ReactNativePickerModule from "react-native-picker-delete-module"
    
    const dataset = [
      {
        value: 101,
        label: "Javascript",
      },
      {
        value: "golang_101",
        label: "Go",
      },
      {
        value: "kotlin_dsl",
        label: "Kotlin",
      },
      {
        value: "java_101",
        label: "Java",
      },
      {
        value: "cplusplus",
        label: "C++",
      },
      {
        value: "csharp_201",
        label: "C#",
      },
      {
        value: "php_201",
        label: "PHP",
      },
    ]
    class App extends React.Component {
      constructor(props) {
        super(props)
        this.pickerRef = React.createRef()
        this.state = {
          value: null,
        }
      }
      render() {
        return (
          <>
            <SafeAreaView>
              <Button title="Select a language" onPress={() => this.pickerRef.current.show()} />
              <Text>Selected Item Text: {this.state.value}</Text>
            </SafeAreaView>
            <ReactNativePickerModule
              pickerRef={this.pickerRef}
              value={this.state.value}
              title={"Select a language"}
              items={dataset}
              selectedColor="#FC0"
              onCancel={() => {
                console.log("Cancelled")
              }}
              onValueChange={value => {
                this.setState({
                  value: value,
                })
              }}
            />
          </>
        )
      }
    }
    export default App

    FYI

    You can use more than one picker in same screen. You just need to set different pickerRef.

    p.s : If you want to get country list from native device you can use this package: https://github.com/talut/react-native-countries

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details

    Install

    npm i react-native-picker-delete-module

    DownloadsWeekly Downloads

    0

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    584 kB

    Total Files

    65

    Last publish

    Collaborators

    • vascofg