react-native-odometer v1.0.4

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

Thanks

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