0.4.0 • Published 1 year ago
react-native-slot-machine v0.4.0
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>
);
}
}