@freakycoder/react-native-picker-modal

    0.1.0 • Public • Published

    React Native Picker Modal

    Battle Tested ✅

    React Native Picker Modal

    npm version npm Platform - Android and iOS License: MIT styled with prettier

    React Native Picker Modal

    Installation

    Add the dependency:

    npm i react-native-picker-modal

    Peer Dependencies

    IMPORTANT! You need install them
    "react-native-modal": ">= 13.0.0"

    Usage

    Import

    import PickerModal from "@freakycoder/react-native-picker-modal";

    Fundamental Usage

    <ImagePickerModal
      title="You can either take a picture or select one from your album."
      isVisible={isVisible}
      data={["Take a photo", "Select from album"]}
      onPress={(selectedItem: string) => {
        Alert.alert("Alert", selectedItem);
      }}
      onCancelPress={() => {
        setVisible(false);
      }}
      onBackdropPress={() => {
        setVisible(false);
      }}
    />

    Example Project 😍

    You can checkout the example project 🥰

    Simply run

    npm i
    
    react-native run-ios/android
    

    should work of the example project.

    Configuration - Props

    Fundamentals [Required]

    Property Type Default Description
    title string undefined change the title
    data string[] undefined set the picker modal dataset as string array
    isVisible boolean undefined change the picker modal visibility
    onPress function undefined set your own logic for the button functionality when it is pressed
    onCancelPress function undefined set your own logic for the cancel button functionality when it is pressed

    Customization (Optionals)

    Property Type Default Description
    onBackdropPress function undefined set your own logic for the backdrop of the modal functionality when it is pressed
    TouchableComponent TouchableHightlight default set your own component instead of default react-native TouchableHightlight component
    style ViewStyle default set or override the style object for the main container
    dividerStyle ViewStyle default set or override the style object for the divider style
    cancelButtonStyle ViewStyle default set or override the style object for the cancel button style
    titleTextContainer ViewStyle default set or override the style object for the title text container
    titleTextStyle TextStyle default set or override the style object for the title text style
    cancelButtonTextStyle ViewStyle default set or override the style object for the cancel button text container
    actionButtonStyle ViewStyle default set or override the style object for the action button container
    actionButtonTextStyle ViewStyle default set or override the style object for the action button text
    actionButtonUnderlayColor string rgba(0,0,0,0.3) change the action button's underlay color
    cancelButtonUnderlayColor string rgba(200,200,200,0.1) change the cancel button's underlay color

    Future Plans

    • [x] LICENSE
    • [ ] Write an article about the lib on Medium

    Author

    FreakyCoder, kurayogun@gmail.com

    License

    React Native Picker Modal is available under the MIT license. See the LICENSE file for more info.

    
    

    Install

    npm i @freakycoder/react-native-picker-modal

    DownloadsWeekly Downloads

    7

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    47.6 kB

    Total Files

    36

    Last publish

    Collaborators

    • freakycoder