React Native Number Ticker
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add code Jan 20, 2018
.npmignore Add in stuff Jan 20, 2018
README.md Update README.md (#9) Aug 10, 2018
examples.gif Add in stuff Jan 20, 2018
index.js Bug Fix for iPhone X (#11) Nov 13, 2018
package.json 2.2.0 Nov 13, 2018
yarn.lock

README.md

React Native Ticker

Create rotating animations.

Can work with any number as well as other symbols like $,.-, etc.

It is recommended to use a monospaced font, to avoid having chars of different with and weird visual effects (see)

yarn add react-native-ticker
npm install react-native-ticker
import Ticker from "react-native-ticker";

// As a text prop
<Ticker text={"1235.44"} textStyle={styles.text} rotateTime={250} />;

// Or as a child
<Ticker textStyle={styles.text} rotateTime={250}>
  12345.44
</Ticker>

Supply a textStyle, as well as text. rotateTime is optional and defaults to 250ms.

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

import Ticker, { Tick } from "react-native-ticker";
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#333",
  },
  text: {
    fontSize: 40,
    color: "#FFF",
  },
});

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

const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const currencies = ["$", "¥", ""];

export default class App extends Component {
  state = {
    currency: "$",
    value: "123",
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        currency: currencies[getRandom(0, 2)],
        value: getRandom(0, 1000) + "",
      });
    }, 500);
  }

  render() {
    return (
      <View style={styles.container}>
        <Ticker textStyle={styles.text}>
          <Tick rotateItems={currencies}>{this.state.currency}</Tick>
          {this.state.value.split("").map((char, i) => {
            return (
              <Tick key={i} rotateItems={numbers}>
                {char}
              </Tick>
            );
          })}
          !!!
        </Ticker>
      </View>
    );
  }
}

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