Akhilesh Mourya

Okay. Would you help me understand more about your background? Sure. So, my name is and I have started my career in 2012. And I also started work in iOS applications development in mid of 2014, I guess. And I got selected in a company Systango Private Limited in Indore itself. So, I got a chance to work in React Native applications in 2017. So, I started development in React Native in 2017. And since 2017, I'm only working with React Native technologies. In React Native, I worked in applications from multiple domains, for example, fantasy sports application, e-commerce based, social media, finance based application, health care, etc. And I use advanced technologies in React Native, for example, TypeScript, latest design themes, for example, style component. I use style components in my designs. For form computation, I use Formate. These are just examples. These are just some basic frameworks I'm mentioning, those I used. And many other frameworks I also used. For video calling, I have used Agora, WebSocket, Socket.io, these technologies to implement video call. So, in a social media application, I integrated video call application. And similarly, in another application, I used Socket.io along with PushKit, by which I integrated real-time communication. So, yeah, like these are examples of my profile. So, currently only working in React Native mobile applications.

Sure, so as I updated in my intro call, I only use formic and along with formic there is one more library, I forgot the name of that library, I think it was U, yes, YUP. So by using both of these two libraries together, we can implement a form with validations. So YUP provides a mechanism where we can pass regex, for example, for email validation we can pass regex to YUP and they have also some inbuilt validations, for example, for email or phone number, so we can also use that. So we only have to pass these regex and initial values, like even they could be empty or they have some values. So we can pass an object of each field in a form on which we want to perform validations. So I broadly use formic and YUP together to achieve this and this is really good framework to implement a form with validation which provides a standard way to implement the form and we can manage any complex form with that. And in my last 5 to 6 applications, I am only using formic, thank you.

Sure. So in push notifications, I have implemented push notifications in many applications using different different frameworks. I broadly used Firebase, so Firebase provides a service FCM, Firebase Cloud Messaging. So I am using this Firebase technology since starting from my career. So in FCM like it provides notification services for different different platforms, for example for iOS, for Android, for web. So from a single platform, we can configure Android, iOS, web configurations there. And they provide some objects file, for example, for iOS, it provides a plist file after configuration. So configurations like we have to configure which Apple ID will be associated to send a notification because to send a notification on iOS devices, we anyhow have to configure APNS server, the Apple push notification server. So Firebase configure with APNS and we have to identify which is our Apple developer account and how we will associate that account with our Firebase account. So these configurations we have to provide. So it provides a plist file after configuration and we have to add this plist file in our code. Similarly, we have to do for Android and web. So I have used this service so we can test notifications in debug mode as well as in release mode, of course, so we can handle any remote notifications and then when user will click on that notification, then we can redirect user to the corresponding page. And I also used pusher kit, pusher basically to implement the notification. And I also used APNS server directly. I know like how we can implement APNS directly integrating them at native site, native iOS and native Android. I know Objective-C and Java as well to integrate them. Thank you.

What configurations are there when integrating in React Native applications with third-party native modules? Sure. So, in React Native, you know, if we are integrating any third-party, so the first thing is we have to make sure that third-party has good ratings and that library is maintained. Maintained means like the collaborators of that library are pushing updates periodically. For example, if React Native is releasing the latest version, like at this time React Native has published, the latest React Native version is 4.74. So any, like each library should have checked the updation in the latest version and then they have to, you know, make compatible of their library to that particular version. So they have to improve or they have to maintain their library periodically and they have to push their library so that, so that like developers like me can check the collaborators are, you know, improving their library day by day and they are pushing the new updates. They are making compatible with the new version, the code, their library code, and they are enhancing the performance of that library and they are also releasing new functions, fabricating the older functions. So these kinds of things they are doing. If they are doing this, so that library I believe very good to be used, so we can use that library in our React Native code. And this app, this is applicable for each library and we should very careful about that. And React Native community also provides a lot of library this time, so we can also use the libraries directly from React Native community. But if there is any separate library, for example, any library from Google, so we will have to integrate that library from Google itself. Thank you.

Describe your process for debugging a tricky issue in a React Native application. Sure. So in React Native for debugging, there are some options. We can use Flipper for debugging. Flipper is a tool and this is by default integrated when we create any new React Native application. So Flipper provides an environment where we can debug our code, we can add breakpoints, we can check at any particular point on any particular line, what are the objects and if those objects are not satisfying the condition, the required conditions, etc. So we can like debug by doing like this and another way like we can add console statement and we can check what is the current value and what is actually breaking something. So any issue is mainly dependent on wherever anything is required, but we are not passing the required value correctly. So to avoid that situation, we should use TypeScript, which provides strictly type check environment. So we can ensure if any method requires some parameters with different types, for example integer, but in React Native there is no integer, there is a number. So number, string, any parameter is required like that. So we can make sure we are passing the parameters correctly with correct type. So we should use TypeScript to avoid this kind of situation. But for debugging, as I said the console statement, the Flipper and there are more tools. I also use a proxy tool. So that proxy tool name is ProxyMan, which let me know how APIs are getting called, what parameters I am sending in all APIs and what parameters I am receiving from the server and I can also add the breakpoint and can update the parameters to check if there is any issue. So these kind of tools, you know, really improve the debugging to find the issues. One more tool we can use, so React Native depends on package bundler. So we can improve, we can on the debugging from there and on browser, a debugging tool starts. So we can inspect that and then we can add the breakpoint and we can check each object on browser as well by inspecting the web page, if we on the debugging from React Native screen itself. So these kind of tools I use and I also debug from native site, from native iOS and Android site because maximum issues also can come from native site. So I also check the code at native site. There we can also add the breakpoint and check the values of the objects and like that we can check. Thank you.

When would you decide to use Context API over Redux in a React Native application? So I have used the React Context API and also used the Redux multiple times. I believe Redux provides a complex structure where we have to, you know, manage a lot of state in our application. For example, we have an inventory application where we have multiple clients or customers where we have to maintain their inventory data. And maybe we are operating like multiple operations on that data on different screens. So in that kind of application, we will need a powerful state management system. So basically Redux and React Context API we use to manage the state of the application. So Redux statement management system is a little complex and it is advised to use if we have a lot of data management requirement and there is a lot of screens and states that we will have to manage, then it is advised to use the Redux. And the React Context APIs, these are lightweight APIs and React Native itself provides some hooks to use the React Context. But if we want to use Redux, then we will have to integrate their frameworks. But in React Context, we can directly use the React Context API directly from React Native itself. So React Context APIs are lightweight and easy to use. We can like, you know, set the provider at top level and then we can access the state of this React Context anywhere in the screen. So, yeah, like both works in an asynchronous environment and I believe on complex state management application, we should use Redux and in lightweight state management application, we can use React Context API. Thank you.

Explain how the setTimeout function will behave in the context of the react native functional component. Okay. Why might this be problematic and how could it be rectified? This is a react native functional component and we are going to use a path and set a timeout. Hmm. How do we do it? So, the main problem I can see here. In every second when setCounter state function will be called, so it will update the value of counter by one, like it will increase the counter value by one, means it is updating. Once it will update the counter value and we are also passing the counter as a dependency in useEffect method, so useEffect is a hook and it will check if the counter value is getting updated, then this useEffect will be redefined again. So it will redefine again and again in every second and it will be stuck in race condition and counter value will be updating again and again so fastly. So it will update the component too fast. It will re-render the component too fast and page will be stuck. So to avoid this situation, this setTimeout counter value we should wrap inside a useCallback hook. So we can pass the counter dependency in that particular useCallback hook and we can call that particular function from useEffect. So from useEffect it will be called only once and if we will wrap inside the useCallback and we will pass the counter dependency in that, then it will only update the useCallback method once the counter value will be updated. So let me think one more time about it. That could be correct but I will have to run it. But the second option could be we can simply call wrap this setTimeout method inside another method and then we can just call that method inside useEffect. So the counter will be called automatically and whenever setCounter state will be called then the component will be re-updating or re-rendering. So I am sure it doesn't require to wrap inside useCallback for this particular situation. We can wrap it inside another function.

In this react-native snippet, identify what is wrong with the way state is being updated inside the on-progress handler, provide a brief explanation, sure. Name the setCount, onPress, return add5 to count. So the problem is, in this code, we are using for loop. What for loop is doing, this for loop has static end values, for example 5, it is only updating the count value until 5 from 0. So the problem is, this loop will be executing for each value of i, so it will be executing 5 times when onPress will be pressed and each time the setCount state will be called and each time it will re-render the component, if we are using the count value in our component in JSX. So the problem is, it will be re-rendering the component for the 5 times whenever we will click and this onPress method will be called. So to avoid this problem, we should not call the setCount method inside the for loop, we can call the setCount method outside the for loop and we can take another variable outside of the for loop and then we can just increase the count value inside the for loop and finally after the for loop, we can update, we can call the setCount method. So the value will be same but the setCount method will be called only once, so our component will be updating for one time only. So this implementation would be correct I guess. And the second thing is, if we know we have to increase the value for the 5 times and we have to add a plus 1 every time, so rather than using the for loop, we can directly do like we can directly replace 1 by 5, so count plus 5 or maybe count plus 4 I think, because we are initiating the value from 0, so count plus 4 will also you know do the same thing if we avoid using the for loop, thank you.

How would you architect a React Native application to accommodate different users and permissions? Sure. So, regarding the basic and initial architecture of our React Native application, we should use a theme first, which can, you know, allow our app to run in light and dark mode. So, we know about any iPhone or Android phone. They have two types of mode. For daylight, they have light mode. For night, they have dark mode. So, for both of the modes, if our application requires two different backgrounds, different colors of appeals buttons, then we should use a theme. And there are a lot of things to use themes. For example, I use styled component themes in React Native application, but there are some other themes as well. Native Base also provides a theme that we can use. In that case, we will have to use their components. Similarly, we will have to use the styled components in our UI. And by doing that, we can achieve this requirement nicely. And we can also manage different colors, like primary, secondary colors, if we are using theme. So, they have their component and they allow using the colors. If we just pass a simple property, for example, primary, secondary, we will just write the primary, so they will automatically use the primary color. And in our application, if we are creating a standard application, so we are also maintaining these themes. For example, we are using the primary colors at multiple times, so we can change color at one place and then it will be changed everywhere. Similarly, we can use fonts, different fonts, custom fonts in our applications. React Native is basically mainly for UI designs in React Native. That is a separate thing. We can use states, we can call APIs, but this is mainly for UI, so the main concentration is UI. And for UI, there are multiple things. First thing I mentioned about the theme. And apart from that, we should create a state management layer, and we can use context, web context or Redux. They have their own integration. We have to provide their providers, their storage. So, they have one storage. We can also pass asynchronous methods, and we can cache all the data in our applications by caching the data, by using these state management tools. And we should integrate the React Navigation provided by React Native community itself to navigate from one screen to another screen, tab bar navigations, top tab bar, for anything we can use React Navigation. So, these things we are, you know, we need it. We need those things at initial time, and there are a lot of things that we need, but time is a little, like, we don't have much time, so, like, we can communicate it later when we will meet each other, and I can let you know everything about the main structure. But I have created multiple times the basic structure, application from scratch, basically.

Can you share how you incorporate CICD pipeline in React Native projects for consistent and reliable deployments? Definitely. So, I use GitHub almost in each project for version controlling, where many developers can collaborate. For CICD, I have integrated, configured CICD in Jenkins myself for 3 to 4 projects, where we can define the pipeline, we can mention our repository and branch, so whenever we will push anything in that particular branch, then continuous deployment process will be starting immediately, if we have configured the pipeline correctly. For example, in Jenkins, if I mentioned the repository, branch name, I provided the certificates, those will be required for iOS. I have logged in, for example, in AppCenter, so AppCenter, we will connect AppCenter with Jenkins, so Jenkins will create the build and we will finally upload that build to the test flight. So, for that particular thing, we will use AppCenter or AppCenter also create the build itself, but to create the build, it charges. So that's why, to avoid the charges, we can use the Jenkins machine, Jenkins software to create the build and we can use AppCenter to upload that build to the test flight for testing purposes, similarly for Android. So, yeah, we have to configure everything there, if we have some scripts, for example, for React Native, we should run NPM install or YARN install to install all of the dependencies and after that, if we have any post scripts, so we will also run that. For example, patches, we could have patches in our application, so those patches will be run after the NPM install or YARN install, so those kind of scripts we will have to mention and definitely for iOS, the pod install will be required, so that script will be required if we want to change the environment, so that script also will be required to change the environment for development and production. So these kind of scripts we will have to mention, for iOS, we have to provide the certificates or automatic signing, so we will have to provide these information, yeah, like these kind of information will be required and we can, you know, create a pipeline and then we can use that pipeline to implement the CI-CD process to avoid wasting our time to create build every time, so whenever we will push our code in a particular branch, then the pipeline will be started automatically and then build will be available on TestFlight or Google Play Store for testing, alpha and beta testing to our testers. Thank you.

How do you approach implementing custom gesture and animations in the creative app to enhance our interactions? Sure. So for critical animation, those UI designers can create. So I use Loti, Loti is a performant file for animation, for example, we want to use a advanced loading. So we can use Loti loading animation, so Loti provides its own animation file that we can use using Loti library and then we can show that loader, which is very performant, like it improves the performance if we are using other loader animations from other libraries. So basically I use animated API provided by Reagnative itself if we have to create animations, which is very different, which is not available online by providing any third party. So in that case, I use Reagnative animated library where we can implement animations like bounce animation, animations where view is coming from left to right. For example, in modal, that modal can come up on the screen from bottom to top. It pops from center and shows to the user. So these kind of animations like I can implement directly using the animated API. So I have used animated API a lot of times. Animated API also provides like different kind of animations, elastic animation, spring animation, spring and bounce animation. So these kind of animations I have implemented multiple times in my previous applications where it was required. Yeah, like it completely depends on requirement, what kind of animations we want, so I can implement that. If we want to, you know, animate with some other view parallelly, that we can also, that I can also implement that particular animation. If we want to, you know, make a view show and hide with opacity, then I can implement that animation. So like I have implemented many applications, I recently implemented some animations in Amori application. Various applications available in US market, Amori, AI dating coach application, basically. So there you can find some animations I have implemented myself. Thank you.