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

Play it live on expo → https://snack.expo.dev/@atlanteh/react-native-slot-machine

import {useState, useEffect, useRef} from 'react';
import { Text, View } from 'react-native';
import SlotMachine from 'react-native-slot-machine';

export default function App () {
    const [slotSettings, setSlotSettings] = useState({duration: 4000, slot1: 1234, slot2: 'hello', slot3: '2351'});
    const slotRef = useRef(null);
    useEffect(() => {
      setTimeout(() => setSlotSettings({duration: 1000, slot1: '4321', slot2: 'world', slot3: '1234'}), 5000);
      setTimeout(() => setSlotSettings({duration: 4000, slot1: '1234', slot2: 'hello', slot3: '2351'}), 7000);
      setTimeout(() => slotRef.current.spinTo('prize'), 12000);
    }, []);

    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={slotSettings.slot1} duration={slotSettings.duration} />
                <SlotMachine
                    text={slotSettings.slot2}
                    range="abcdefghijklmnopqrstuvwxyz"
                    width={45} duration={slotSettings.duration}
                    ref={slotRef}
                />
                <SlotMachine text={slotSettings.slot3} range="012345" renderContent={c => <Text style={{fontSize: 25}}>{symbols[c]}</Text>} duration={slotSettings.duration} />
            </View>
        </View>
    );
}