Learning React-native : Part VII

Official Github repo for this tutorial: https://github.com/facebook/react-native

<p dir="auto"><strong>What will I learn? <ul> <li>Handling user input <li>Implementing ‘redux-thunk’ in our application to handle asynchronous task <li>Using Flat list to display the list of data <p dir="auto"><strong>Requirements <ul> <li>A laptop/PC with Mac OS/ Linux/ Windows <li>Preinstalled node.js <li>Preinstalled Code editor <p dir="auto"><em>Note: This tutorial is performed in Visual Studio Code in laptop with Windows 10 Home, 64 bit OS <p dir="auto"><strong>Difficulty <p dir="auto">Intermediate, you must have good knowledge of JavaScript to catch up this tutorial. <p dir="auto"><strong>Tutorial Content <p dir="auto"><strong>Handling user input:<br /> React library doesn’t support its own validation, so we should add our own validation logic in our application. To add our own validation we should connect the input of our JSX to some object we can manage in the state.<br /> By doing this we can set up two-way binding so that the we can save the user input in our state, check the validity and control the validity of each state and finally use this information to change the styling of the input field and disable the button if the information is not valid. <p dir="auto">So, in the state of our ‘Signup.js’ we added a controls object which holds the four inputs in this page that is email, name, password and confirmPassword. <pre><code>controls:{ email, name, password, confirmPassword } <p dir="auto">But only these keys don’t help much so we will be adding the js object in our key so that we store current value as well as check the validity of the input.<br /> Each js object in our key has attributes like value where we will be storing out user input, valid where we will add the flag whether the input in valid or not, validationRules for the corresponding input and finally touched flag which determines whether the input field has been touched or not.<br /> Validation rule can be different according to the input for eg: the validation rule for email checks whether the typed input is an email or not whereas validation rule for password will be that it should be of minimum 6 character. Similarly, for confirmPassword the rule is that it matches to the password field and for username it is that it contains a combination of letter and number. <pre><code>controls:{ email: { value: "", valid: false, validationRules: { isEmail: true }, touched: false }, name:{ value:"", valid:false, validationRules:{ containesLetterAndNumber:true }, touched:false }, password: { value: "", valid: false, validationRules: { minLength: 6 }, touched: false }, confirmPassword: { value: "", valid: false, validationRules: { equalTo: "password" }, touched: false } } <p dir="auto">Now that we defined our state let us work in our input<br /> Let us now start making the validation rules. Create a new file named validation.js<br /> We will be receiving the value of the user input, rule for the corresponding text input and the connected value so that we can confirm our password matches the previous password input.<br /> Here we have used switch case for every rules passed so that we can check the condition that is rule required to validate it.<br /> emailValidator returns true if the user input matches email syntax. It is used to validated email.<br /> minLengthValidatator returns true if the minimum password length is 6. It is used to validate password.<br /> equalToValidator returns true if the received value from the user matches the previous connectedValue which is password in our case. It is used to validate confirmPassword<br /> containsLetterandNoValidator returns true if the input contains at least one character and number. It is used to validate the username field. <pre><code>const validate = (val, rules, connectedValue) => { let isValid = true; for (let rule in rules) { console.log("the rule is:"+rule) switch (rule) { case "isEmail": isValid = isValid && emailValidator(val); break; case "minLength": isValid = isValid && minLengthValidator(val, rules[rule]); break; case "equalTo": isValid = isValid && equalToValidator(val, connectedValue[rule]); break; case "containesLetterAndNumber": isValid=isValid && containsLetterAndNoValidator(val); break; default: isValid = true; } } return isValid; }; const containsLetterAndNoValidator=(val)=>{ console.log("inside contains letter and number validator"); return /(?=.*\d)(?=.*[a-zA-Z])/.test( val ); } const emailValidator = val => { return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test( val ); }; const minLengthValidator = (val, minLength) => { return val.length >= minLength; }; const equalToValidator = (val, checkValue) => { return val === checkValue; }; export default validate; <p dir="auto">Now that we have made validation.js Let us implement it in our Signup screen<br /> Our DefaultInput in Signup.js for email text input will now look like this which fires up onChangeText when the text is changed in the input field, it then sets the user input to ‘this.state.controls.email.value’ of our state. <pre><code><DefaultInput placeholder='Email' style={styles.input} value={this.state.controls.email.value} onChangeText={(val)=>{this.updateInputState('email',val)}} valid={this.state.controls.email.valid} touched={this.state.controls.email.touched}/> <p dir="auto">Similarly, we should add these attributes for username, password and confirmPassword too <pre><code><DefaultInput placeholder='Name' style={styles.input} value={this.state.controls.name.value} onChangeText={(val)=>{this.updateInputState('name',val)}} valid={this.state.controls.name.valid} touched={this.state.controls.name.touched} /> <View style={this.state.viewMode==='potrait' ?styles.passwordContainerPotrait :styles.passwordContainerLandscape}> <View style={this.state.viewMode==='potrait' ?styles.passwordWrapperPotrait :styles.passwordWrapperLandscape}> <DefaultInput placeholder='Password' style={styles.input} secureTextEntry={true} value={this.state.controls.password.value} onChangeText={(val)=>{this.updateInputState('password',val)}} valid={this.state.controls.password.valid} touched={this.state.controls.password.touched} /> </View> <View style={this.state.viewMode==='potrait' ?styles.passwordWrapperPotrait :styles.passwordWrapperLandscape} > <DefaultInput placeholder='Confirm Password' style={styles.input} secureTextEntry={true} value={this.state.controls.confirmPassword.value} onChangeText={(val)=>{this.updateInputState('confirmPassword',val)}} valid={this.state.controls.confirmPassword.valid} touched={this.state.controls.confirmPassword.touched} /> </View> </View> <p dir="auto">When the text is changed updateInputState is fired which contains the key for our corresponding Text input field and the value of the text input.<br /> Now in our equalTo validation rule of ‘confirmPassword’ we have simply assigned it to ‘password’ string so, we first should check that whether we have equalTo validation rule or not and if we have equalTo validation rule then we should save some extra information.<br /> equalControl gives us ‘password’ which is the identifier of the control password and equalValue gives us the value of the password and we have saved this value in our connected value js object so that we can dynamically set the value.<br /> ‘this.setState’ then calls the validation function which then check the validity of the input according to the validation rule. If the key is confirmPassword then we should continuously validate it with password and toggle the valid state accordingly and if the key is not confirmPassword then we simply update the state of the input to value according to the key we receive. <pre><code>updateInputState = (key, value) => { let connectedValue = {}; if (this.state.controls[key].validationRules.equalTo) { const equalControl = this.state.controls[key].validationRules.equalTo; const equalValue = this.state.controls[equalControl].value; connectedValue = { ...connectedValue, equalTo: equalValue }; } if (key === "password") { connectedValue = { ...connectedValue, equalTo: value }; } this.setState(prevState => { return { controls: { ...prevState.controls, confirmPassword: { ...prevState.controls.confirmPassword, valid: key === "password" ? validate( prevState.controls.confirmPassword.value, prevState.controls.confirmPassword.validationRules, connectedValue ) : prevState.controls.confirmPassword.valid }, [key]: { ...prevState.controls[key], value: value, valid: validate( value, prevState.controls[key].validationRules, connectedValue ), touched: true } } }; }); }; <p dir="auto">Now our DefaultInput.js looks like this: <pre><code>const defaultInput=props=>( <TextInput underlineColorAndroid="transparent" {...props} style={[styles.validInput,props.style,!props.valid && props.touched ? styles.invalidInput : null]} /> ); const styles=StyleSheet.create({ validInput:{ width:"100%", borderWidth: 1, borderColor: "#eee", padding: 5, marginTop: 8, marginBottom: 8 }, invalidInput: { backgroundColor: '#f9c0c0', borderColor: "red" } }) <p dir="auto">In our DefaultInput.js if the input is invalid in if the input field is touched then we have set our style to ‘invalidInput’ that is background appears red but if the input is valid then we set the style to valid style . Now if you run the application the output looks like this:<br /> Initially, the style looks good ad the style is applied to validStyle <p dir="auto"><span><img src="https://images.hive.blog/768x0/https://i.imgur.com/FEqkEVn.png" srcset="https://images.hive.blog/768x0/https://i.imgur.com/FEqkEVn.png 1x, https://images.hive.blog/1536x0/https://i.imgur.com/FEqkEVn.png 2x" /> <p dir="auto">Now if you start adding input the background and border color change as the input is ‘invalid’ for the email field <p dir="auto"><span><img src="https://images.hive.blog/768x0/https://i.imgur.com/M0XjcWw.png" srcset="https://images.hive.blog/768x0/https://i.imgur.com/M0XjcWw.png 1x, https://images.hive.blog/1536x0/https://i.imgur.com/M0XjcWw.png 2x" /> <p dir="auto">Only if the user enter valid input then only the style is set to ‘validInput’ <p dir="auto"><span><img src="https://images.hive.blog/768x0/https://i.imgur.com/kKnJ62Y.png" srcset="https://images.hive.blog/768x0/https://i.imgur.com/kKnJ62Y.png 1x, https://images.hive.blog/1536x0/https://i.imgur.com/kKnJ62Y.png 2x" /> <p dir="auto">In this way we can validate our input in react native. <p dir="auto"><strong>What is redux-thunk? <p dir="auto">‘redux-thunk’ is one of the popular middleware to handle the asynchronous actions in redux. We will be using ‘redux-thunk’ to fetch some data from the API and display it in the list. There are many other libraries for handling the asynchronous action like ‘redux-saga’, ‘redux-observable’ etc but ‘redux-thuk’ is one of the most popular to use. <p dir="auto">We will be fetching the API from the url:<br /><span> <a href="https://api.steemjs.com/getTrendingTags?afterTag=funny&limit=10" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://api.steemjs.com/getTrendingTags?afterTag=funny&limit=10 <p dir="auto">This URL will return the output in json format like this: <p dir="auto">[{"name":"funny","total_payouts":"1860858.456 SBD","net_votes":2172492,"top_posts":313290,"comments":196268,"trending":"1606343938"},{"name":"busy","total_payouts":"3244362.886 SBD","net_votes":2447760,"top_posts":229524,"comments":217534,"trending":"1415365210"}] <p dir="auto">Now we should use ‘redux-thunk’ to fetch the data from this URL and display it in the list.<br /> Let us add ‘redux-thunk’ in our project:<br /> <code>PS A:\hybrid\react-native\SteemitTutorial> npm install redux-thunk –save <p dir="auto">Now, as we added redux-thunk in our project we should first import applyMiddleware from ‘redux’ and add appyMiddleware(thunk) in our createStore. <pre><code>import {applyMiddleware} from 'redux'; import thunk from 'redux-thunk'; const configureStore = () => { return createStore(rootReducer, (applyMiddleware(thunk))); }; <p dir="auto">applyMiddleware from redux allows us to support asynchronous task without much boilerplate code and it allows us to dispatch function as well as action in our action creators. Now that we have added ‘thunk’ in our applyMiddleware and ‘thunk’ handles all the asynchronous task required. <p dir="auto"><br /> We can return both function or action as per our requirement in ‘redux-thunk’ which make it very easy to use.<span>Now, in our action creator we will be returning dispatch which will fetch the data from the url ‘<a href="https://api.steemjs.com/getTrendingTags?afterTag=funny&limit=10’" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://api.steemjs.com/getTrendingTags?afterTag=funny&limit=10’ catch if there is some error then if the response is successful we get the response in json format and finally we create an empty array ‘feeds’ where we add the feeds fetched from the server using for loop. Finally when we have pushed all the items in the feeds array we call the function setFeeds() which returns the action of type SET_FEED and returns the feeds array full of feeds list. <pre><code>export const getFeeds=()=>{ console.log("inside getting feeds"); return dispatch=> { fetch("https://api.steemjs.com/getTrendingTags?afterTag=funny&limit=10") .catch((err)=>{ alert("Something went wrong :/"); console.log(err); console.log("inside error") }) .then((res)=> res.json()) .then(resp=>{ //dispatch(setFeeds(feeds)); console.log("inside second response") console.log(resp) const feeds=[]; for(let key in resp){ console.log("inside for loop") feeds.push({ ...resp[key], name:resp[key].name, totalPayout:resp[key].total_payouts, commentsCount:resp[key].comments, netVotes:resp[key].net_votes, trending:resp[key].trending }); } dispatch(setFeeds(feeds)); console.log("size is:"+feeds.length) console.log("elemenet is:"+feeds[0].name+", total payout is:"+feeds[0].total_payouts); }); }; }; export const setFeeds=feeds=>{ console.log("inside setting feeds"); return{ type:SET_FEEDS, feeds:feeds }; }; <p dir="auto">Now in our Home.js<br /> As we will be displaying the item in the list we will be using FlatList component provide by react-native.<br /> To create list of items we first have to create the view for the single item of the list and populate other items of the list similarly. So, let us now create a custom component called FeedItem.js which will set the view of the individual list item according to the prop it receives. Here we be displaying 5 texts in our single list item. <pre><code>const listItem=props=>( <View style={styles.listItem}> <Text>Title:{props.feedTitle}</Text> <Text>Comment count:{props.commentsCount}</Text> <Text>Net votes:{props.netVotes}</Text> <Text>Total Payout:{props.totalPayouts}</Text> <Text>Trending No:{props.trending}</Text> </View> ); <p dir="auto">As we have made single view for the list item we now have to create another component to populate all the items of the list. We will call it FeedList.js <pre><code>const feedsList=props=>{ return( <FlatList style={styles.listContainer} data={props.feeds} renderItem={(info)=>( <FeedItem feedTitle={info.item.name} commentsCount={info.item.commentsCount} netVotes={info.item.netVotes} totalPayouts={info.item.totalPayouts} trending={info.item.trending} /> )} > </FlatList> ); }; <p dir="auto">FeedList.js will receive all the list of the data from the server. FlatList has an attribute called renderItem which renders the view for the individual item. So, in our render view we should pass the component holding the view for the single list item which in our case is FeedItem. We have passed the content to be displayed in FeedItem so that we can receive it via pops and display it in FeedItem.<br /> Now, open Home.js<br /> We will create state which will check whether the feed is loaded or not. Initially it is set to false. <pre><code>state={ feedLoaded:false, } <p dir="auto">In our componontDidMount() function which is fired when a component is mounted (inserted into the tree). So in our componentDidMount we will be initially calling this.props.onLoadFeeds() which will dispatch the event getFeeds() and when the dispatch event is successful it returns us the list of feed so we will be calling this.loadFeed which sets the feedLoaded state to true as the feeds has been successfully loaded. <pre><code>componentDidMount(){ console.log("inside component mounted in Home screen") this.props.onLoadFeeds(); this.loadFeed(); } loadFeed = () => { console.log("inside place search"); this.setState({ feedLoaded: true }); }; const mapStateToProps = (state) => { console.log("inside map state to props"); return { feeds:state.feeds.feeds, }; } const mapDispatchToProps=dispatch=>{ console.log("inside map dispatch to props") return{ onLoadFeeds:()=>dispatch(getFeeds()) }; }; <p dir="auto">Now in our render method initially, we set the content to empty View and if the state of the feedLoaded is true then we render the FeedList so that it shows the list of the feed. <pre><code>render(){ let content=( <View></View> ); if(this.state.feedLoaded){ content = ( <FeedList feeds={this.props.feeds}> </FeedList> ); } return( <View> {content} </View> ); } } <p dir="auto">Now if we run the application it will load the list of the items from the API <p dir="auto"><span><img src="https://images.hive.blog/768x0/https://i.imgur.com/lA4ThlI.png" srcset="https://images.hive.blog/768x0/https://i.imgur.com/lA4ThlI.png 1x, https://images.hive.blog/1536x0/https://i.imgur.com/lA4ThlI.png 2x" /> <p dir="auto">In this tutorial we learned to validate user in put and render list item from API using ‘redux-thunk’. We also learnt to use ‘FlatList’ to render the list item. We will be learning many more in the next tutorial. <p dir="auto">All above codes can be downloaded from my GitHub link. Click <a href="https://github.com/programminghubb/ReactTutorials" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">here to download. <p dir="auto"><strong>CURRICULUM <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-i" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part I <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-ii" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part II <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-iii" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part III <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-iv" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part IV <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-v" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part V <p dir="auto"><a href="https://steemit.com/utopian-io/@programminghub/learning-react-native-part-vi" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Learn React-native : Part VI