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