react-native-slot-machine

Text slot machine for react-native is an easy and fully customizable Slot Machine for React Native app.

Usage

<View>
    <SlotMachine text={1234} />
    <SlotMachine text="hello" range="abcdefghijklmnopqrstuvwxyz" />
</View>

Props

The following props can be used to modify the slot machine's style and/or behaviour:

| Prop | Type | Opt/Required | Default | Note | |---|---|---|---|---| |text|String|Number|Required|0| The text the slot machine animates to. |width|Number|Optional|37| The width of each slot. |height|Number|Optional|50| The height of each slot. |padding|Number|Optional|4|minimum number of slots. Added slots will be filled with 'defaultChar' |duration|Number|Optional|2000|The total time of the animation of all the slots. |delay|Number|Optional|4|Time to wait since componentDidMount until animation begins. |slotInterval|Number|Optional|500|The added animation time per slot. last slot animation time = 'duration'. |defaultChar|Number|Optional|0|The default character to be used until animation starts & with 'padding' |range|String|Optional|9876543210|The range of characters to be used when animating the slot machine. |initialAnimation|Boolean|Optional|true|Should initial animation be activated or only subsequent text changes animations |renderTextContent|Function|Optional|(char, index, range) => char|Allows replacing the inner content of the Text element |renderContent|Function|Optional|(char, index, range) => char|Allows replacing the entire Text element with your own implementation |styles|Object|Optional|{}|Allows overriding each of the inner components (container, slotWrapper, slotInner, innerBorder, outerBorder, overlay, text) |useNativeDriver|Boolean|Optional|false|Enable use of NativeDriver on Animation. See https://facebook.github.io/react-native/docs/animations.html#using-the-native-driver

Methods

spinTo(text)

Spins the slot machine from current position to the specified text position.

Advanced Example

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {duration: 4000, slot1: 1234, slot2: 'hello', slot3: '2351'};
    }

    componentDidMount() {
        setTimeout(() => this.setState({duration: 1000, slot1: '4321', slot2: 'world', slot3: '1234'}), 5000);
        setTimeout(() => this.setState({duration: 4000, slot1: '1234', slot2: 'hello', slot3: '2351'}), 7000);
        setTimeout(() => this.refs.slot.spinTo('prize'), 12000);
    }
    render() {
        const symbols = ['🍏', '🍎', '🍐', '🍊', '🍋', '🍌']; // can't use emojies in SlotMachine because some of them are comprised of 2 chars
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <View style={{height: 200, justifyContent: 'space-between', alignItems: 'center'}}>
                    <SlotMachine text={this.state.slot1} duration={this.state.duration} />
                    <SlotMachine
                        text={this.state.slot2}
                        range="abcdefghijklmnopqrstuvwxyz"
                        width={45} duration={this.state.duration}
                        ref="slot"
                    />
                    <SlotMachine text={this.state.slot3} range="012345" renderContent={c => <Text style={{fontSize: 25}}>{symbols[c]}</Text>} duration={this.state.duration} />
                </View>
            </View>
        );
    }
}