Skip to content

Latest commit

 

History

History
76 lines (65 loc) · 3.92 KB

README.md

File metadata and controls

76 lines (65 loc) · 3.92 KB
Raw

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