# Guess the Number

## 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.](https://3124585617-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McJYvRoUkjwwpIItezp%2F-McgqNZVf3Rymr5cAdm3%2F-McgtEeHiahVfj7IFxAY%2FScreenshot%202021-06-21%20at%2010.14.41.png?alt=media\&token=d3b48f7b-e96b-4149-a2a6-009965454cbb)

## 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.

{% code title="components/Header.js" %}

```jsx
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
```

{% endcode %}

### StartGame Screen

Let's add a `Screen` component to our app. We'll name it `StartGameScreen`, within the `screens/` folder.

{% code title="screens/StartGameScreen.js" %}

```jsx
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
```

{% endcode %}

This is how our app looks as of now on both `iOS` and `android` devices:

![App with Header and StartGameScreen components.](https://3124585617-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McJYvRoUkjwwpIItezp%2F-Mch2PZ51Mo10VMYZkMo%2F-Mch302F_IQ2p7eHK3Kv%2FScreenshot%202021-06-21%20at%2011.04.13.png?alt=media\&token=0e1d8b6f-7761-48d4-87a1-54f6e3ee2b2d)

### 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:

{% tabs %}
{% tab title="Card" %}
{% code title="components/Card.js" %}

```jsx
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
```

{% endcode %}
{% endtab %}

{% tab title="StartGameScreen" %}
{% code title="screens/StartGameScreen.js" %}

```jsx
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
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 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.

{% code title="constants/colors.js" %}

```jsx
export default {
  primary: '#039dfc',
  accent: '#dc143c'
}
```

{% endcode %}

To use these color constants, we just need to import it as we do in our app, and use it as an object.

{% tabs %}
{% tab title="Header" %}
{% code title="components/Header.js" %}

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

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

{% endcode %}
{% endtab %}

{% tab title="StartGameScreen" %}
{% code title="screens/StartGameScreen.js" %}

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

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

{% endcode %}
{% endtab %}
{% endtabs %}

### 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!

{% tabs %}
{% tab title="Input" %}
{% code title="components/Input.js" %}

```jsx
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
```

{% endcode %}
{% endtab %}

{% tab title="StartGameScreen" %}
{% code title="screens/StartGameScreen.js" %}

```jsx
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'
   }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sydrawat.gitbook.io/react-native/fundamentals/guess-the-number.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.