126
GitHub - browniefed/react-native-ticker: React Native Number Ticker
source link: https://github.com/browniefed/react-native-ticker
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 calledduration
. - Now it measures all widths and heights of items and adjusts accordingly!
- Supply a
children
element with the value, we no longer supporttext
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.
import Ticker from "react-native-ticker";
<Ticker textStyle={styles.text} duration={250}>
12345.44
</Ticker>;
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.
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 (
<View style={styles.container}>
<Ticker textStyle={styles.text}>
<Tick rotateItems={currencies}>{state.currency}</Tick>
{state.value.toLocaleString()}
</Ticker>
</View>
);
};
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK