React Native Wheel Picker Example

React Native Wheel Picker Featured UI

Introduction

Hello Everyone and welcome to this new article, where we are going to build a React Native Wheel Picker Example.

The Wheel Picker can be an alternative to other whats of item selection, depending on your app.
Some apps use Multi Select Dropdown, while other apps use actionsheet Selection.

Our Wheel Picker, can be seen in date picker, where you scroll up and down to select from the date Items.

For our app example, we will build a sample app from which the user can select from a list of Fruits.

Our final result of the app will look like this.

React Native Wheel Picker UI

Environment Setup

To use Wheel Picker in our app, we will install a tiny library by @gregfrench.

It’s pretty straight forward to install.

yarn add <code>@gregfrench/react-native-wheel-picker

React Native Wheel Picker Basic Usage

<Picker <em>style</em>={{width: 150, height: 180}}
    <em>lineColor</em>="#000000"
    <em>lineGradientColorFrom</em>="#008000" 
    <em>lineGradientColorTo</em>="#FF5733" 
    <em>selectedValue</em>={selectedItem}
    <em>itemStyle</em>={{color:"white", fontSize:26}}
    <em>onValueChange</em>={(<em>index</em>) => setSelectedItem(<em>index</em>) }>
    {itemList.map((<em>value</em>, <em>i</em>) => (
      <PickerItem <em>label</em>={<em>value</em>} <em>value</em>={<em>i</em>} <em>key</em>={<em>i</em>} />
    ))}
  </Picker>

As you can see, the Wheel Picker component takes few props in order to work.

lineColor: to set top and bottom line color (Without gradients)

lineGradientColorFrom: to set top and bottom starting gradient line color

lineGradientColorTo: to set top and bottom ending gradient

selectedValue: The current selected item from the wheel

itemStyle: the list item view styles

onValueChange: callback function when the selectedItem is changed, here we’re updating the selecteditem in the state with the new value.

and finally we’re mapping and rendering the list of items from the state.

Full code

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';

import Picker from '@gregfrench/react-native-wheel-picker'
var PickerItem = Picker.Item;

const App = () => {
  const [selectedItem, setSelectedItem ] = useState(2);
  const [itemList , setItemList ] = useState(['Apple', 'Orange', 'Peach', 'Strawberries', 'Pineapple']);

  return (
    <View <em>style</em>={styles.container}>
      <Picker <em>style</em>={{width: 150, height: 180}}
          <em>lineColor</em>="#000000" 
          <em>lineGradientColorFrom</em>="#008000" 
          <em>lineGradientColorTo</em>="#FF5733" 
          <em>selectedValue</em>={selectedItem}
          <em>itemStyle</em>={{color:"white", fontSize:26}}
          <em>onValueChange</em>={(<em>index</em>) => setSelectedItem(<em>index</em>) }>
          {itemList.map((<em>value</em>, <em>i</em>) => (
            <PickerItem <em>label</em>={<em>value</em>} <em>value</em>={<em>i</em>} <em>key</em>={<em>i</em>} />
          ))}
        </Picker>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff4646'
  }
})

Final Result

React Native Wheel Picker UI

Conclusion

And there you have it an sample react native wheel picker app,

I hope you enjoyed reading this article and found it as informative as you have expected.

You can check the source code on github and expo.io.

Stay safe and happy coding.

Total
15
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
React Native Activity Indicator Featured

React Native Activity Indicator Example

Next Post
react native qr code scanner example UI Featured

React Native QR Code Scanner Using Expo

Related Posts