Create a Spin the Bottle game using React-Native
Last Updated :
27 May, 2025
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.
Playground
Note: This Section is to interact with the app which you are going to build.
Prerequisites
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-name
Project Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo start
Then, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app .
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
- 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.
Let's dive into the code in detail.
- Import libraries:
Import required libraries at the top of the file.
JavaScript
// Import required hooks and components from React and React Native
import { useRef } from 'react';
import {
View,
Pressable,
Text,
Animated,
Easing,
StyleSheet,
} from 'react-native';
- StyleSheet:
Create a StyleSheet to style components like container, geekText, bottle, etc.
JavaScript
// Styles for the components
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', // Top part of the bottle
},
rectangle2: {
width: 100,
height: 106,
backgroundColor: '#B4F6A3', // Neck of the bottle
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
overflow: 'hidden',
},
rectangle1: {
width: 100,
height: 157,
backgroundColor: '#A2F74D', // Body of the bottle
},
spinButton: {
alignItems: 'center',
marginTop: '20%',
borderRadius: 5,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 15,
paddingRight: 15,
},
spinButtonText: {
fontSize: 18,
color: 'white',
userSelect: 'none', // Prevents accidental text selection on desktop
},
});
- Title Text:
This title explains what the app does. We use the text "Spin the bottle" to show that the app is to play the Spin the bottle Game.
JavaScript
{/* Title Text */}
<Text style={styles.geekText}>Spin the bottle</Text>
This button is used to call startSpinAnimation and the function contains the game logic to spin the bottle.
JavaScript
// Animated value that controls the rotation
const spinValue = useRef(new Animated.Value(0)).current;
// Ref to prevent multiple spins at the same time
const isSpinning = useRef(false);
// Function to start the spin animation
const startSpinAnimation = () => {
if (!isSpinning.current) {
isSpinning.current = true;
spinValue.setValue(0); // Reset the spin value before starting
Animated.timing(spinValue, {
// Randomize spin by adding a decimal to 10 full rotations
toValue: 10 + generateRandomDecimal(),
duration: 2000, // Duration of animation in milliseconds
easing: Easing.bezier(0.16, 1, 0.3, 1), // Smooth acceleration/deceleration
useNativeDriver: false, // Not using native driver as rotation is in degrees
}).start(() => {
isSpinning.current = false; // Mark as not spinning when animation completes
// Optional: Add logic here after spinning ends
});
}
};
{/* Spin Button */}
<Pressable
style={({ pressed }) => [
styles.spinButton,
{
backgroundColor: pressed ? '#0F9D58' : '#14EF37', // Button press feedback
},
]}
onPress={startSpinAnimation}>
<Text style={styles.spinButtonText}>SPIN</Text>
</Pressable>
- Display Bottle:
Below code is used to display the bottle which is spinning.
JavaScript
// Interpolating the animated value to degrees for rotation
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'], // One full rotation
});
{/* Animated bottle built using nested Views */}
<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>
Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.
Complete Source Code
App.js:
App.js
// Import required hooks and components from React and React Native
import { useRef } from 'react';
import {
View,
Pressable,
Text,
Animated,
Easing,
StyleSheet,
} from 'react-native';
// Function to generate a random decimal between 0.00 and 1.00
const generateRandomDecimal = () => {
const randomNumber = Math.random();
return parseFloat(randomNumber.toFixed(2));
};
// Main component that implements the spinning bottle animation
const SpinBottle = () => {
// Animated value that controls the rotation
const spinValue = useRef(new Animated.Value(0)).current;
// Ref to prevent multiple spins at the same time
const isSpinning = useRef(false);
// Function to start the spin animation
const startSpinAnimation = () => {
if (!isSpinning.current) {
isSpinning.current = true;
spinValue.setValue(0); // Reset the spin value before starting
Animated.timing(spinValue, {
// Randomize spin by adding a decimal to 10 full rotations
toValue: 10 + generateRandomDecimal(),
duration: 2000, // Duration of animation in milliseconds
easing: Easing.bezier(0.16, 1, 0.3, 1), // Smooth acceleration/deceleration
useNativeDriver: false, // Not using native driver as rotation is in degrees
}).start(() => {
isSpinning.current = false; // Mark as not spinning when animation completes
// Optional: Add logic here after spinning ends
});
}
};
// Interpolating the animated value to degrees for rotation
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'], // One full rotation
});
return (
<View style={styles.container}>
{/* Title Text */}
<Text style={styles.geekText}>Spin the bottle</Text>
{/* Animated bottle built using nested Views */}
<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>
{/* Spin Button */}
<Pressable
style={({ pressed }) => [
styles.spinButton,
{
backgroundColor: pressed ? '#0F9D58' : '#14EF37', // Button press feedback
},
]}
onPress={startSpinAnimation}>
<Text style={styles.spinButtonText}>SPIN</Text>
</Pressable>
</View>
);
};
// App root component rendering the SpinBottle
export default function App() {
return <SpinBottle />;
}
// Styles for the components
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', // Top part of the bottle
},
rectangle2: {
width: 100,
height: 106,
backgroundColor: '#B4F6A3', // Neck of the bottle
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
overflow: 'hidden',
},
rectangle1: {
width: 100,
height: 157,
backgroundColor: '#A2F74D', // Body of the bottle
},
spinButton: {
alignItems: 'center',
marginTop: '20%',
borderRadius: 5,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 15,
paddingRight: 15,
},
spinButtonText: {
fontSize: 18,
color: 'white',
userSelect: 'none', // Prevents accidental text selection on desktop
},
});
Output:
Similar Reads
Create a Book Store using React-Native React-Native is a flexible frameworks for building mobile applications. We will develop a Book Store application, which allows users to search for a specific book, and store the book in the application. If the user wants to remove the book from the stored list, they can easily remove it by navigatin
6 min read
Create a Resume Builder using React-Native A resume is like a personal marketing document that shows off your skills, work history, and achievements to a potential employer. Resume builder apps help you create this document more easily. In this article, we are going to implement a resume builder app using React Native. To give you a better i
6 min read
Create a 2048 Game using React-Native In this article, we are going to implement a 2048 Game using React Native. The 2048 game is a popular sliding puzzle game that involves combining tiles with the same number to reach the tile with the number 2048. Players can move the tiles in four directions: up, down, left, or right.PrerequisiteRea
7 min read
Create a Tic-Tac-Toe using React-Native In this article, we will learn how to build a Tic-Tac-Toe game using React-Native. React Native enables the application to run a single code base on multiple platforms like Android, IOS, etc. Developing the TicTacToe game application allows us to learn basic styling, app logic, user interaction, and
4 min read
Create an Image Carousal using React-Native In this article, we will build the Image Carousal using React Native language. In this interactive application, we have taken some sample GFG course images which are automatically and manually scrolled. When the user clicks on the image, the additional information about that course is shown in a mod
5 min read