Skip to content
Native Animation

React Native Value Selectors

React Native value selectors for sliders, circular dials, counters, and wheel pickers. Compare input patterns and choose an Expo component by task.

Loading animations…

Searching in Value Selectors · Search all animations

Popular patterns

20 animations

About this collection

Value selectors share a visual idea but solve different input problems. A wheel picker selects a named option, a ruler selects a physical measurement, a thermostat dial sets a temperature, and a stepper makes precise bounded adjustments. Begin with the data model: discrete labels, units, range, and step size. Then decide whether people need to see adjacent choices, drag across a range, or change one step at a time. Keep the committed value in application state and use animation to explain the change. Read each piece’s API and compatibility section before integrating it; a web preview does not verify native gestures or assistive technology on a device.

Choose a value selector by task

A category, a measurement, and a numeric adjustment need different controls. Choose the value model before the visual material.

Choose from named options · Wheel Picker
Measured label centers handle uneven text widths; momentum settles on one discrete option.
Enter a physical measurement · Measure Ruler Picker
A ruler with snapping and unit switching makes neighboring measurements visible around the selected value.
Adjust a temperature target · Thermostat Dial
A circular dial connects degree selection to an arc and rolling temperature in a climate-control layout.
Adjust continuous levels · Gooey Merge Slider
A liquid thumb and track visualize channel levels; choose it for a bounded slider rather than named options or physical measurements.
Make precise one-step adjustments · Rolling Temperature Stepper
Increase and decrease controls change a bounded value, with rolling digits instead of a drag surface.
Set a cart quantity · Quantity Stepper
An Add action expands into a compact quantity control and returns to its initial state at zero.
Choose a rating · Drag Star Rating
A bounded star scale communicates a qualitative score rather than a physical unit or arbitrary number.

Related guides

More collections