🎲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

Guess the Number game basic wireframes.

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.

components/Header.js

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.

screens/StartGameScreen.js

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:

App with Header and StartGameScreen components.

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:

Card

components/Card.js

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

StartGameScreen

screens/StartGameScreen.js

import React from 'react'
import {StyleSheet, View, TextInput, Text, Button} from 'react-native'

import Card from '../components/Card'

const StartGameScreen = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Start the Game!</Text>
      <Card style={styles.inputContainer}>
        <Text>Enter a Number</Text>
        <TextInput />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button title="Reset"/>
          </View>
          <View style={styles.button}>
            <Button title="Confirm"/>
          </View>
        </View>
      </Card>
    </View>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },
  title: {
    fontSize: 20,
    marginVertical: 10
  },
  inputContainer: {
    width: 300,
    maxWidth: '80%',
    alignitems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    alignItems: 'center',
    paddingHorizontal: 15
  },
  button: {
    width: '40%'
  }
})

export default StartGameScreen

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.

constants/colors.js

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.

Header

components/Header.js

import Colors from '../constants/colors'
//...

const styles = StyleSheet.create({
  //...
  header: {
    //...
    backgroundColor: Colors.primary
  }
})

StartGameScreen

screens/StartGameScreen.js

import Colors from '../constants/colors'
//...

<Button title="Confirm" color={Colors.primary} />
<Button title="Reset" color={Colors.accent} />

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!

Input

components/Input.js

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

StartGameScreen

screens/StartGameScreen.js

import Input from '../components/Input'
//...
<View>
  <Input
    blurOnSubmit
    keyboardType="number-pad"
    autoCapitalize="none"
    autoCorrect={false}
    maxLength={2}
    style={styles.input}
  />
</View>

//...

const styles = StyleSheet.create({
   //...
   input: {
     width: 50,
     textAlign: 'center'
   }
})