What is Create a Spin the Bottle game using React-Native?

In this article, we will learn Create a Spin the Bottle game using React-Native,This free React tutorial for complete beginners will help you learn React from scratch.

Create a Spin the Bottle game using React-Native

Create a Book Store using React-Native

React-Native is an open-source framework used to develop cross-platform applications i.e., you can write code in React-Native and publish it as an Android or IOS app. In this article, we will build a basic Spin the Bottle game in React-Native. This is a multi-player game. Usually, people sit in a round with a bottle at the center. When the bottle stops spinning, the turn goes to the person at whom the bottle’s tip stops.

Preview of final output: Let us have a look at how the final application will look like.

Spin the Bottle

Prerequisites:

Approach to create Spin the Bottle Game:

The game screen will display a bottle and a SPIN button. The bottle will start spinning when the SPIN button is clicked. The bottle will stop at a random position to indicate the turn of a person. The random position can be set using the Math.random() function. The spinning animation can be set using the Animated module of React-Native. The Spin the Bottle game can be used to play the famous games like Truth or Dare, Pictionary, Two Truths and a Lie etc.

Steps to Create React-Native Game:

Step 1: Create a React Native app by using this command:

npx create-expo-app SpinBottleGame

Step 2: Navigate to our project through this command:

cd SpinBottleGame

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0"
}

Example: Write the code in respective files

App.js: This file imports all the necessary components and renders them
SpinBottle.js: This file defines how the components will be displayed on screen
styles.js: This file contains the styles to display on the screen.

Javascript

// App.js
import React from 'react';
import SpinBottle from './SpinBottle';
 
export default function App() {
    return (
        <SpinBottle />
    );
}

Javascript

// SpinBottle.js
import React,
{ useRef } from 'react';
import {
    View, Pressable,
    Text, Animated, Easing
} from 'react-native';
import { styles } from './styles';
 
const generateRandomDecimal =
    () => {
        const randomNumber = Math.random();
        return parseFloat(randomNumber.toFixed(2));
    };
 
 
const SpinBottle =
    () => {
        const spinValue =
            useRef(new Animated.Value(0)).current;
        const isSpinning = useRef(false);
 
        const startSpinAnimation =
            () => {
                if (!isSpinning.current) {
                    isSpinning.current = true;
                    spinValue.setValue(0);
                    Animated.timing(spinValue, {
                        toValue: 10 + generateRandomDecimal(),
                        duration: 2000,
                        easing: Easing.bezier(0.16, 1, 0.3, 1),
                        useNativeDriver: false,
                    }).start(() => {
                        // Animation completed
                        isSpinning.current = false;
                        // Add any additional logic you want to run after spinning stops
                    });
                }
            };
 
        const spin =
            spinValue.interpolate({
                inputRange: [0, 1],
                outputRange: ['0deg', '360deg'],
            });
 
        return (
            <View style={styles.container}>
                <Text style={styles.geekText}>
                    w3wiki
                </Text>
                <Animated.View style=
                    {
                        [styles.bottle,
                        {
                            transform: [{ rotate: spin }]
                        }]}>
                    <View style={styles.rectangle3}></View>
                    <View style={styles.rectangle2}></View>
                    <View style={styles.rectangle1}></View>
                </Animated.View>
                <Pressable
                    style={({ pressed }) => [
                        styles.spinButton,
                        {
                            backgroundColor:
                                pressed ? '#0F9D58' : '#14EF37',
                        },
                    ]} onPress={startSpinAnimation}>
                    <Text style={styles.spinButtonText}>
                        SPIN
                    </Text>
                </Pressable>
            </View>
        );
    };
 
export default SpinBottle;

Javascript

// styles.js
import { StyleSheet } from 'react-native';
 
export const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    geekText: {
        marginBottom: '10%',
        fontSize: 25,
        color: '#228B22',
        fontWeight: 'bold',
    },
    bottle: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    rectangle3: {
        width: 30,
        height: 14,
        backgroundColor: '#43E71A',
    },
    rectangle2: {
        width: 100,
        height: 106,
        backgroundColor: '#B4F6A3',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        overflow: 'hidden',
    },
    rectangle1: {
        width: 100,
        height: 157,
        backgroundColor: '#A2F74D',
    },
    spinButton: {
        alignItems: 'center',
        marginTop: '20%',
        borderRadius: 5,
        paddingTop: 6,
        paddingBottom: 6,
        paddingLeft: 15,
        paddingRight: 15,
    },
    spinButtonText: {
        fontSize: 18,
        color: 'white',
        userSelect: 'none',
    },
});

Step to run the App:

To run on Android:

npx react-native run-android

To run on Ios:

npx react-native run-ios

Output:

Spin the Bottle

Tags:

#Geeks Premier League 2023 #React-Native #Geeks Premier League #Project #ReactJS #Web Technologies

Create a Book Store using React-Native