React Native Odometer

Odometer for React Native, supports numbers, localization and strings.

Features

• Animations with react-native-reanimated.
• Custom animation duration via duration prop.
• Automatically measures all widths and heights of items and adjusts accordingly.
• Supply a children element with the number or string.
• Numbers can be formatted to custom locale via locale prop.
• Uses tabular-nums fontVariant to avoid layout shifting.

Install

npm i react-native-odometer

If your React runtime does not support Intl but you want to use number localization, also install the polyfill or switch runtime.

npm i number-to-locale-string-polyfill

Example

import Odometer from "react-native-odometer";

Simple Odometer

<Odometer>12345.44</Odometer>

Odometer with Localization

<Odometer locale="en-IN">12345.44</Odometer>

Custom Odometer

const currencies = ["$", "₹", "€"];
 
const App = () => {
  const [state, setState] = useState({
      currency: currencies[0],
      value: 0
    });
 
  useEffect(() => {
    setInterval(() => {
      setState({
        currency: currencies[Math.floor(Math.random() * 3)],
        value: Math.floor(Math.random() * 1000000)
      });
    }, 500);
  }, []);
 
  return (
    <View>
      <Odometer>
        <Odometer.Fragment rotateItems={currencies}>{state.currency}</Odometer.Fragment>
        {state.value}
      </Odometer>
    </View>
  );
};

Props

Prop	Required	Default	Description
children	Yes	-	The Odometer number/text to render.
duration	No	500ms	Animation Duration
textStyle	No	-	Additional Styling for Text
textProps	No	-	Additional Props for Text
rotateItems	No	-	Only for Fragment. Possible characters for Odometer custom.
locale	No	""	Localization identifier for numbers. Eg: "en-US", "en", "en-IN"

Thanks

React Native Odometer is based on react-native-ticker.