Create a Spin the Bottle game using React-Native

Last Updated : 24 Jul, 2024

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.

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:

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}>
					GeeksForGeeks
				</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:

Create a 2048 Game using React-Native

sainaveen_bhukya

Improve

Article Tags :

Create a Spin the Bottle game using React-Native

Prerequisites:

Approach to create Spin the Bottle Game:

Steps to Create React-Native Game:

Project Structure:

Similar Reads

Thank You!

What kind of Experience do you want to share?