2 Program to create Dice Roller App in React-Native ~ Coding Atharva

App.js:
import React, {
  useState
} from 'react'
import {
  Text,
  View,
  Image,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  Pressable,
  ScrollView
} from 'react-native'

import DiceOne from './assets/dice1.png'
import DiceTwo from './assets/dice2.png'
import DiceThree from './assets/dice3.png'
import DiceFour from './assets/dice4.png'
import DiceFive from './assets/dice5.png'
import DiceSix from './assets/dice6.png'

const App = () => {
  const [uri1, setUri1] = useState(DiceOne);
  const [uri2, setUri2] = useState(DiceOne);
  const [uri3, setUri3] = useState(DiceOne);
  const [uri4, setUri4] = useState(DiceOne);


  function apply(i,diceNo){
    if(i==0){
      setUri1(diceNo);
    }else if(i==1){
      setUri2(diceNo);
    }else if(i==2){
      setUri3(diceNo);
    }else if(i==3){
      setUri4(diceNo);
    }
  }

  const playButtonTapped = () => {
    for(let i=0;i<4;i++)
    {
      let randomNumber = Math.floor(Math.random() * 6) + 1;
     
      switch (randomNumber) {
        case 1:
          apply(i,DiceOne);
          break;
        case 2:
         setUri1(DiceTwo);
          break;
        case 3:
          apply(i,DiceThree);
          break;
        case 4:
         apply(i,DiceFour);
          break;
        case 5:
          apply(i,DiceFive);
          break;
        case 6:
          apply(i,DiceSix);
          break;
  
        default:
         apply(i,DiceOne);
      }
    }
    

  }
  return(
    <>
     <StatusBar backgroundColor="#222831"/>

      <ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center',alignItems:'center'}} style={styles.container}>
      <Text style={styles.gamePlayButton}> Dice Roller App For 4 Players </Text>

        <Pressable onPress={playButtonTapped}> 
          <Text style={styles.gamePlayButton}> Player 1 </Text>
          <Image style={styles.image} source={uri1} />

          <Text style={styles.gamePlayButton}> Player 2 </Text>
          <Image style={styles.image} source={uri2} />
          
          <Text style={styles.gamePlayButton}> Player 3 </Text>
          <Image style={styles.image} source={uri3} />
          
          <Text style={styles.gamePlayButton}> Player 4 </Text>
          <Image style={styles.image} source={uri4} />
          
        </Pressable>
      </ScrollView>
    </>
  );


}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#222831",
  },
  image: {
    width: 200,
    height: 200,
  },
  gamePlayButton: {
    fontSize: 20,
    marginTop: 30,
    color: "#F2A365",
    paddingHorizontal: 40,
    paddingVertical: 10,
    borderColor: "#30475E",
    borderRadius: 5,
    borderWidth: 3,
    fontWeight: "bold",
  }
});
Output:
2 Program to create Dice Roller App in React-Native

Related Post
