React Native Ticker

Create rotating animations of any number, or character.

Changes from v2 to v3

- Rebuilt with react-native-reanimated.
- Rebuilt with TypeScript.
- The rotateTime is now called duration.
- Now it measures all widths and heights of items and adjusts accordingly!
- Supply a children element with the value, we no longer support text prop.

Install

``
yarn add react-native-ticker
npm install react-native-ticker
`

Install react-native-reanimated.

`
yarn add react-native-reanimated
npm install react-native-reanimated
`

As of V3 we only support the children prop now.

`js
import Ticker from "react-native-ticker";


12345.44
;
`

Supply a textStyle, and duration is optional and defaults to 250ms.

If you need more than just numbers you can build and supply your own rotations.

`js
import React, { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";

import Ticker, { Tick } from "./ticker2";

function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}

const currencies = ["$", "¥", "€"];

const App = () => {
const [state, setState] = useState({
currency: currencies[getRandom(0, 2)],
value: getRandom(0, 100000)
});

useEffect(() => {
setInterval(() => {
setState({
currency: currencies[getRandom(0, 2)],
value: getRandom(0, 100000)
});
}, 500);
}, []);

return (


{state.currency}
{state.value.toLocaleString()}


);
};

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#333"
},
text: {
fontSize: 40,
color: "#FFF"
}
});

export default App;
`

You must render a Ticker and subsequently at least one Tick`. If it is text then it will simply be rendered.