atlanteh/react-native-slot-machine

Text slot machine for react-native

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

react-native-slot-machine's Issues

respin the slot machine

not an issue really .
But is there any way to re spin the slot machine ? I have tried to call
startIntitalAnimation(); but if it spins it is very slow.
please help thanks.

Display images instead of Text or numbers

Hello
Would there be a way to have images or icons being displayed instead of characters or numbers?
Thank you
Fabrice

Spinning Speed

Thanks for your great component.

How to adjust the spinning speed ?
When I add the duration, the spinning become slower.
I expect high speed spinning like real machine.

And defaultChar props doesnt work for me.
default value is 0.
I wanna change it to 8.
expected result is 4 digits number.

Highly appreciated for your answer. Thanks

Slot Machine reels flickers when using an image

The reels in the slot machine flickers whenever I use an image for the reels instead of a plain text. The flicker happens every time after the slot machine finishes spinning. Is there a way to fix this problem?

can this be configured to be progressive jackpot?

instead of random jackpot. Can this be configured to be progessive?

Like I got the number 1,234 the next number will be 1,235 the next one will be 1,235

possible?

Can we use a word instead of single letter or single number?

Hi,

Thanks for the great component.
Can we use a word or string value as an option. like 'hi', 'hello', 'bye' and these three values spin?

How to dynamically change a text value?

A way to add more than 10 elements to range if using an array of words/emoji

Maybe it is already possible, but I can't find a way to do it.

When you use an array of words or emojis with length>10 (example: ['this', 'is', 'an', 'example', 'of', 'an', 'array', 'of', 'more', 'than', 'ten', 'words']), the maximum writable range is "0123456789", so the slot can't spin more than the first 10 elements in the array.
Is there a way to make it spin all of the elements in the array?

Btw thanks for the package!

Warning: componentWillReceiveProps has been renamed

Getting this warning message when using the Expo app on Android:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Performance Issue

I tried having around 3-4 slot machine components and its very laggy. Is there a way that this can be fixed?

Custom Styling

Hi, this might be a very stupid question but I can't seem to get the override styling to work? Anyone have any examples for overriding let's say the innerBorder?

Infinite Option

Hi, thanks for your great component.

Is there any Infinite Option for this component ?
I want the slot machine to continue sniping until call spinTo function.

If there is no Option how can I achieve this functionality ?

Slot machine 9th column value goes only 2-8 range

When I give dynamically numbers one by one then the last column of my slot machine works only for 2-8 range .
I was take 0-9 range and total 9 column.
But it I see not working for 9 th column.
Others columns works absolutely fine.
Please help me for this issue.