News App in React Native [ Full Tutorial ] | Inshorts Clone Project | Context API

hey everyone welcome back to roadside coder and today i've brought an awesome react native project tutorial for you all we are going to build a news app for both android and ios platforms which will be the clone of a famous news app called in shorts our news app will have news from multiple different categories different sources we will use context api to manage the state of our app and also implement dark and light mode themes all by using react native so let's quickly go and have a comprehensive look on the project that we are going to build so here it is this is how our app looks like so we are currently on the news screen so we can go ahead and scroll down or we can scroll up and you can see this beautiful carousel which is kind of 3d in style and this looks exactly like how the carousel is in the in shorts app now we can go ahead and click on this read more button and it's going to take us to the browser to show us the full story oops yep you see let's go back and in the navbar of our app you see this discover button right here if i click on this discover button it's gonna take us to the discover screen but not only by clicking on this button we can also swipe the screen to go to the discover screen now in this discover screen we have got a lot of things going on we have a search bar we have categories and we have sources so let's say if i go ahead and click on this science category it's going to redirect us back to the news screen with all of the news related to science and let's say if we want to go back to the general news we can click on this reload button and it's going to display all of the general news once again now let's go back to the discover screen and we can see we have a lot of new sources over here like bbc cnn fox news google new so let's go ahead and click on cnn and it's gonna take us back to the news screen with all of the news related to cnn yep you see short by this person cnn so let's go back to discover screen and let's explore this news bar now now if we go to the news bar and type something yup you see we have all of these search results over here let's click on any of the search result and it's going to pop up the news with this model and it's like exactly same like it is in the news screen so we can click on this cross button to close it now in the top left corner of our app we see this icon let's click on it and our app is now in the light mode yes we have light and dark mode theme changing ability in this app so we can go back to the news screen and you see all of the theme of our app is now in the light mode or in the light theme also one more thing if i go ahead and close this app and open this app again you see this awesome splash screen which i'm gonna provide you towards the end of the video so that when you add this app to the resume it looks very authentic now i know you must be very excited to build this app so without any further ado let's get started so i'm gonna quickly start by initializing a new react native app but before that we need to make sure that we have node.js installed in our system so if you don't have node.js installed just go to google and search node.js and go to this website and download the long term support version or current version whatever you like and if you're developing an android app make sure you have android studio installed and if you're developing an ios app so make sure you have xcode installed so i'm gonna come back to that later but let's first install expo so we're gonna install expo by typing npm install g for global and expo so this will go on and install the expo in your system so what is expo expo is a tool used for building react native apps so let me search expo so there we go make it make any app run it anywhere build one project that runs natively on all your devices so this expo will help us build an android app as well as an ios app in react native so let's go back to vs code and expo is installing let's wait for it to finish installing so expo has finished installing and now i'm gonna go and initialize a new react native app for that i'm gonna go and type expo init and then the name of our app but first make sure you have opened the folder where you want your project to be go to file and open folder and select whatever the folder that you like to be i've already selected that so i'm gonna go ahead in the terminal and type expo init and then the name which is i'm gonna give in shorts clone and press enter and now you see it's going to ask us how you want the setup of our app to be so i'm going to go ahead and click on blank and meanwhile this is initializing let's go and quickly open android studio now if you're absolutely new to react native i've built a complete basics video on this topic and i've covered whole basics part of the react native so you can go ahead and click on the link in the description or i button above to watch this video i've explained how you can go on and install the android studio how you can set up the environment and all of the basic stuff needed to build a react native application and we're also going to build a small application in that video so if you're new to react native i will highly recommend you to go and watch this video so here it is our android studio has been opened and click on configure avd manager and click on this play button you have to set up a new virtual device which i've already explained in our previous video so it's launching the emulator and here we go our emulator has successfully opened so i'm going to quickly go ahead and close this up all right so now you can see that our expo app has successfully initialized so i'm going to go ahead and say expo start and press enter now this android emulator is going to be used to test our app that we are going to build and again as i mentioned in our previous video that you can also use your physical phone to test your app you just need to download the xpogo app all of the details are in that video oops my bad uh i need to switch to that folder first i'm gonna go to open folder and select that folder here we go our folder has opened successfully so let's go to terminal and now i'm gonna say expo start and this is going to start the local server for our app development there we go let's click on this link here's our expo metro bundler opened now click on run on android device and it's gonna open this app in this android emulator here we go our app has started now on to our vs code if you go on an open app.js file you're gonna see the same message open up app.js to start working on your app just like this so let's so first of all i'm gonna start by building the header of our app so let's remove all of this and inside of this i'm gonna build the header so instead of these styles i'm gonna say flex one and margin top to be status bar i'm just creating the space for status bar so that anything we type doesn't overlaps this so you can see expo has imported this status bar from expo status bar bus but we want to export it from react native so just like this make sure of this step so status bar dot current height removing the height of the status bar that is over there now inside this view i'm gonna type in shorts tab or in short tabs now this component doesn't exist yet so i'm gonna go and create a new folder over here called components just like that and create a new file inside of that in short tabs dot js and i'm gonna type a shortcut r n f e and press enter you're gonna see it displays this boilerplate code so this is possible by installing this extension es7 react redux graphql so you can install this extension and you can use this shortcut then so now since it's there let's import this inside of here just like this i pressed control and space and it showed me the suggestion to import it so here we go now inside of the in shorts tabs we're gonna build this by using a library called react native tab view so let's go to chrome and i'm gonna search and i'm gonna click on this link react native tab view so here we go this is the page for the npm package and you can see right here so this is the default app so i'm gonna create our own tab we're gonna go on and create our own tab just like i showed you at the start of the video to switch between news screen and dashboard so we have to create both of the routes and then we have to take a variable called render scene and put the scene map inside of this okay let's go ahead and create this i'm going to explain you along the way so let's first install it so i'm gonna go to terminal and open up a new terminal and say npm install react native tab view but there's one message over here in this website that you need to install react native pager view if you are using expo so we're gonna have to install this as well expo install react native pager view so let's wait for it to finish installing all right now install expo i mean expo install react native pager view now meanwhile that's installing i'm gonna start writing our code so first thing that i'm gonna import is use window dimensions from react native so i'm going to copy it and comma use window dimension oops i spelled it wrong use window dimension and i'm going to store it in a variable called layout now this layout variable will be used for identifying the layout of our application that is the dimension of our application now let's create a state for identifying the state of our current tab that is where the tab is located so i'm gonna say index the initial value will be one so later i'm gonna take this index and put it in the context api so more about that later for now so i'm going to create the routes next according to the documentation so routes and so two routes will be first will be the key and other will be the title so wait a minute it's going to be an array so first thing will be a key which let's say i'm gonna give first and the other thing will be the title which i'm gonna give discover similarly for the second one second and the title will be news all right now inside of this i'm gonna remove this view up also to render all of this i'm gonna create a variable called render scene which will contain scene map which will be imported from react native tab view just like this and inside of this scene map i'm gonna write first screen is discover screen so these these are going to be the components which are not yet created so i am going to create them in just a moment and second is going to be news screen so let's comment this out for now and i'm going to come back to this later okay so instead of this return i'm gonna add this tab view so you know what let's go to the npm page of tab view and i'm gonna take this right over here so this is gonna be helpful for us just like this let's import this tab view first from react native tab view so these are the things that it's going to take it's going to take a navigation state with the index that we have created right over here it's going to store the index of the current page either it's zero or one the routes that we have created second it's gonna render the scene so it's gonna take this render scene which we are going to create in just a moment it's gonna have both of the screens inside of it okay and the third thing is on index change what's going to happen on index change so it's gonna take care of that automatically we just need to provide this set index right over here and then the initial layout so initial layout will be layout.wait so remember we created this layout variable so it's going to take the layout of the screen and give it the width of that layout so now let's quickly before saving this i know this is going to break the app so before saving this i'm going to create both of these components discover screen and news screen so i'm going to create a new folder over here called pages or you know what i'm gonna name this as screens that's better first file will be discover screen dot js so i'm gonna say rnf e and i'm just gonna write discover save this and create another screen for news screen dot js r n f e and i'm gonna say news screen awesome let's import them now here just like this and i've auto imported both of them yep there we go now if we save this okay we have some error over here that use window dimension i think i misspelled this let's see use window dimensions okay it was dimensions with the s let's save this and there we go we have both of our tabs so these are the default tabs right here discover and news so let's go on and build our own custom tab so right below this i'm gonna go ahead and type render tab bar something yup render tab bar yeah so it's gonna take a callback and instead of this we're gonna give our custom component which is going to be let's say top navigation you can name it whatever you want and i'm gonna provide this index and a set index why i'm gonna tell you in just a second so don't worry for now also so it's giving this error because tab navigation doesn't exist so let's create this new new component tab navigation oops tab navigation dot js rnf e now before building our tab navigation uh so you remember for our tabs we have the icons on the left and the right side of the tab so where will those icons come from so they're gonna come from a library called expo slash vector icons so let's go ahead and install that library first and then we'll continue to build this so click on this plus to open another terminal i'm gonna say npm install expo slash vector icons there we go expo vector icons has finished installing now let's continue building our top navigation i'm going to close this terminal and so i guess whenever we install a new export dependency this some for some reason this breaks and stops so let me restart our server again all right i've restarted the server and but you see the same error again the top navigation is not imported yet so let's go and import the top navigation here it's still gonna give us the error because stop navigation doesn't have anything so for now i'm gonna just import it just like this and go inside of the top and top navigation and let's build this so i'm gonna import index and set index which was sent to us from the previous screen okay first thing that i forgot to do is uh let's go to the app.js and here i forgot to give this a background color so now notice what i'm doing over here i'm taking this everything that is inside the styles.container and then giving the background color so why have i not given this inside of the container itself it's because we're gonna later implement the dark mode and so we're gonna implement it inside of our function so that's why we are uh adding a background color tag separately because that dark mode variable won't be accessible over here so background color and background color will be this one right here so now you can see the color is dark now all right let's continue building our top navigation so now inside this view i'm gonna put style again and inside of this style i'm gonna give this styles of the container so styles dot container but we haven't imported the style sheet yet so style sheet from react native and then over here i'm going to import the styles so const styles equals style sheet dot create inside of this we're gonna write our css or styles basically oops not style sheet i mean styles dot container and comma i'm gonna give this some background color so the tabs are gonna have some different background color so that's why i'm gonna give this this background color so it's not going to reflect yet but it's going to reflect in just a moment so now inside this view i'm going to say if the index is equal to 0 then what's going to happen that means if the index is 0 then it's going to be in the discover screen right so let's build the discover part yet i mean this part of the discover screen part yet so inside the discover screen we have different layouts so you can see in the screen we have different icons in the discover screen at the top navigation and when we go to the news screen we have different icons in the top navigation so we're going to make sure of that so if the index is zero we're gonna say touchable opacity and inside of the touchable opacity we're gonna have a text which will have an icon inside of it this icon will be of changing our theme that is dark and light mode so i'm gonna import this icon now this is the icon material which will be imported from material community icons so you can see right here material community icons from expo vector icons and this is gonna give us error because we haven't written this you know the else condition so for now i'm gonna put this right over here yep so you might be thinking how will i know that this is imported from material community icons how do i figure out how to import this so let's go to chrome and search expo vector icons and click on this first result and so you see over here if whatever icon that you want you can have it so for example i had theme so this was the icon that i wanted so i clicked on this and it's gonna show me how to import this and how to use this yeah so this is how you can use this let's go back and let's see okay so we don't have anything uh yet so color will be this and now let's give this touchable opacity and text some styles so i'm gonna give some styles dot left to touchable opacity and to the text i'm gonna give these styles right here color light gray and styles dot text so let's go on below and write these styles so first of all the styles for our container so the container is going to be flex direction row because all of the things are going to be in one row justify content space between because all of them will have spaces in between and you know the flexbox right so this is how the flexbox works the space between the property is the property of flexbox and we're going to have some padding some align items to the center some border bottom color to black and border bottom width is going to be 0.5 now let's provide the styles for left and text so just like this flex direction is going to be row align items are going to be center with is going to be 8 and justify content is going to be space between self explanatory i guess and text for this part is going to be font size 16 so yep if we go to the first screen you're gonna see right here we have this touchable opacity so okay one of the icons are visible let's make the discover tag and the all news tag so for that inside of over here i'm to write touchable opacity again and instead of this vegetable opacity we're going to have simple line icon which will be exported from i mean imported from re expo vector icons so just like this it's going to be an arrow left and color is going to be this blueish color and below this i'm going to write a text tag so text inside this text i'm going to write discover now let's give all of these some styles so touchable opacity is gonna have styles dot left just like previously and the text is going to have styles dot text and color light gray if you go to the first screen you're gonna see yep discover right here so if you're on the zeroth screen zeroth index we're gonna see this but if we go to first screen we're gonna see this discover icon we're gonna make them work as well later or you know what let's make them work so if we click on this touchable opacity that that is that discover button what's gonna happen it's gonna trigger this on press it's gonna set the index if it's index is zero then it's gonna set to one otherwise it's gonna remain zero so now if you go to discover and click on this yep you see the index has changed so now below this so this this these icons are done now i'm gonna work on the middle icon so i'm gonna speed this up a little bit and add the code and i'm gonna explain you so this is what i have imported right over here so first in the middle it's going to be the text so i either it's going to be the all news if the index is 1 the all news will be there at here in the middle so if i save this okay i haven't imported this icon for ant design yeah you see when the index is one it's gonna display all news but when the index is zero it's gonna discover it's gonna show the discover just like this and on the right side let me create a little bit space and on the right side if the index is one that is over here if the index is one it's gonna display this reload button so this thing and design name is reload one and on press don't notice this on press right here we're gonna make this work later and it's gonna have some styles styles dot right and otherwise if it's not there that is if the end screen is zero then it's gonna display this all news so if the screen is zero it's gonna display an icon of simple of arrow right and in and the word all news and on press just like previously we're gonna if the so index is zero right we're gonna we want it to go to index one so if you press it should be good going to index one so if the index is zero make it go to index one otherwise let it be 0 just like that now let's add the remaining styles for all of these that is for styles.right so this is going to have a width of 80 and some align items of flex end so width of 80 so that it appears right in the middle you see and one more style that left that's left is this styles dot center so what i want is a underline or something beneath this discover and all news so i'm gonna go over here and write center styles which is going to have padding bottom of two some border color which is this color some border bottom width so width is of five some border radius so that it looks just like this point it from both the sides some font size and some font weight so that there's all news and this cover looks a little bold so let's save this so we have successfully created our navigation bar or tab bar right here if we click on this it goes over here if we click on this it goes over there now before moving on to building our discover screen or our news screen i would like to introduce the api that we are going to use in this project so api that we are going to use is this one let's go to the get repository of this project so go to github.com slash push dash eon and inside the repositories you're gonna search react native news app yep just like this react native news app and inside of the api folder we have api.js file inside of this i have created all of the things that are you that you are going to need so we're going to come back to this later but let's take this base url for now and let's go to this link sort of tech slash news api so whoever built this api very much thank you to you so this is how our api is going to be so this is going to be the base url and for getting the top headlines that is the general news we're going to use the base url top headlines slash category and we can provide the category that they have provided us so categories are these many categories and the country code so if you're living in india you can give i n or according to the country name so like they have given the example right over here now if you want to get a specific source that is if you want to get news from bbc or cnn or fox news or google news you can put the source id over here so this was a quick explanation we're gonna cover everything as we go on to implement it so now i'm gonna go back to our folder and create a new folder right over here for our api inside of this i'm gonna create a new file api dot js and let's go back to the browser and i'm gonna take all of this which is inside of this file so let's copy this up and paste it in this api dot js file so i've done all of the hard work for you all already so i've written all of the categories i've added the appropriate pick for each category with the name so all of these categories are here so we're going to come back to this when we go on and implement our category so i've added all the country all of the sources so we're gonna implement this later but for now we're gonna focus on this so this is the base url and i've created a function for getting the news so it's gonna take the category and it's gonna take the country so by default i've put india for now because this is where i live so you can put the name of your country and inside of this it's going to return us with the api along with the category and country embedded in the url with the base url and here's this get source apis function so let's go on and implement this so for this i'm going to use something called context api so i'm going to create a new file over here called context.js now i'm hoping you have the knowledge of context api but if you don't have the knowledge of context api you can go ahead and watch this video where i've explained whole context api and how you can use context api in react or react native so but if you don't want to watch that video it's okay i'm gonna explain everything in this video also so let's go on and create a new context so i'm gonna say export const and create context so create context will be imported from react now below this i'm gonna create a function for context instead of this i'm gonna return context dot provider so this is how we write the context api and we want to wrap the whole app inside of this context.provider so we're gonna do this we're gonna take the children from here children and we're gonna add this right over here so let's go ahead and export this first of all so export default context and we're gonna take this and wrap whole of our app.js inside of it so right now you see export default function app so i'm gonna remove this and below this i'm gonna write export default and i'm gonna write context let's import this context so there we go the context has been imported and inside of it i'm gonna write app and now we are exporting the app along with our context so let's see i hope everything is working fine nothing broke yep app is working fine now let's go back to the context.js a return statement is missing oh okay so here we are supposed to write a return statement return yeah now it should be fine now let's go back to the context okay i think we need to import react as well oh oh wait wait wait wait i got it so i'm not supposed to name this context.provider i'm supposed to name this news context dot provider yep now it's fine so that was my bad okay now it's working so whatever the name of this context that you have created you're supposed to write that over here and react is also going to be needed now inside of this i'm gonna create a few states so first state will be for our news all of the news are going to be inside of this state so initially it's going to be an empty array now we're going to create a state for our categories so categories or maybe i'm going to name this category because it's going to hold a single category not the multiple and this is going to be by default let's say general because general contains all of the general news so i'm gonna name it that and i'm gonna create so i told you i am going to create this index inside of the context so i'm gonna take this state and i'm gonna add it over here so we're gonna export this as well now how do we export all of these states okay can't find variable use state we have to import use state from react all right so now with the use of context api we can access all of these variables in whole of our application so how do we export these variables i'm gonna say value over here and inside of this i'm gonna write all of these variables which i'm gonna use so i'm gonna use news i'm gonna need index set index and a function which i'm gonna write over here const fetch news so notice how i fetch all of the news with the help of this function so i'm gonna write cons data equals await so this is going to make the api call so this is going to be async await function so async function and await axios dot gate but wait we haven't installed the axios yet so let's put the axios on installation npm install axios and now meanwhile that's installing let's write our code now instead of this axios.get what we want is we want the url from where we are going to fetch so all of the url were over here so we're going to use this url get news api so it's going to return us the category that we want and the country that we want so if we go back to the context i'm going to write get news api and import it right over here just like this from api and inside this i'm going to provide the category which we have created the state of over here category and the country is optional because we have given the default over here um yep you can see the country is by default india now after this data is fetched what we want to do is we want to set the news with the data we want all of the data that came through this api to be set in this set news and we want to set the index that is whenever we want we are fetching the news that is whenever we are changing the category or we are changing the source what we want to do is we want to go back to the news screen so news screen is going to be the number one so this screen all news screen so i'm gonna set the index to one so now it's gonna give us error because axios is now installed so it's gonna complain so for that i'm gonna comment it out for now and let's first i'm going to demonstrate you how you can use this context so let's import this index and set index and this in short tabs so i'm going to remove this and how do we use this context i'm going to say use context hook and use context hook will be imported right over here and i'm going to write const it's going to provide everything from that context but first we need to take that context which is this one news context so i'm going to write news context inside of this and import it you see right here so we imported the news context and now inside of this we can import whatever we want so we have imported index and set index oops set index will have small s yep and you'll see that our app will still be working fine yep all of the index are working fine the only difference is the state is now on the top of our app so this is how we use the context api so let's see okay axios is is still installing so let's wait for it yep there we go it has finished installing now i'm gonna uncomment it and import the axios just like this import axios from axios and i'm gonna send this function to the app okay i think we have some error undefined unable to resolve module axios from this uh maybe we need to restart our app since we have installed axios i don't know okay let's restart our app all right so i've restarted the app successfully and now it seems there are no errors so what i'm going to do now is i'm going to add a use effect and you already know what use effect used for whenever the component loads use effect is going to be run or whenever the component updates so if we add anything in the dependencies so let me show you if we write anything inside of the dependencies whenever this changes use effect will be fired if but if you don't write anything inside of use inside of the dependencies then it's going to fire use effect only the first time so what i'm going to do is i'm going to take this fetch news by the way you need to import us effect from react and inside this i'm going to write fetch news i'm going to call fetch news so it's going to be called whenever the app loads and whenever we change our categories all right so now that i've added fetch news over here let's take this fetch news and now let's go on to build our news screen the most important part of our application so i'm gonna go to the news screen component and first of all let's do this let's say const use context and i'm gonna import all of the news from there so news context so everything is imported as you see and i'm gonna import news and articles so now let's go ahead and log it let's see what do we get inside of this if i go and console.log this let's go to terminal and you see right here we get this json if i do this right here yep you see we get this json with title oops yeah with author content description published at source title url of the source and the url to the image awesome so let's go ahead and use this data and render it into our screen so i'm going to remove this console log and right over here i'm going to use something called react native snap carousel i'm going to search react native snap carousel and click on this first result and now you see over here we have different different types of carousel over here so we're going to use this carousel in our news screen and we're also going to use this carousel in our categories screen but that's gonna be later so let's see first we're gonna use it so it has multiple different variants as you can see right here so what variant we're gonna use is stack so let's go down a little bit so here we go this is the type of variant that we are going to use stack so let's go ahead and first install this so let's go to the terminal i'm gonna open another terminal type npm install react native snap carousel right so i was trying to install this by doing npm install react native snap carousel but it wasn't working so i went on and did expo install react native snap carousel so if you also are not able to install with npm install you can use expo install and react native snap carousel it installed successfully now let's go and build our news page all right so let's go to the documentation and see how we can build this it has this carousel tag that we can use and all of this ref the data that we are going to provide it render items slider width and item width okay so let's go to the app and i'm going to remove this view or maybe inside of this view i'm gonna write the code i'm gonna say if there are articles so articles and so if there are articles do this we're gonna import carousel from react native snap carousel let's see yep it's imported so we're gonna write layout so what kind of layout that we need we're gonna need the stack layout yep there we go now we're gonna provide it the data so data will be articles and for now let's keep the ten articles only so that we can test it out so slice i'm gonna slice it to ten articles 0 comma 10 yep after that we're gonna provide it slider height which will be 300 pixels i'm gonna explain what the slider height is first let me just render this up item height what the item height is so item height basically means what the height of the news one single news article will be so item height will be the window height so where will the window height come from i'm gonna import dimensions from react native and dimensions dot get we're gonna get the dimensions of the window so window dot height we need the height right so window height so this is gonna be added right here in the item height now we're gonna tell it if it's horizontal or vertical in our case this is vertical right so we're gonna say vertical oops vertical to be true and then after this we're gonna have a render item so inside this render item we're gonna render the how the one single item is gonna look like so we're gonna make this in just a second but first let me add on snap to item that means whenever we scroll this it should snap to one single item so on snap to item is going to have this so this is i just implemented all of this by referring to the documentation so on in documentation it was written that you have to do it this way so for index we're going to create a new use state so that it tracks the index of this thing on which a current item is active so active index and currently i'm gonna give this initial as nothing so set active index to be index so let's see if we use if we want to use this later i just added this because it was in the documentation so okay what's wrong oops so we wrote it like this empty so that's why this is giving this error all right now we're gonna create one single component inside of this right so what i'm gonna do is but first let me give this a little bit styling i'm gonna save you style equals styles dot carousel style sheet styles with the smallest and below this i'm going to add the styles and don't forget to import the style sheet from react native i've given the background color as black and flex 1 so that it spreads on full screen so now you can i think clearly see both of the tabs all right cool now let's go on and create that single news component inside of this so what i'm going to do over here is i'm going to take index and item so item comma index so this item is one single item inside of this articles array so this article so this is just like a map right here if so in the previous video i've explained the flat list in react native so this works just like the flat list so inside of this i'm gonna say single news and to the single news i'm gonna send item and the index and now it's going to give us error because single news does not exist so i'm going to go ahead inside of the components and create a new file single news.js and rnfe yup just like this and here we're supposed to receive oops item comma index awesome now here for just the demonstration purpose what i'm gonna do is i'm gonna write item dot title let's see how does this look first let me import this as well so okay this was not imported why okay let me manually import it no worries import something from dot dot slash component slash single news so i'm gonna import single news from this component and now let's see how this this looks like okay we can't see anything probably because this text inside of this is also black so let's just give this some styling style styles dot title styles dot title yeah comma style sheet let's import style sheet and right over here const styles equals style sheet oops style sheet dot create i'm gonna write the title styles which let's say i'm gonna give font size to be 25 font weight to be bold and some padding bottom to be ten and let's give this some color of white yep you see okay it's working but there's something wrong did you notice this is upside down see what we want is we want them to come from the bottom but we want them to be at the back of this thing so wait let me show you so if for this view if i give this some styles so first of all i've given this view some dimensions of window height and window width just like this and added the height and width over here just like we added in previous component by importing dimensions so now you notice carefully this is coming from the forward but it's going upon this on top of this we don't want that we want them particular screen to go back and then for the second screen to come from the back not from the top so what are we going to do about this let's see we're going to go to first of all let me just give this some background color of let's say red let me give this red i know it's not gonna look good so now you notice did you notice it's coming from the top this is not what we want let's make it upside down so if we go back to the new screen and in our carousel i'm going to write a transform property and in transform property i'm going to give this a scale property scale y k l y and this scale y is gonna be -1 so that it gets upside down so let's save this yep you see if i do this yep this is what we want we want them to come from the back this is what the role of stack is right but now we have another problem there's these but this single news screen is upside down so i'm gonna take this this and go to single news and i'm gonna add it right over here and save this now you see now it's perfectly fine now if i try to do this yep it's absolutely fine awesome let me remove this background color yeah so right now it doesn't look good but don't worry we're gonna make this a little better when we add images and all so let's go inside of this view and i'm gonna add the image so i'm gonna add this image tag move this to the side so i've added this image tag and this is gonna come from react native just like this so this will have the source inside this we're gonna give the uri so uri will be item dot url to image we saw that in the json that was console logged earlier so url to image and we're going to give this some styles some height of 45 percent so we want this to come on the half of the page resize mode to be covered because it doesn't want this to get stretched or something and we're going we're going to give this width of window width which we had calculated right over here let's save this if we scroll yep that looks much much better now we need to make this even more better don't worry we're going to make this better so after the image we're going to have the title yep that's fine title is in the right place you know what instead of giving the color over here i'm going to give the color over here because later we're going to use this in the dark mode style star title comma color black or white let me make this white yep that's fine now below this i'm gonna add some description so just like title we're having item dot description over here inside the text tag and i'm gonna give this some style dot content which i haven't provided yet so let's go over here and type content and i'm going to give this some font size and padding bottom of 10 just like that i think i should give this some background color in the single news i'm going to give this background color oh wait a minute we're not gonna give this background color over here i'm gonna wrap everything below the image into a view and move it inside of this view and i'm gonna give this styles.description and some background color of this so now you see this is gonna look good yeah as we go on and add more content it this is gonna hide the content behind that so below the description we're gonna add the shorts by thing so i'm gonna add another text tag for writing the shorts by part so short by and let me give this styles as well style color to be white and instead of this i'm gonna add another text tag where we i'm gonna write who has written this short so i'm gonna say item wait insert curly braces item dot author if there is any author third question mark if there's any author then write the author wait i'm gonna add double question mark so it's gonna check if there's any author then it's gonna display the author otherwise it's gonna say unknown so yep you can see short by hindustan times okay i need to give this a space as well oh yeah now it's fine yep so short by this thing so short by unknown shot by pti cool now below this i'm gonna add the link on which we can click and visit where this belongs so i'm gonna say image background i'm gonna import it from react native inside of this i'm gonna give touchable opacity and inside of this i'm gonna give text so let me write this real quick and let me explain this to you now okay so we're getting this error because we haven't provided image background and image we are supposed to provide it some image so i'm gonna provide this the image that is on the background or is on the news image so wait i'll explain you so it's gonna have blur radius of 30 some styles and some image so if i save this you're gonna notice oh wait a minute i think we're supposed to give this styles first because it's saying that it needs width and height to work properly so let me write the styles for this some height of 80 pixels some width of window waste that we have already written up right over here so i think i'm going to take it outside yep so it's accessible over there as well some bottom of zero some background color and some justify content of center and padding horizontal is going to be 20 so yep right over here so now if i go on and click on this you're going to see that it takes us to the browser i guess let's see okay we i haven't added the on press yeah of course so on press i'm gonna say callback and i'm gonna import another module called linking from react native dot open url open url and i'm going to provide item dot url to it so linking as you can see is important from react native so now if i click on this you're going to see that it takes us to the browser yep awesome let's go back okay there's some issue i think over here why is this right over here they shouldn't come over here i think i'm supposed to give this description some extra styles yep i haven't given this styling over here your description is gonna have some padding of 15 so that it looks good and some flex off one so that it spreads on all of the remaining screen yep awesome that looks much much better so if you have done till over here make sure to give this video a huge like because i know you are really excited for what's about to come next and that is the discover screen where we will add the search functionality the categories and the source awesome so give this video a huge like now let's move forward to discover screen let's swipe to the left and let's go to discover screen but first let me explain the api which i already have but let me explain you again so this is going to be used for fetching the category wise news and this is going to be used to fetch the catego the source wise news and as i told you earlier we have these categories with this image and the name for rendering all of the categories and all the sources that is bbc news cnn fox news and google news awesome so we're going to use all of this so inside the discover screen i'm going to remove this text now let's go here and i'm going to remove this text and for view i'm gonna give it some styles styles dot discover i'm gonna write the styles for this discover so const styles and for the discover let's write some styles which is going to be padding of 10 and some align items to be center because we want everything to be center now instead of this we're first gonna have the search then we're gonna have the categories then we're gonna have sources awesome so let's go on and build categories first i don't know what's keep happening in this emulator so for categories i'm gonna give it some text and text will have categories and i'm gonna give this text some styles styles.subtitle and color is going to be white so let's give the subtitles some style this is what we're going to give this some font size of 20 font weight of bold we're going to give this border bottom just like we gave the discover earlier border bottom of 5 align itself to be flex start because you want it to come at the start if you want to want it to be center just let it be like this just leave it to be but i want it on the left so i'm going to give this flex start and some border radius of 10. now we're going to use the react native snap carousel again just like we did earlier but first let's import the categories over here so i'm gonna use the context use context so i hope i have sent the categories okay i have not so set category and category both of this i don't think i'm gonna need categories so i'm gonna use set categories so because i'm gonna manipulate them and let's import categories from the api so let's go back and use context const so we're gonna need this this thing later so i'm just writing it so that it stays here now i'm gonna import from dot slash dot slash api slash api and what are we supposed to import categories yep all of the categories and let's import the sources as well we're gonna use them later but let's import them okay so categories right here i'm gonna add the carousel because we're gonna give them the carousel oops this got closed let me open this up so meanwhile that's opening let's write the code for the carousel so layout is going to be default we're gonna we're not gonna make any changes to that so default and data is obviously going to be categories what else is going to have inside of this render item so how is the item going to look like so just like previously we're going to give this item and comma index and inside of this we're gonna write touchable opacity and inside of this i'm gonna have image which was added in the in the data that i already showed you so let's give them some source and some style so source will be uri item dot pic and style is gonna be added in just a minute below this i'm gonna add the name for the category which is going to be item dot name just like this it's going to have styles dot name some color of white and item dot name is going to be inside of this i think we haven't given it the width and height that's the problem so let me give all of those properties to this so i'm gonna give slider width as window width and item width as slide width so these doesn't exist yet so let me write the value for them window width is going to be dimensions.getwindow.with that just like we already did earlier and slide with is going to be for one single item so i want one single item to be the one third of the window so window width divided by 3.5 that's why i've written this so can't find variables dimensions let me import this yep there we go can't find variable image okay we haven't imported the image let's see this should work yeah you see general business entertainment but why is there no image okay you item.pick so let me give this some alignment so it comes on the top so active slide alignment to be at the start okay that's fine and now inactive slide scale i'm gonna give this one and inactive slide opacity is gonna be one yep that's fine but still there are no image i think we're supposed to give this styles and after that yeah of course we are supposed to give this height and width only then it's gonna come so yeah i forgot to give this styles let's give them category image styles some height width and resize mode to contain and let's give the category styles yep oh no it was name okay so name i'm going to give this font size of 14 and capitalize text transform yeah that looks much okay we need to take care of the single item so for the single item it was okay we haven't given the style to this one i think i'm gonna name this as category style styles dot category category and let's give this category some styles some height of 130 margin of 10 align item center and justify content space evenly yep there we go looks much much better now we can scroll this up and let's give it some functionality as well so on pressing this we're gonna set the category but let's import the set category first from our context api so set category because you might remember we are setting it sending it from here so inside of this i'm gonna add an on press event which will set the category to the item dot name the current item okay so if i go on and press business watch yep it changed the type of news it's because and it redirected us to the news screen if you remember we added this set index to one so every time the fetch news is called every time the category changes it's gonna call fetch news and the fetch news will fetch the new news and set the index to one so if i go on and say entertainment yeah that's working absolutely fine let's go back okay now we're gonna work on sources so let's go back to the context uh context.js and right over here i'm gonna write the function to import the sources but first let me create the state for the sources so use state source all right so here const fetch news from source inside of this i'm gonna give a try catch and here i'm gonna say const just like previously data await so it's since i'm using a weight i have to write async here axios dot get and for this i wrote another api so over here i have written this api with hmm get source api it takes this it takes the source and returns us the news when i write get source api here import it just like this and i'm going to give this some source below this whatever i get from here i'm gonna set the news to be that data and then set index just like previously oops sorry set index to be 1 and to catch the error i'm just going to write let's say console.log error all right cool so similarly i'm going to add another use effect for source so i'm going to add whenever the source changes it's going to call fetch news from source okay cool so let's export this source from our context so yep just like that now let's go back to the discover screen and build the source part so right over here i'm going to remove this and here i'm gonna write text it's gonna have some styles subtitle because we already have you use this subtitles over here if you remember yep just like this so we're to reuse them to create another column and color i'm going to give this some color of white inside of this we're going to have sources and okay what happened oh we have to spread this so sources yep you see so did i just misspell anything oh subtitles was with the small t okay yep you see sources over here and now let me write it quickly so we're going to have a view with style of style.sources i'm going to write that in just a moment and we're going to map this sources so sources.map so since this is not going to be you know carousel so we can it's better to do it mapping so we're going to map this into a grid so touchable opacity and on press we're going to say source id is going to be the new source so we have to import this from over here from our context yeah and inside of this we're going to have the image uris dot pic so if you remember inside of the app inside the api file i wrote this pic so we're gonna use that pic and the style which i'm gonna write in just a moment some source style source image style okay cool let's save this it's not gonna look much prettier now because obviously it's not going to display anything since we don't have the image itself so let's write the styles for image first so i'm going to keep height hundred percent border radius 10 and resize mode is going to be covered so it doesn't stretches so but let's first write this as well um this source styles for source says and this these are going to be flex direction row flex wrap as wrap okay so i haven't given this source container styles that's why this was crying i'm gonna keep the height as 150 and width as 40 percent of the screen some border radius of 10 margin of 15 and some background color so yep you see right over here so let me explain this to you so sources is the parent component so i'm giving this some flex direction of row and flex wrap of wrap so that they wrap into the other line some justify content of space around so that they have space between them and then instead of it we're gonna have a source container with all of these styles and some image with the height of hundred percent i'm giving this hundred percent because our source container already has the height of 150 awesome so i hope you understood the functionality as well so on press we're setting the source to s dot id and whenever the source changes it's gonna change the new so if i click on cnn you're gonna see short by this name and cnn all of these are going to be cnn news also i noticed i haven't given this button the functionality the reload button so what this button will do it's going to reload to the normal all images all news part so let's go to news screen or top navigation i believe let's go to top navigation and here on this reload i'm gonna give this functionality you see i told you i'm gonna tell this later so fetch news where is this gonna come from it's gonna come from the context api so use context news context it's gonna have fetch news and yep just like that so if i click on this now did i send fetch news from the context yes i have oh okay wait a minute so over here i'm supposed to give this you know the reset prop which i haven't so let me give that so i'm gonna give this reset equals category which is gonna come from there and i'm gonna set this reset over here now let's try this up so if i set it to be entertainment and now press on reload yeah it's working absolutely fine awesome so there's that and so what's remaining yep search is remaining and this dark and light mode functionality let's go back to our discover screen and here i'm supposed to write the search right over here so for search i'm going to create another component search which does not exist yet but i'm going to make this inside of the components i'm going to get a new file search dot js rnfe press enter and insert this first of all um we're gonna have the context just like previously so let's import the context and news context and articles and then we're gonna have three states inside of it which is search results model visible and current news so for the search thing we're gonna use a model so if we click on a single search result it's gonna display a model it's gonna pop model is gonna pop up into our screen which we can close it by pressing on the cross button so wait a minute i'm gonna show you just a second whatever the news results are right now we're gonna search among them so i'm gonna create a new function here or let's go on and create the ui first so inside of the view i'm gonna first give this view some styles which is width to be hundred percent and position to be relative and instead of this i'm gonna have a text input because we're gonna input something from the user over here so input is gonna have some styles styles dot search oops not style sheet styles dot search and i'm gonna have some background color of black and color of white let me import this search so that we can see that in real time so search yep it's imported save this and should appear right over here what's wrong okay i guess there's some error so can't find variable use state obviously we haven't imported that so let's see and confirmable styles yep of course we have to styles equals style sheet dot create and don't forget to import the style sheet okay there we go we have this input component here the text input component let me give this some styles which is going to be padding some padding vertical and horizontal some border radius at the side some font size and some margin bottom of 15. now it looks better awesome let's give this more stuff now onto on change text so it's it has a property called on change text which will say which will give us the text and we can handle search in the text so handle search is going to be a function which doesn't exist yet so const handle search and handle search it's going to take a prop which is going to be text and it's gonna say if the text is not there and set search results to be empty and return otherwise set search results to be articles that we're taking and we're going to search amongst those articles dot filter i'm gonna say query and we're gonna filter and compare it with the title so if query dot title includes the text that we are trying to send from there so this is how the search functionality is gonna work and after that we're gonna have a placeholder and some placeholder text color will be white otherwise it will be black by default if we don't give this now below this we are going to have a view so view and this view is gonna display our search results so i'm gonna give this some styles search results so this is gonna be on the top of these things right so it should be of position absolute and z index to be one so that it stays on the top and top to be 50 so that it comes still here it starts from there okay so inside this i'm gonna say yeah so notice this try to understand this okay i'm gonna comment this out for now okay so notice this now try to understand this let me import all of this stuff first text opacity okay everything is important now what i'm doing over here is whatever the search results that i'm getting from here i'm gonna render them over here so i'm gonna just render ten of them top 10 search results so 0 comma 10 map and i'm gonna render attachable opacity i'm going to render the list of touchable opacity i'm giving it the key because obviously in the map we have to give a key active opacity is 0.7 means when we click on this it's gonna get a little bit less uh in the opacity and inside of this i'm giving text which is gonna have the style of single result so let me give this style as well so right here single result and it's going to have background color black and color of white and the title is going to be the title that was in the search result so now if i go on and type something let's say p yep you see and if i click on this you see the opacity is decreasing and on press of the single opacity we're gonna handle model we're gonna call this handle mode function which will pop up a model with the single news component let's write this handle model function so we have already written this model visible so i'm gonna write it right over here as set model visible to true and set current news to n so whatever that was set and i'm gonna set the current news to end so that it pops up with this particular news and handle model will be set to true now let's see how we can implement this model now right below this thing i'm gonna add the code for model now this model is gonna be imported from react native so model and press enter e let's see yep imported model from there and inside of this i'm going to give this some few properties like like animation type so animation type will be it slides from the bottom so i'm going to give this animation type as slide and transparent is it going to be transparent yes it is gonna be transparent so true and visible so visible is gonna come from modal visible state that we created either it's true or false if it's true then the model will be visible and it's gonna have on request close on request close it's going to take a callback and it's going to set model visible whenever we want it to be closed so on model visible it's going to oppose it so if it was true it's going to be false awesome so now inside of the model what what are we going to write we're going to write this stuff so i'm i'm pasting it over here just to save the time so that the tutorial doesn't get too long you know so instead of this i'm writing a touchable opacity a button which will like basically it's a cross button if we click on this so we are importing an icon as well from this encoder let's import this and type yep it's imported so it's going to be basically a cross circle with cross button and so this is wrapped in touchable opacity so its position will be absolute so that it appears right at the corner their index will be 1 write 0 and margin will be 20. and below this we're gonna have a view with the single news and since remember we gave single news this scale y property of minus one so obviously it's gonna be upside down so we're gonna make this back to upside up basically so that it appears normal and height is hundred percent and item will be current news remember we set this current news over here now give this handle model to here on press event let's test it out can't find variable single news okay let's import this let's see now can't find variable dark theme oops we haven't implemented implemented dark theme yet so let me remove this let's see if i click and write anything and click on this yup you see it looks much much better okay there's something wrong over here i think i haven't given the styling probably so what we can do is we can say 40 or you know margin 20 so margin top to be 50. yeah that looks good if you press on this cross button so you can customize this according to your system oops i think i have to give this z index of two yep that's better so we have successfully implemented the search feature as well awesome now this definitely deserves a huge like because literally 99 of our app is completed the only thing that is remaining is the dark and light mode so give this video a huge thumbs up if you haven't given it yet and also subscribe to the channel now let's go on and implement the dark mode the moment you've all been waiting for maybe so let's go to context.js and i'm going to create another state so use state use state of dark theme and by default it's going to be true so it's gonna be dark theme by default now let's export this over here in the list of values let's go to top navigation and i'm gonna add the functionality to click on this thing and change it right over here yep in the touchable opacity i'm gonna first of all i'm gonna import it from this context api so set dark theme i'm gonna add an on press function here just like this so if the dark theme is dark it's gonna turn into light if it's light it's gonna turn into dark awesome let's find all of the places where we are supposed to implement it so let's start with app.js inside of the app.js we had this background color so we're gonna say if the dark theme is true then do this color otherwise do white but for that we have to write const dark theme from use context news context i think this should work let's try it out i think this thing is hidden behind all of this color so maybe that's why this is not showing up so let's take this and make our header as dark and light theme so inside of the in shorts tabs and inside of top navigation i'm gonna get dark theme yup i already have let's put it here first or here first let's try this out okay this is clearly not working so something is wrong oh it is working now awesome i think i haven't saved the context part so let's see oh yeah now it's working yep i didn't save the context so let's do it for others as well let's go down this color is gonna have dark theme of light gray if it's in the dark theme it's light gray otherwise black let's see oh okay this doesn't have any text so this is not gonna work so let's make it work over here because this is the discover right here i'm gonna replace this with this and save this yep discover is working now i'm gonna make the other one work as well which is this one dark theme is there then white otherwise black yep there we go much better and now to this one i think yep all news yeah that's fine it's working fine okay this is that one so this is going to be light gray so let me go over here yep that's awesome so all of this is working absolutely fine awesome so we're done with the top navigation let's move further so we're gonna go to discover screen now and take care of this i'm gonna take dark theme from the use context and if the theme is white so color here i'm gonna change this to black if it's light mode yep there we go so i believe it's here as well yep if it's the if it's dark theme then white otherwise black let's see yep that's working now for all of these right here so yep this one item name if the dark theme white otherwise black cool and i believe we are done with the discover screen let's go to new screen and i don't think there's much in here so i'm gonna go to single news yep here we can do something so const let's import the dark theme so use context news context let's use this dark theme over here first of all in this background color if the dark theme is there then this color otherwise white so let's go to all news yep it's white now so we're gonna make this colors better let's paste this dark theme on both of those and here as well yep it's appearing over here and i guess that's all for news screen what else is left i think the search yup search let's go to search import dark theme and try it over here for background color and color for both i'm gonna add these so if this dark theme black otherwise light gray and same for color as well similar for placeholder text so placeholder text so right now you can't we see it clearly so we're gonna make it gray if it's light theme in our search results let's paste this and let's check it out if i type p yep we see all of them in the light mode if you press this all of them in the dark mode awesome it's working absolutely fine if we set light mode oh okay yep awesome all right so you successfully added the dark and light mode effect in our application so now let's quickly go and deploy our app so what i'm gonna do is i'm gonna go to chrome so we're gonna use a similar technique to deploy it just like we did in the previous video so go to export.dev website and if you already have an account login or you can click on sign up i already have an account so i'm gonna go ahead and log in so i have logged in successfully now what i'm supposed to do is let's go back to our terminal and all right first thing you what you need to do is go over here and insert the assets i've provided you the few assets for the app for example this icon.png oops not in here i mean in the github go to github here in the assets i have provided favicon of the in shorts clone i've created this custom icon for you all this icon.png a splash screen as well which is this one whole splash screen in short clone splash screen so all you have to do is download all of this stuff and replace also i've included a photoshop file if you want to customize that so just take all of this stuff and replace it in the assets folder and then what you need to do is go to this file right here app.json inside of the project inside of the project we have app.json so we are supposed to tell them that all of these items are located over there so already we have these things written over here like assets and splash screen as well adaptive icon favicon so everything is already here so i believe you don't need to do anything but still if there's something different just compare it once with this file so that's all for the configuration now let's quickly go and deploy it so i'm gonna kill the server type expo build and whatever platform that you are building this for so i'm building this for android so press write this and press enter it's gonna ask you to log in into the expo but i believe i'm already logged in so it's gonna start the project building so also in the app.json you can configure the name of your app and everything before doing this stuff so name and slug i haven't done anything right now so you can do that it's gonna ask you again what would you like your android package to be so i'm going to go with the default if you want you can change this in this fashion com dot view eon dot whatever the name of the app so it's going to ask if you want the apk or the app bundle so i don't want to publish it to play store so i just want the apk so now it's building optimized bundle and generating source maps and quickly you're gonna notice in the website here that it displays something like this in shorts clones so i've already built this beforehand so let me show you how does this looks like if you go over here it's gonna show you building over here something like building and stuff so let's wait for this i'm gonna show you so you see it's uploading javascript bundles and let's go back and refresh this page and you're gonna see an in shorts clone tab over here and it's gonna display that it's queued and it's currently building so after a while it's gonna be completed and it's built so i think you can close this server for now and it's gonna build and let you know whenever it's completed if we go back let me show you the already built page which i've already completed so here you can click on this download button and download your apk and share it with your friends and family or upload to play store so that's all and i have a homework for you so if we go to the app and inside the api.js we have this country json as well so what i want you to do is i want you to implement this country json i want you to implement a drop down or something like that in the app where you can choose the country feature it's going to display all of these countries and you can use this code and call this api you can pass the country along with the category over here like this oops not here here comma country something like that so i want you to do this so that's all guys thank you all so much for watching this tutorial if you like this video just give a huge fat thumbs up and subscribe to the channel it takes just few seconds of your time and it motivates me a lot to make videos like this so if you go to youtube.com slash roadside coder and just click on the subscribe button also if you want to support me more just click on this join button and you're gonna have features like this awesome emojis you're gonna have access to new videos earlier members only live stream and also you can have one-on-one call with me so you get all of these features it's not compulsory it's just if you want to support me you can do this so thank you all for watching and i'll see you in the next video bye bye

Channel: RoadsideCoder

Views: 3,605

Keywords: News App React Native, React Native News App, react native tutorial, react native app, react native, react native beginner projects, react native beginner tutorial, React Native Project Tutorial, react native context api, react native news app tutorial, react native news api, react native project from scratch, react native projects for beginners, react navigation in react native, Inshorts Clone, Inshorts Clone React Native, React Native Inshorts Clone

Id: 5Ko7B3G4U04

Length: 87min 34sec (5254 seconds)

Published: Sun Sep 26 2021