react-native-slidepicker

React Native is a pure JavaScript implementation for sorting data selection scenarios such as address, time, etc.

Making: github.com/lexguy/reac…

The effect

Three round selection, select cascading address data:

(Custom item height, selected and unselected item background color, font color and size)

The cause of

The current use of the React-native picker component, although not a functional flaw, is a little bit poor in style adjustability, and since the library was updated a few years ago, the issue clearing speed is slow, so we still need to prepare an alternative.

implementation

The specific implementation scheme, the first scheme considered is ScrollView sliding, and then when sliding away to locate the adjacent selection Item above.

When using ScrollView for a single selection of the sliding effect, it is found that after adding a transparent background color above the ScrollView can not get the sliding event, the upper View does block the gesture effect, even if the gesture is not processed, ScrollView will not slide.

There’s only one way to do it, and that’s with gestures.

Select the list to perform the overall transform according to the gesture sliding. The gesture is offset up and down, and the gesture is positioned to the nearest position rounded according to the height of Item when it is released. The selection list and transparent background layer both handle the gesture and also manipulate the TranForm value, so there is no problem with small gesture sliding areas.

Each time the gesture stops, the position is calculated to get the index in the list of values, and the result is returned via the props callback function. If it is a cascading list, reset the data for the next selection round to the initial value.

The results of

After debugging, the result is finally available on Github. It has been put on react-native Slidepicker.

Also uploaded to NPM library, can be installed directly:

npm install react-native-slidepicker
Copy the code

Refer to github address.