Nucleic Phosphate Modifier

    @mobile-reality/react-native-select-pro
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.0 • Public • Published
    React Native Select Pro

    React Native dropdown (select) component developed by Mobile Reality


    Version GitHub stars npm total downloads npm week downloads Last master branch commit License

    Features

    • Customizable
    • Searchable
    • Animations
    • Multi select
    • Android / iOS / Expo support
    • TypeScript support
    • Based on react-native-portal

    Example

    Expo Snack

    Example on Expo

    Video preview

    https://user-images.githubusercontent.com/11172548/142592143-fc4ffcc5-2d8f-49ff-aa58-0ae5f9dd46bf.mp4

    Repo

    Clone this repo and next:

    cd example
    yarn install
    yarn android #run example app for Android
    yarn ios #run example app for iOS

    Documentation

    https://mobilereality.github.io/react-native-select-pro/

    Getting Started

    Installation

    npm install @mobile-reality/react-native-select-pro
    

    or

    yarn add @mobile-reality/react-native-select-pro
    

    Usage

    Firstly, wrap your app code in SelectProvider

    import React from 'react';
    import { SelectProvider } from '@mobile-reality/react-native-select-pro';
    
    const RootComponent = () => {
      return (
        <SelectProvider>
          {/* rest of your app code */}
        </SelectProvider>
      )
    };

    Then you can use Select component

    import React from 'react';
    import { View } from 'react-native';
    import { Select } from '@mobile-reality/react-native-select-pro';
    
    const SomeComponent = () => {
      return (
        <View>
          <Select {/* One required prop: `options` */}
            options={[{ value: 'somevalue', label: 'somelabel' }]} 
          />
        </View>
      )
    };

    If you want to use Select component inside:

    • Modal from react-native / react-native-modal
    • BottomSheet from react-native-bottom-sheet

    you need to wrap code inside Modal / BottomSheet in SelectModalProvider

    import React from 'react';
    import { View, Modal, Text } from 'react-native';
    import { Select, SelectModalProvider } from '@mobile-reality/react-native-select-pro';
    
    const SomeComponent = () => {
      return (
        <View>
          <Modal> {/* e.g. `Modal` from `react-native` */}
            <SelectModalProvider> {/* `SelectModalProvider` wrapping code inside `Modal` */}
              <Text>Modal</Text>
              <Select
                options={[{ value: 'somevalue', label: 'somelabel' }]}
              />
            </SelectModalProvider>
          </Modal>
        </View>
      )
    };

    Thanks

    Contributing

    See the contributing guide to learn how to contribute to the repository and the development workflow.

    License

    MIT

    Install

    npm i @mobile-reality/react-native-select-pro

    DownloadsWeekly Downloads

    297

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    511 kB

    Total Files

    169

    Last publish

    Collaborators

    • irekrog
    • gitsad