Skip to content
This is the ring-shaped wheel navigator/selector component for react native
Branch: master
Clone or download
Alex Kobylinski
Latest commit f793e7d Feb 12, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Create npmpublish.yml Feb 5, 2020
.gitignore initial file structure (#1) Feb 5, 2020
LICENSE some documentation and examples Feb 11, 2020
index.js removed unnecessary dependency of gesture handler Feb 7, 2020


This is the ring-shaped wheel navigator/selector component for react native


Inside the react native project do the following

  • npm i react-native-ring-picker --save install the picker element
  • npm i react-native-svg --save install the direct dependency of react native svg, since default icon is SVG and picker accepts the collection of SVG icons
  • cd ios got to iOS project folder
    • pod install install native packages inside iOS project folder necessary for SVG work like RNSVG from ../node_modules/react-native-svg

Configuration samples

Basic default UI

    styleIconText={{fontWeight: 'bold'}}

whereas in this example 5 default icons are used from the react-native-ring-picker plugin itself.

Basic Preview

Picker with custom icons with configurable ids and titles

    icons={[{id: "custom_id_1", title: "custom title 1"}, <PaymentCard id={"payments"}/>, "action_3", <Search title={"find"} color={"#F88DFF"}/>, "action_5"]}
    onPress={(iconId) => someExternalIdSelection(iconId)}
    styleIconText={{fontWeight: "bold"}}
    style={{flex: 0, marginTop: 0}}/>

where as in this example custom icons are sent into the picker. Picker accepts:

  • either strings, which value would be converted into ids and title
  • or objects with properties like id or title. If no id is passed - "default" will be used. If no title is passed id will be used.
  • or react elements, basically any element can be used but I suggest SVG ones.

Ring picker custom icons

Picker with 3 custom icons and 90 girth angle.

    icons={[<PaymentCard id={"payments"} title={"Your payments"}/>, {"id": "default", "title": "Default action"}, <Search title={"find"} color={"#F88DFF"}/>]}
    onPress={(iconId) => someExternalIdSelection(iconId)}

whereas in this example 3 custom icons are used:

  • uses custom id and title
  • {id, title} object uses custom id and title but default icon provided by the ring picker
  • uses custom title and the component name is used as an id by default (search)

Ring picker 3 custom icons

You can’t perform that action at this time.