React Native Plant App UI #5 : Terms of Service Modal

This tutorial is the fifth part of our React Native Plant App tutorial series. In the previous part, 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.

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

React Native Plant App UI #1: Getting Started
React Native Plant App UI #2: Implementing Custom Components
Building React Native Plant App UI #3: Implementing Welcome Screen
React Native Plant App UI #4: Illustration Slider and Animated Steps

As mentioned in the previous parts, the inspiration to work on this tutorial series came from React Native Theme 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 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:

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

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:

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:

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

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:

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

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:

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

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:

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

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:

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

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.