I want to render random objects from table in React Native. I use React Native EasyGrid for my table. I try to build a memory game in React Native. I need this code for shuffle cards.
This is the code that I make for test all functions. They want me to give more informations, but I don't have more.
The code:
import React from 'react'
import { StyleSheet, View, TextInput, Button, Text, TouchableOpacity, FlatList, ActivityIndicator,} from 'react-native'
import { Col, Row, Grid } from "react-native-easy-grid";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: "red",
card: "this.refs.card",
cards: "[...card]"
}
}
_code to randomized (Like shuffle(array) in JS, but not this function !) {
// I need the code here
}
componentDidMount() {
this.setState({cards: this._shuffle(this.state.cards)});
}
_test = () => {
this.setState({color: this.state.color === "red" ? "blue" : "red"});
}
render() {
return (
<View style={styles.container}>
<Grid ref="deck">
<Col>
<Row>
<TouchableOpacity ref="card" onPress={this._test}>
<Text style={{ height: 15 }}>1</Text>
</TouchableOpacity>
</Row>
<Row>
<TouchableOpacity ref="card" onPress={this._test}>
<Text style={{ height: 15 }}>2</Text>
</TouchableOpacity>
</Row>
<Row>
<TouchableOpacity ref="card" onPress={this._test}>
<Text style={{ height: 15 }}>3</Text>
</TouchableOpacity>
</Row>
<Row>
<TouchableOpacity ref="card" onPress={this._test}>
<Text style={{ height: 15 }}>4</Text>
</TouchableOpacity>
</Row>
</Col>
</Grid>
<View><Text style={{color: this.state.color}}>XXX</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Can somebody help me please ?