Text slot machine for react-native
Switch branches/tags
Nothing to show
Clone or download
Latest commit 69d4cad Jul 5, 2018
Permalink
Failed to load latest commit information.
.gitignore allow overriding content Sep 16, 2017
LICENSE Initial commit Feb 4, 2017
README.md Changes requested by PR Jun 29, 2018
index.js convert tab to space Jul 5, 2018
package.json Release 0.3.2 Jul 5, 2018

README.md

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>
        );
    }
}