React Native Mock Interview with a Senior Software Engineer

hi everyone today we are doing an interview in react native and I have my guest here Tony and also who's gonna be interviewing and today we both interviewed a lot of people and had had interviews both in react and react native and those kind of interviews are those like practical interviews which test your day-to-day uh capabilities of how you like perform certain paths are becoming more and more common in the industry so decided to do this quick interview to share some tips also do some coding live and um yep see if it's helpful for you okay um Tony would you like to introduce yourself yeah hello everyone Judy um thank you so much for having me so my name is Tony I've been a mobile app developer for roughly four or five years now um started out as a chemist actually so study that in school transition over to full stack development and then kind of pigeonhole or sorry rather organically transition over to Mobile so if anybody has any mobile questions uh more than happy to help please let us know in the comments okay so the format of this questions about topics and your challenges that you have and then we're gonna dive into coding so let's get started with tell us why are you applying to web recorded animals um I mean to be honest I have known Judy for a while now and she first told me about you know starting the channel no I was genuinely excited and you know happy for her to take on this new Endeavor so um pretty exciting space to be honest just being able to share content share knowledge information you know and this is definitely not a one-way Street at all right so it's meant to be a more collaborative uh effort between us and of course viewers via comments or otherwise so yeah really excited to be doing this yeah and I actually will Tony was the one learn reacting in the first place and I did learn a lot of Concept in the reaction react from companies so I guess it's interesting to help testing knowledge but okay so I can start with the questions itself can you explain how does the data flow yeah so one of the popularities behind react is it's a one-way data flow so um when we're talking about react or react native applications data just goes one way in One Direction if you watch the data not to flow in one way only I guess you use State Management so in terms of State Management called the Ducks so what's your experience yeah so um Redux um really was popular back in 2015 or so um and one of the benefits of it is that it markets itself as a state management um process or state management manager container um and since react itself is just a vast tree of the different components the State Management helps you such that you don't have to pass props right throughout the different components which can get really messy easily so what Redux does is that everything falls under one single entity this one a giant object and really any part of the components can reach up and sort of grab whatever information it needs to to render um and then as a student mentioned about context so this was sort of a um a spin-off of Redux in the sense that it got more fully integrated into the react Library itself and context is in a similar vein you know as as the the name suggests it provides information for any of the components that consumes from the context so um you'll see often the code where when you have context you have the sort of the provider side which is just another it's meant to be the uh the mechanism through which the components can go and either you know put information in or extract information to render great answer um all right so now we're going to like conditional rendering how do you handle these like ternary operator for it to use like like to add you know that science or yeah so I guess one of the the nice things about you know the conditional rendering is that you can treat it really like any any conditional statement right so if you think about just the rendered components as like I I always like to imagine is you know different boxes that exist on the screen um or the the mobile application and depending on the the condition we can say either yes render this or don't render it so for example like a login button or even the text on the button if we want to say log in Okay then if you know some condition is satisfied present the login on the button text if not then say log out right for the authenticated user uh so really yeah it makes it uh very easy to to build that logic directly into the UI where you you do create your components as the different just like any piece of code uh and then this is react native question uh what is differences yeah so you know as I'm sure everybody has a mobile app mobile phone device uh and oftentimes because uh there's some spotty internet or really like no internet connection at all with this offline first application is that Paradigm where you can use your phone and interact with any of the apps without an internet connection so some of the the really great players and this is uh for example slack communication app uh company they they do a very good job with kind of catering to the users in a way that you can you know type out your message even press send but in reality the message hasn't been sent yet because obviously due to the lack of that internet connection but then once you're online then the message is automatically sent out for you and just to dive a little bit more into this concept there's different various packages and libraries out there to help set up your application such that it is it can offer an offline capabilities so users don't always need to have an internet connection to use your application um and sorry one last thing is that really in a nutshell it's just having a local database set up on the on the phone um and then storing whatever information grabbing whatever information and passing that around okay um and then this is not an interview question but is there any tips usually you're enthusiastic you have any questions but is there any tips you'd like to share for the audience whether it's for interviews in general or the job search yeah um I guess when it comes to job search just show your passion um things throughout you know all the jobs that I I got was really just showing that hey you know I I know what I'm talking about and be this um showing that it's not just you know I memorize something and then just regurgitate it out or rather oh cool like you know I'm actually interested in these Concepts or these topics and I can talk about them be excited uh to talk about those things okay so test I mean problem number one I just sent you a link to uh API uh can you fetch the data from the API when the page so that that's the URL yeah so just leave it down here um and then once you you fetch the data just console log it so we can go sure so uh here is the the data um so one of the apis provided is called Fetch in react native so pretty straightforward I'm just going to copy this and put it here change out the URL and um as the example showed you know you can put in different um parameters if you wish but to handle the response you use this promise base form so just copy the whole thing change the name and then just take this part um you want to make sure that you know when the response comes convert it to Json and then instead of returning we're just going to console log for now um and of course to catch any errors there are there are to be any so um to let's see if we want to so debugging is similar to react in react native where we can pull up the console in uh in your browser and then um all of this is information for the native parts of the app let's get rid of those and then if we refresh oh I bet I need to actually call the endpoint forward to to make the fetch yes so when you're calling where are you like doing that oh uh so I mean for now I'm just for now I'm just calling it directly within the component so here we have this app component and when it renders going from top to bottom um it'll just invoke the this method and of course render knowledge return come on um actually not vlogged out oh there it is okay yeah so that took a while but so here you know if we blow us up a bit um this is the array that comes back if we look at the first item you know we have the category description etc etc okay um so I guess for the next step would you be able to display like create a list and display just the title yeah yeah so you know here we use the fetch API so there's another one called Flat list in react native so this is probably one of the more popular list components it really provides a nice subtraction for you to uh render all kinds of lists so here in my component so before we jump into flat list I guess sure so before I actually render the list for now we just console log what came back but you know part of react is or rather react provide these hooks that can be used to store information so here I'm going to say this data and set data we're going to use state to capture the data that's returned here and make sure to do the Imports so react also use state and you know before I was just calling the endpoint here but there's also another one called use effect which can help us to um actually invoke the function when the application or when this component is launched so I'll just move this down oops okay so within my use effect I'll be invoking this function okay and then when does the user flag run when the application marks right yeah so use effect runs at every every cycle so this is basically a catch-all for your react lifecycle methods for for those that are familiar with those um but think of it as just something so this function inside use effect is invoked every single time um you know when anything changes to the component foreign logging I'm just setting data so that this data variable is the Json and the state of the variable um will kind of I guess what type of variable is it it's object array yeah so this is an object or because uh here I'm initializing the state to be an object cool so coming back here to the flat list I'm just going to go ahead and get the template from documentation again making sure all right report just ignore the click oh sorry about that it should be that's my mistake okay um and then so here the data again we're setting the data to be this we also need the render item which is the component that renders each item that comes through so grab that and then so before we saw that each element is an object that contains the title property so here I'll just use the text okay and yeah that should do it so yeah yep grabbed all the titles for each for each element and surrender that in in its own row obviously no CSS yet but yeah um okay so for the next part let's make this more like Shopify on the style or Instagram where you have an image title and the description maybe if we show title and the price level so okay so show image description oh is the other one image description the price price okay so um so here in our render item you know we just have the tech or the title for now we can also show the image using the image tag this is provided by reacts react native sorry this is um so in react native The View tag is equivalent more or less to div on the web and then here an image takes the source that's R rather let me um what we want is image that fetches from so okay so these are just m points to jpegs so here we can build this back let's set a reminder um is it yeah the URI so here yeah just copy this okay and uh so for the URI it would be item Dot is it called image oh man it's not fine so go up here and acquire that um I think for image specifically you do have to specify the style so here yeah so here we'll just do like 10 and 10 for now yeah and there's like super tiny so blow that up a little bit and there we are nice yeah okay let's do the description of the price sure so title image for description again I'll just put it in a um put in a text tag so in the description and then finally the price say that and there we have everything displayed great okay so this is the last part of your interview and in this part we want to give users ability to add new products so there would be like a little in input a box or like for at the top of the list where it would take the French Fields required for the product and then are you like um as for the API to make the call so what the editing would do to sign the request for the request I in the chat message the what URL you can use um and yeah the main team post reports do the same endpoint oh gotcha okay sounds good uh let me support this to another method we'll call the question [Music] okay great uh ignoring the sort of alignment code alignment for now um we want to do is [Music] for oh okay let's put this at the top you need some input so next input again this one takes some properties which will fill out later but for the simplicity so we don't have to duplicate you can have price in other categories hard-coded just have like title that you yeah for sure let me double check that okay so text and button are imported um back here to documentation so [Music] let's see copy these parameters for text and put [Music] so I'm just going to clean up a little bit where I Collapse the methods that won't be used [Music] here we have our text input um so earlier you know we were talking about having setting use date to capture a day so here likewise we want to make sure we capture the input that is our in so I use again state because it's text we'll set it to an empty string for now so I'll change text let's say so every time a user types something we'll update that input is the so placeholder we'll call it title [Music] so I guess this is one of the interesting aspects of it is the keyboard type so if you guys notice you know on your phones you have different types such as numbers or the full keypad itself [Music] if we get rid of that I'll just default to the generic keyboard save that fix any issues so here for my button again coming back to documentation [Music] let's look up foreign [Music] [Music] then on press here we were calling this method foreign [Music] button up here [Music] text input okay so I do need to put some styles in so that it'll show up for now [Music] foreign title so draw in subtitle and then coming back here into submitting [Music] products we want to make sure that we title takes on the value of our input [Music] and then everything else will keep yeah well I will keep starting everything else okay cool let's test it out so here we have [Music] a product we press submit nothing happens well because here we have well actually you might be able to see it in the console log let me come check out the debugger [Music] foreign pack um all right but we don't have to do this part I guess we're running out of time but what else so after you submit the product send the request to API what would you do next year yeah so you know some things like how flush out this app is have an automatic reload so here we have just a promise where it's console logging but we want to expand this to say refresh the screen [Music] and we can set up a listener so that it'll do that uh interested you know show that we have submitted if we refresh reload [Music] should does it not show up oh so actually that's the thing um this is not gonna register um yeah so you're always the same products oops okay so if you're continuing this is added to your current list yeah but yeah yeah great and correct in terms of like other like next steps before you deploy this what are the things you look at what's your questions and another would be let's say the least it's very very well with you yeah so it's more like sure so to answer the second part of the question uh one of the [Music] application so one of the properties for flat list is this continuous growth myself [Music] yeah so actually [Music] on and so yeah so these are these are more appropriate uh fields to to look into so basically as the name suggests on that reach so when you hit the bottom of the list you can go ahead and fetch more so that way you know you can kind of paginate your your list to to show however many as you want and fetch more when our user has reached the end to create that continuous scroll effect hello thank you so much yeah I mean thank you for the offer and you know I I would like to take a few days to consider and think things through take your time we understand yeah so it's meant to be more like just it's not meant to be a fan or anything like that right now making sure you don't if you accept the offer right away and a lot of times you get low look we get logo right in the face yep so what Pony is going to do right now is either confidence and other offers and negotiating salary but okay so thank you so much for coming on my interview how did you feel about it yeah I mean to be nervous to be honest is um but I think it's a great exercising experience So for anybody out there go ahead and give it a try it's all about stepping out of your comfort zone yeah and I so here's my feedback for you I like that what he did is that he was explaining and while you were coding or before like doing something maybe ask a question which is like very important to always even if they tell you something and you know for sure and you understand what they're telling you just to clarify because would they really are checking is that not that if you understand or not for the first time that's not important but you're checking especially for the junior developers that you're not going to build something and push something to the code that's going to like break things or it was unclear so that's what they're testing that's one thing um and yeah I think uh I really did great because one thing I would do differently would be maybe before jumping jumping into like showing things it's always good to have the stage you know create the stage first figure out where you can like set that part off and then display things but it was yeah thank you for having me the best of luck to everyone out there yeah let us know if you guys want to see more of this type of um interview life coding yeah it is

Channel: webdecoded

Views: 9,768

Keywords: reactnative, reactinterview

Id: LMCzA-DJ3bc

Length: 32min 49sec (1969 seconds)

Published: Tue Jan 10 2023