This tutorial is the fifth part of our React Native Plant App tutorial series. In the , 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. previous part 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 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. React UI Kit Overview In this fifth part of this tutorial series, we are going to implement the 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 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. Terms of Service(TOS) section Modal 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 . We have already added the 'Terms of Services' button at the bottom of the Welcome screen. So, when we click on that button, the showing all the Terms of Services should appear. But first, we need to import the component from the package as shown in the code snippet below: Modal Modal Modal react-native { StyleSheet, FlatList, Image, Dimensions, Animated, Modal } ; import from 'react-native' Then, we need to define the state variable called in order to handle the opening and closing of our . The initialization of the state variable is shown in the code snippet below showTerms Modal 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 component. The function is called and its implementation is provided in the code snippet below: Modal renderTermServices() renderTermsServices(){ ( <Text>Modal</Text> ) } return < = = > Modal animationType "slide" visible {this.state.showTerms} </ > Modal Here, the function returns the component. The component wraps the Text component. The component is configured with some props. the 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 boolean value. renderTermsServices() Modal Modal Modal animationType showTerms Now, we need to change the state of 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 function: showTerms render() <Block middle flex={ } margin={[ , theme.sizes.padding * ]}> <Text center semibold white>Login</Text> <Button shadow onPress={() => .props.navigation.navigate( )}> < Text> < Block> 0.5 0 2 this.props.navigation.navigate('Login')}> < = => Button gradient onPress {() </ > Button this 'SignUp' Signup < > Text center semibold </ > Text /Button> <Button onPress={() => this.setState({ showTerms: true })}> <Text center caption gray>Terms of service</ </ > Button /Block> {this.renderTermsServices()} </ Here, in the event of the component representing Terms of service, we have changed the state of the variable to true. Then, we have also called the function below the wrapping the Button components. onPress Button showTerms renderTermsServices() Block 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 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 view. Hence, in order to add the content to the , we need to use the code from the following code snippet: Modal Modal Modal <Modal animationType= visible={ .state.showTerms}> <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> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, the component wraps a component with styling props. Then, the component wraps a bunch of components which is used to display the content header as well as ten terms as points. All the components have the same styling props except the one which encloses the header text. Modal Block Block Text Modal 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 component representing the terms list inside the component. The overall implementation is provided in the code snippet below: Text ScrollView <Modal animationType= visible={ .state.showTerms}> <Text h2 light>Terms of Service</Text> <ScrollView style={{ marginVertical: theme.sizes.padding }}> .................................... ............................ </ScrollView> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have added the component wrapping all the Text components representing the Terms list. The component is also configured with some inline styles. ScrollView ScrollView Hence, we will get the following result in our emulator screen: As we can see, our Terms List in the component is now scrollable. Modal Adding Button to Modal Here, we are going to add a button to the which can be used to close the modal. The button will be placed at the bottom of the . For that, we need to use the code from the following code snippet in the function: Modal Modal renderTermsServices() <Modal animationType= visible={ .state.showTerms}> <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> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have added a component with some style props to below the component inside the component. The component wraps the component with a gradient texture style. The component, in turn, wraps the component with some text. In the event of the component, we have changed the state of state variable to false using function. This will cause the component to close when we press this button. Block ScrollView Modal Block Button Button Text onPress Button showTerms setState Modal 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 . Hence, when we press on the button the closes. Modal Modal Closing the Modal from Device Back Button Here, we are going to trigger the closing of the while pressing the back button on our mobile device. For that, we have to make use of the event in our component. The 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 component as shown in the code snippet below: Modal onRequestClose Modal onRequestClose Modal <Modal animationType= visible={ .state.showTerms} onRequestClose={() => .setState({ : })}> <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> < "slide" this this showTerms false < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have changed the state variable to false in the event of component. We have also provided the whole template of the modal. showTerms onRequestClose Modal Hence, we will get the following result in our emulator screen: As we can see, the 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. Modal 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 component provided by the react-native package. We also learned how to add content to the body as well as make it . 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. Modal Modal Scrollable In the next part of this tutorial series, we are going to implement the overall UI of the Login Screen in the file. Login.js
