🎲Guess the Number
Let's build a simple application to test our skills, shall we?
Idea
In this game, the user enters a number, and the computer has to guess the number entered by the user. They way this works is we provide hints to the computer whether the number it guessed is lower or higher than the number the user has entered. We will additionally show an alert
or a modal
to prevent the user from cheating as well, where one might provide a wrong hint to the computer. The final screen where the game gets over, will display the number of tries in which the computer guessed the number.
Wirefames

Components
Let's start by building the core components of the app!
Header
This is the Header
component for our app, inside the components/
folder.
import React from 'react'
import {StyleSheet, View, Text} from 'react-native'
const Header = (props) => {
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>
{props.title}
</Text>
</View>
)
}
const styles = StyleSheet.create({
header: {
width: '100%',
height: 90,
paddingTop: 36,
backgroundColor: '#039dfc',
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'white'
fontSize: 20
}
})
export default Header
StartGame Screen
Let's add a Screen
component to our app. We'll name it StartGameScreen
, within the screens/
folder.
import React from 'react'
import {StyleSheet, View, TextInput, Text, Button} from 'react-native'
const StartGameScreen = () => {
return (
<View style={styles.screen}>
<Text style={styles.title}>Start the Game!</Text>
<View style={styles.inputContainer}>
<Text>Enter a Number</Text>
<TextInput />
<View style={styles.buttonContainer}>
<Button title="Reset"/>
<Button title="Confirm"/>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 10,
alignItems: 'center'
},
title: {
fontSize: 20,
marginVertical: 10
},
inputContainer: {
width: 300,
maxWidth: '80%',
alignitems: 'center',
backgroundColor: 'white',
padding: 20,
borderRadius: 10
/* styles for iOS only */
shadowColor: 'black',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.26,
shadowRadius: 6
/* styles for android only */
elevation: 8
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
alignItems: 'center',
paddingHorizontal: 15
},
})
export default StartGameScreen
This is how our app looks as of now on both iOS
and android
devices:

Card
In the above component, we saw that we can add shadow to a component. It would be useful if we could use this as an independent component, which almost resembles like a Card
, which has it's own custom styles, and in which we can add on more styles as we like. Let's have a look how to do this:
import React from 'react'
import {StyleSheet, View} from 'react-native'
const Card = (props) => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
)
}
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {width: 0, height: 2},
shadowRadius: 6,
elevation: 8,
borderRadius: 10,
padding: 20,
backgroundColor: 'white'
}
})
export default Card
Color Theming w/ constants
Since we will be using a lot of custom colors in our app, it is easier to refer to them via constants, rather than copy-pasting the color code to the places where we need to use them. It is also useful if we have to change the color that we use at multiple places, where we would need to change the value only at one place, rather than updating it at all the places we use this value.
We can not only use this for colors, but also for general layout of our app, for example, having a constant for margin and padding, placement of View
in our app, etc, that makes our lives as developers, easier. But, here let us focus only on colors.
export default {
primary: '#039dfc',
accent: '#dc143c'
}
To use these color constants, we just need to import it as we do in our app, and use it as an object.
import Colors from '../constants/colors'
//...
const styles = StyleSheet.create({
//...
header: {
//...
backgroundColor: Colors.primary
}
})
Input
Let's create the Input
component, where we will enter the number which the computer has to guess. We will also "configure" the Input
component, meaning, we will provide the properties to the TextInput
component provided by react native via the parent component!
import React from 'react'
import {StyleSheet, TextInput} from 'react-native'
const Input = props => {
return (
<TextInput {...props} style={{...styles.input, ...props.style}}/>
)
}
const styles = StyleSheet.create({
input: {
height: 30,
borderBottomColor: 'grey',
borderBottomWidth: 1,
marginVertical: 10
}
})
export default Input
Last updated
Was this helpful?