Build a Random Quote Generator App in React Native

hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can create this random code generator app in react native so here in iphone simulator we can see the app and we have a quotation here and we have this new code button if we click on this new code then our code is loading then we are presented with a new code and after this button we have some buttons and these buttons have some functionalities so let's see the functionality of this button so this button has text to speech functionality and when we click on this then the quotation has been spoken by the computer and then after that in android we can see similar kind of thing and we have a code and if we click on new code then it's loading and it is presented with a new code right and then we have this button at the middle which will copy the code okay so this has been copied now we can use it anywhere let's see if it is been copied or not okay let's do that here so i'm pasting it and here we can see some text and let's see it is matching the text so it has been copied and then we have this twitter button by which we can share the tweet so it is being shared in the twitter and as the simulator is not have the twitter app it has opened it in the browser version of the twitter if it will have the twitter app installed then it will open the twitter app so these are the functionalities this app has and i want to tell you another thing that this text to speech function which you have seen here in the ios emulator that function is not working in android and i have done some research in internet but i couldn't find any solution to it i have seen that since android version 11 this text to speech functionality has some update in android by which developers are having difficulties to incorporate this text to a speech functionality in android so i was unable to add this feature to android if i get any solution to it then i will let you know in the comment of this video or if you guys have any solution to it then also let me know by commenting down below it will be helpful for me and the other viewers as well so this is the app which we are going to build today in this tutorial so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial [Music] ok so here i have created a new react native project and in this project i haven't added anything yet i have only added this react native vector icons package as you can see in my package.json otherwise this i haven't added any other package yet and i have already shown you how we can install this react native vector icons in our react native cli project before many times in my tutorials if you are new to my channel and haven't seen those previous tutorials then also you don't need to worry about it because i have created the youtube short video specifically for this react native vector icons so you can check that out from my channel and go to the short section of the channel and there you will find how to install this react native vector icons tutorial video so let's start with the app interface first i'm going to provide a background color here and here i will provide this background color now after that let's get rid of this thing and let's provide another view and for this view let's provide some style first i will provide 90 width for the background color i will use white color then i will provide border radius to it which will be 20 pixel and for the padding let's give 20 pixel as well and within this i will now just provide a text so this is the section in which we will have the main app interface so here it will be code of the day and for this text i will provide text align center font size will be 26 pixel and for font weight let's give it 600 okay here the 600 will be within the quotation and for this text color i will have this dark color and for the margin bottom let's provide 20 pixel now after this text we will have the actual quotation let me copy paste a code here now after that let's style it first i will provide a black color for this code and for the font size of it let's provide 16 pixel for line height it will be 26 pixel then for the letter spacing i will provide 1.1 for font weight let's give it 400 value now it's looking good let's do some more styling of it first the text align center and then margin bottom 10 pixel now save it so it's looking good now after this code let's create the button here i will use touchable opacity and it needs to be imported from react native and for on press of it right now i will have this blank function for the text of it it will have this new code text let's provide the style of it it will have a background color same as this background color so i have copied it and paste it here let's provide padding and some water radius here and for this one i will use margin vertical that means at the top and the bottom and it will be 20 pixel now for this text first i will provide white background color font size of it will be 18 and text align will be centered now after this code text here we will have the author name so after this text let's provide another text and here we will have the author name so right now i have just provided the author name like this let's style this one and for the text align of it it will be right align for the font weight i will use 300 value and it will be italic style for the font size of it i will use 16 and let's provide the color of it which will be the black color now save it so this is how it's looking right now now after this for this quote we will have the quotation mark and that will be at the beginning and at the end of this code so it will be double quote icon and for that i will use this font awesome five vector icons so here it will be font awesome 5 name of the icon is code left for the style of it it will be font size 20 and for the color of it i will use black color now after saving it here we can see it is at the top of this text and similarly let's copy this and use it here and this time it will be got right and for this let's align it to the right side it has been positioned at the right now i want to position these two things little bit different right now it seems like it is in different line i want to push it down so that it will look like it is wrapping this text and for that first i need to provide some padding horizontal that means left and right of this code text and it will be 30 pixel now after this padding we have some gap here and if we push it little down then it will look like these are in the same line right and for that for this quotation mark i will provide margin bottom minus 12 now it is within this line right similarly for this quotation mark i need to position this little bit up and i can do that by providing margin top minus 20 so now it has been positioned properly but now let's provide some gap in between these two component and for that let's provide margin bottom 20 here now after this button we have three more buttons now let's create those so after this touchable opacity we will have a view and for this view style let's provide flex direction row and after that within this view we will have the touchable opacity for the button and we will have the icons for the button not the text and the icon will be font awesome so here for the vector icons we have font awesome and font awesome five so previously i have used font awesome five and right now i will use font awesome and for the first icon it will be volume up the size of it will be 22 and for the color of it i will use this color now let's provide a blank function as of now for this on press and for the style of it it will be a circle so first i will provide border with 2 pixel then a border color which will be the same as this color for the border radius i will use 50 for padding i will provide 15. now save it and it's looking good now copy this touchable opacity two more times this one will be twitter and for the middle one it will be font awesome five and the name of it will be copy let's position this properly it's in the same row but then it's to align properly and that i can do by providing justify content space around so now it's looking good and now we have one more thing left which is the status bar i want to change the color of this text and these icons here and that i can do by providing this status bar bar style light content so now this has been changed as we are done with the interface of the app now we will focus into the functionality of the app and for that first we need to go to this github library for random quotation so here we can see we can get random code like this we can try it in browser so here is the output of this api and we can get the content that means the code and the author and along with it we can get some other information as well which we don't require so we can use this url to request new quotation if i refresh this again then we are presented with a new code so like this every time we will call this we will have a new code so here let's create a function called random code and by using fetch function i will fetch the api response now we need to get the json of it and then we can get the result from the response and let's console log the result and let's use this function for this new code button now save it now after that let's click on this new code button so here in the log we can see the output and here we can see the author author slag content which we were seeing here right so we are getting the response and the code will be the content of the result so here if we output the result content then we will see the code only okay now we need to use this one and for this let's create some states first we will have the code and don't forget to import it from react after the code we will have author as well now after fetching it we can use the set code to update our code here it will be result.content and similarly we will have set author as well this time it will be author this one right now after this we need to use those things so instead of this hard coded code i will use this code from state and instead of this author name we can use author state now save it and after saving it here we can see we have blank after clicking on this button we will have some code and here we can see that but it is not good that we are not seeing anything without clicking on this button for that we need to get help from another react hook which is called use effect and we can use this one here to simply call this function when all the component first renders in our app now save it now after saving it here we can see without clicking on this button we have a code right and also i can see another problem here if i reload this app then here you can see for some time we don't have any text there it seems like the text is being appearing from nowhere and initially app is not doing anything but it is actually fetching the data from the api and that is why it is taking some time we need to display some indicator for it and i can do that by providing a initial value to this state of this loading text and similarly for this author as well now save it so here we can see loading text and after that when we have the data from the api then it will be replaced with the response of the api so now it is much more better user experience in my opinion and similarly if we click on new code that time this new code is not appearing instantly it takes some time and in that time also we need to display some indicator of that that also we can do by creating another state called is loading and we can update it by set is loading and by default i will provide false value to it and when this random code function will be triggered that time first i will set this is loading state to true and after it finished fetching the data i will update it to false and now i can use this is loading state here to check whether it is true or false if it is true that means it is loading that time i want to display this loading text and otherwise i will display this new code text after saving it already you have seen that loading text here now let's do it manually after clicking it we can see loading text for a fraction of second here and also i want to change the color of this button to inactive color of the button that means some opacity to it that's why i will use rgb equivalent of this x value and that is this one so if is loading is true then we will use this value with 0.7 opacity and if is loading is not set to true that time we will have the solid color which is this color and this time it will be opacity value 1 now save it so now let's do it again so while it's loading that time we can see that it has some transparent color which is kind of looking like this button is inactive for that moment so this functionality is working perfectly fine now we need to focus on this part so for this button we need to use this package this react native tts that means text to speech package and we can install it by using this command okay now we need to do pod install and we can do it by this npx port install command so it has been done now let's close this metro bundler ui process and rebuild our app okay so it has been rebuilt now i can comment out this console log now after that let's see how we can use this so we can use this by importing it and then here we can see the documentation how we can use this text to speech functionality so within this speak function we need to provide the text and it will do the job and along with this we can do some customization like this language rate page we can set these values so here i am going to do some i will set default language engb so that means it's british language then we can set default voice and for the voice here we can see that's how we can set the voice for default rate i will provide 0.5 value here they are showing 0.6 but i have seen it seems not natural with 0.6 and pitch 1.5 value so i will use my custom pitch as well it will be 1.2 and then here i will create a function called speak now and for this function i will provide the speak functionality and it needs to speak this code and now let's use this function for this button now save it now let's click on this button there are three methods to gaining wisdom the first is reflection which is the highest the second is limitation which is the easiest the third is experience which is the biggest okay so it's working now along with this i want to provide the author name as well and that i can do by doing this so first we have the code text from this code state then i'm adding this custom text by and then we have the author state now save it now let's hear it again so it's working well now i want to provide stop functionality first when we will click on this button first it will stop if it is speaking something it will stop and then it will speak again otherwise right now if we click here then it is not stopping it is continuing this speak okay and then it is continuing now let's save striving it ourselves by buddha in a controversy now let's stop it there is no distinction of east and west people create distinctions out of their own minds and then believe them to be true by buddha so you got the point right when we will click on here if we don't stop it first then it will speak it and then it will continue to speak that many times how much we have clicked on this button so it is safe to first stop this peak then we can do this big functionality now test it once in the spine there is no distinction of easton in the spine there is no distinction in the spine there is no distinction of east and west people create distinctions out of their own minds and then believe them to be trooped by buddha okay so now as you can see i can click this button as many times as i want but it will not speak that many times it will stop and start over again now along with this here we can see some warning and also i want to provide some functionality here when it is speaking the text that time i want to change the color of the button and that i can do by event listener and this package is providing some event listener like when it is getting started and when it is finished the type of events and we can use that to provide a custom user experience so here within this ad event listener we have this tts start event and for this event we can update our state and that state i can create from here which is is speaking and let's update that set is speaking to true and by default it is false and when it is started speaking that time we have set it to true and when it will finish i will set it to false and by using this state i can provide a different color here so while it is speaking that time i want to provide this background color otherwise it will be a white color and similarly for the icon color as well if is speaking is true that time it will be white color otherwise normally it will have this color now save it now let's click on this button once i never considered a difference of opinion in politics in religion in philosophy as calls for withdrawing from a friend by thomas jefferson okay it will be the background color let's try it last time okay so it's working good now after that we have this copy functionality and this twitter and for the copy functionality we need to use this clipboard package and we can install the package by using this command let me copy paste it here and hit enter now along with this i want to provide some visual feedback to the screen and that i can do by using this react native snack bar package which will give feedback like this so let me install it first after installing we need to do pod install and this pod install is for the ios only it is not for the android if you are only developing it for android you don't need to do this spot install now after that let's close this metro bundler ui process and rebuild our app and whenever we will add a new third party package that time it is safe to rebuild our app and then use the package okay so it has been built now after this speak now function let's create another function called copy to clipboard and here we will use this clipboard package first so first we need to import it and along with this we need to import this snack bar as well now after this to copy text we need to use this function clipboard dot set string and here will be the string and the string for our app will be this code and after it has been copied i want to display the snag bar feedback and that i can do by this code so here i have provided this quote copied text now i need to use this function for this copy button now save it now after that let's click on this button so here we can see the visual response and now if i go to any other app so here let's paste the text so it is the text which have been copied right so this is the quotation which we have copied so this copy functionality is working perfectly well now we are left only with this to it functionality and that we can do by creating another function which will be named as to it now and here let me configure a url by using this url we can share to it and for this text value we need to provide the text which is the code now we need to open this url and we can do that by calling this linking api from react native so it will be linking dot open url and here we can use the url which we have created now call this to it now function from this button this tweet button okay so now after saving it we can click on this button and it is opening the twitter and here we can see this code is showing in the twitter app right now the twitter app is not installed in the simulator so it has opened the browser if the device have the twitter app open then it will open the twitter so it's working perfectly well so here you can see our app is completed so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 1,148

Keywords: react native text to speech, quote generator app in react native, random quote generator javascript api, random quote generator app in react native, quote app in react native, build a quote generator app in react native, quote generating app in react native, quotes app in react native, quote app UI in react native

Id: OV0qnHInNw0

Length: 28min 10sec (1690 seconds)

Published: Sun Dec 12 2021