Cross-Platform React Native Scroll Picker component.

#reactnative #react #picker #javascript

To platform or not to platform

It's not un-common to hear engineers saying that we wan't to preserve native platform behaviour. That means when we are writing hybrid apps with React Native or Flutter some opt in for writing one styling for iOS and one for Android. Most of the time the differences are very small, however recently I encountered one part of platform specific design that I did not want to accept.

The native picker modules for react native are vastly different between iOS and Android. iOS uses a scrolling list to pick a value and Android uses a modal / dropdown picker, and in my opinion they are so different that they need too much platform specific code for my taste.

I understand that there are some purists out there that believes deeply in preserving the Android / iOS way; I don't.

So I built my own picker that works the same, and looks the same cross-platform. The list uses a FlatList from RN, and I've just added props and some abstraction so it behaves with a familiar API close to the react-native-community picker.

The Result

Basic Example	Bottom Sheet Example

import and usage



import {ScrollPicker} from 'react-native-value-picker';

        ...

        <ScrollPicker
          // We need to tell the picker the current picked value
          currentValue={pickedValue}
          // The picker is a pure component so we need to tell it
          // what data it needs to subscribe to, otherwise it won't
          // re-render
          extraData={pickedValue}
          // The array of objects which makes up the list
          list={MOCK_DATA}
          // Callback function to update the picked value
          onItemPress={setPickedValue}
          // Changes the text color in the list
          labelColor="blue"
          // Changes color of the row separator in the list
          separatorColor="purple"
          // Changes color of the text of the picked item in the list
          selectedColor="red"
        />

        ...

Picker List Data Structure

the list prop requires an array of Objects according to the below structure.

value: the API value
label: the text rendered into the picker list.



export const MOCK_DATA = [

  {

    value: 1,

    label: 'Number 1',

  },

  {

    value: 2,

    label: 'Number 2',

  },

.... REST ....

{

    value: 15,

    label: 'Number 15',

  },

  {

    value: 16,

    label: 'Number 16',

  },

];

Ending Thoughts

In my opinion the superior design type is a picker that scrolls, and user can pick a value from that list. To use the Android Native Picker module was not an option for me.

If you like what you see you can head on over the GitHub Repo here and look at the code, it's less an 100 lines with styling and just uses a FlatList.

There you can find more documentation on how to try it out yourself and also the available prop options.

I've published it as an npm package and is available here: react-native-value-picker

If you found this interesting and maybe would like me to make a tutorial on how to make your own, or if I should dig deeper into how it's built let me know!

And what do you think? to platform or not to platform?

Thanks for reading!