React Native Plant App UI #5 : Terms of Service Modal
Tags: react, reactnative, reactnativeplanta, reactnativetemplate
Published: 2019-11-14 12:40:06

---
title: React Native Plant App UI #5 : Terms of Service Modal
published: true
date: 2019-11-14 00:31:07 UTC
tags: React,React native,React Native Plant A,React native template
canonical_url: https://kriss.io/react-native-plant-app-ui-5-terms-of-service-modal/
cover_image: https://kriss.io/wp-content/uploads/2019/11/React-Native-plant-App-UI-1-1.png
---

This tutorial is the fifth part of our React Native Plant App tutorial series. In the [previous part](https://kriss.io/react-native-plant-app-ui-4-illustration-slider-and-animated-steps/), we successfully implemented the Illustrations section with the image slider and Steps section with animated Delimiter dots. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project.

As mentioned in the previous parts, the inspiration to work on this tutorial series came from [React Native App Templates](https://www.instamobile.io/) that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this fifth part is also the continuation of coding implementations and designs from the Youtube video tutorial by [React UI Kit](https://www.youtube.com/watch?v=gyiwFcrVRCM&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=2)for the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.

### Overview

In this fifth part of this tutorial series, we are going to implement the **Terms of Service(TOS) section** in the form of a Modal view. This TOS section will contain the terms and services of the app as in the actual app. The implementation of this section will also complete our overall implementation of the Welcome screen. The idea is to start by implementing the Modal view when clicking the ‘Terms of service’ button at the bottom of the welcome screen. Then, we will add the content inside the modal view and make it scrollable as well. Then, we will implement the button to close the modal as well as configure the closing of the modal through the device back button.

_So, let us begin!!_    

 

## Implementing the TOS section

Here, we are going to implement the TOS section in our Welcome screen. This is the last UI section in our Welcome screen which will appear in the form of Modal. We have already added the ‘Terms of Services’ button at the bottom of the Welcome screen. So, when we click on that button, the Modal showing all the Terms of Services should appear. But first, we need to import the `Modal` component from the react-native package as shown in the code snippet below:

```javascript
import { StyleSheet, FlatList, Image, Dimensions, Animated, Modal } from 'react-native';
```

Then, we need to define the state variable called `showTerms` in order to handle the opening and closing of our `Modal`. The initialization of the state variable is shown in the code snippet below:

```javascript
state = {
    showTerms : false,
  }
```

 

### Defining a Separate Function

Now, as we have separated out different UI sections of the Welcome screen as a function. We are going to implement this TOS section in the function as well. The function will return the template for the `Modal` component. The function is called `renderTermServices()` and its implementation is provided in the code snippet below:

```javascript
renderTermsServices(){
    return(
      <Modal  animationType="slide" visible={this.state.showTerms}>
        <Text>Modal</Text>
      </Modal>
    )
  }
```

Here, the `renderTermsServices()` function returns the `Modal` component. The `Modal` component wraps the `Text` component. The `Modal` component is configured with some props. the `animationType` prop is set to slide so that there is the sliding effect while opening and closing modal. And the `visible` prop handles the opening and closing of the modal on the basis of `showTerms` boolean value.

Now, we need to change the state of `showTerms` variable to true show that the modal opens. We are going to do that in the Terms of service button of the Welcome screen available in the `render()` function:

```javascript
 <Block middle flex={0.5} margin={[0, theme.sizes.padding * 2]}>
    <Button gradient onPress={() => this.props.navigation.navigate('Login')}>
      <Text center semibold white>Login</Text>
    </Button>
    <Button shadow onPress={() => this.props.navigation.navigate('SignUp')}>
      <Text center semibold>Signup</Text>
    </Button>
    <Button onPress={() => this.setState({ showTerms: true })}>
      <Text center caption gray>Terms of service</Text>
    </Button>
  </Block>
  {this.renderTermsServices()}
</Block>
```

Here, in the `onPress` event of the `Button` component representing Terms of service, we have changed the state of the `showTerms` variable to true. Then, we have also called the `renderTermsServices()` function below the `Block` wrapping the `Button` components.

Hence, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-1-1.gif)

As we can see, when we clock the Terms of service button, the modal appears sliding from the bottom. But the modal view has nothing except a text.

So now, we are going to add the content to our Modal view.

 

### Adding Content to Modal

Here, we are going to add the Modal content header as well as the contents. The content we are going to add will represent the Terms of service from the actual all. Altogether there are ten terms that will be displayed in the Modal view. Hence, in order to add the content to the Modal, we need to use the code from the following code snippet:

```javascript
<Modal  animationType="slide" visible={this.state.showTerms}>
  <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
    <Text h2 light>Terms of Service</Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        2. Support for Expo services is only available in English, via e-mail.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
      </Text>
      <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
      </Text>
  </Block>
</Modal>
```

Here, the `Modal` component wraps a `Block` component with styling props. Then, the `Block` component wraps a bunch of `Text` components which is used to display the Modal content header as well as ten terms as points. All the `Text` components have the same styling props except the one which encloses the header text. 

_Note that these `Block` and `Text` components are from our predefined custom components; not from the react-native package._

Hence, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-2-1.gif)

As we can see, we have got the TOS section header as well as the list of terms while opening the modal. But, we cannot view all the terms of the list because they are not scrollable. Due to this, we can only view the portion of the terms list which the app screen can accommodate.

Now, we need to be able to scroll the list in order to view all the points on the list.

 

### Making Terms List Scrollable

Here, we are going to make the terms list that we added in our previous step scrollable. For that, we need to wrap all the `Text` component representing the terms list inside the `ScrollView` component. The overall implementation is provided in the code snippet below:

```javascript
 <Modal  animationType="slide" visible={this.state.showTerms}>
    <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
      <Text h2 light>Terms of Service</Text>
      <ScrollView style={{ marginVertical: theme.sizes.padding }}>
....................................
      ............................
      </ScrollView>
    </Block>
  </Modal>
```

Here, we have added the `ScrollView` component wrapping all the `Text` components representing the Terms list. The `ScrollView` component is also configured with some inline styles.

Hence, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-3-1.gif)

As we can see, our Terms List in the `Modal` component is now scrollable. 

### Adding Button to Modal

Here, we are going to add a button to the Modal which can be used to close the modal. The button will be placed at the bottom of the Modal. For that, we need to use the code from the following code snippet in the `renderTermsServices()` function:

```javascript
<Modal  animationType="slide" visible={this.state.showTerms}>
      <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
        <Text h2 light>Terms of Service</Text>
        <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        ....................................
        .......................................
        </ScrollView>
        <Block middle padding={[theme.sizes.base / 2, 0]}>
            <Button gradient onPress={() => this.setState({ showTerms: false })}>
              <Text center white>I understand</Text>
            </Button>
         </Block>
      </Block>
    </Modal>
```

Here, we have added a `Block` component with some style props to below the `ScrollView` component inside the `Modal` component. The `Block` component wraps the `Button` component with a gradient texture style. The `Button` component, in turn, wraps the `Text` component with some text. In the `onPress` event of the `Button` component, we have changed the state of `showTerms` state variable to false using `setState` function. This will cause the `Modal` component to close when we press this button.

Hence, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-4-1.gif)

As we can see, we have got the button at the bottom of the Modal. Hence, when we press on the button the Modal closes.

 

## **Closing the Modal from Device Back Button**

Here, we are going to trigger the closing of the Modal while pressing the back button on our mobile device. For that, we have to make use of the `onRequestClose` event in our `Modal` component. The `onRequestClose` callback is called when the user presses the hardware back button on Android or the menu button on Apple TV. We have to integrate this callback in our `Modal` component as shown in the code snippet below:

```javascript
<Modal  animationType="slide" visible={this.state.showTerms} onRequestClose={() => this.setState({ showTerms: false })}>
    <Block padding={[theme.sizes.padding * 2, theme.sizes.padding]} space="between">
      <Text h2 light>Terms of Service</Text>
      <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          2. Support for Expo services is only available in English, via e-mail.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
        </Text>
      </ScrollView>
      <Block middle padding={[theme.sizes.base / 2, 0]}>
        <Button gradient onPress={() => this.setState({ showTerms: false })}>
          <Text center white>I understand</Text>
        </Button>
      </Block>
    </Block>
  </Modal>
```

Here, we have changed the `showTerms` state variable to false in the `onRequestClose` event of `Modal` component. We have also provided the whole template of the modal.

Hence, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/11/opening-and-closing-modal-final.gif)

As we can see, the Modal closes when we tap on the back button of the mobile device. With this, we have come to the end of this part of our tutorial.

Finally, we have successfully implemented all the UI sections of the Welcome screen in our React Native Plant App.

 

## Conclusion

This tutorial is the fifth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the fourth part of this tutorial series. In this part of the tutorial, we learned how to implement a modal using `Modal` component provided by the react-native package. We also learned how to add content to the Modal body as well as make it Scrollable. Then, we also learned how to add a button to modal and configure it as a closing mechanism. Lastly, we also got insight on how to make the device back or home button trigger the closing of Modal.

In the next part of this tutorial series, we are going to implement the overall UI of the Login Screen in the Login.js file.

 

The post [React Native Plant App UI #5 : Terms of Service Modal](https://kriss.io/react-native-plant-app-ui-5-terms-of-service-modal/) appeared first on [Kriss](https://kriss.io).

## Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.