Akhilesh Mourya

Okay, would you help me understand more about your background? Yes, I'd be happy to. So, my name is [Name] and I have started my career in 2012. I also started working in iOS applications development in mid-2014. I got selected in a company called Systango Private Limited in Indore itself. So, I got a chance to work in React Native applications in 2017. In 2017, I started development in React Native. Since 2017, I've been working only with React Native technologies. In React Native, I've worked on applications from multiple domains, for example, fantasy sports applications, e-commerce based applications, social media, finance-based applications, and healthcare applications, etc. I use advanced technologies in React Native, such as TypeScript and the latest design themes, like style component. I use style components in my designs. For form computation, I use Formate. These are just examples of some basic frameworks I'm mentioning, which I've used. I've also used many other frameworks. For video calling, I've used Agora, WebSocket, and Socket.io to implement video calls. In a social media application, I integrated a video call application. Similarly, in another application, I used Socket.io along with PushKit to integrate real-time communication. So, these are examples of my profile. Currently, I'm working only in React Native mobile applications.

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 a 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.

So in push notifications, I have implemented push notifications in many applications using different frameworks. I have broadly used Firebase, which provides a service called FCM, or Firebase Cloud Messaging. I have been using this Firebase technology since the start of my career. In FCM, it provides notification services for different platforms, for example, for iOS, for Android, and for web. From a single platform, we can configure Android, iOS, and web configurations there. They provide some object files, for example, for iOS, it provides a plist file after configuration. Configurations include setting up which Apple ID will be associated with sending a notification because to send a notification on iOS devices, we must configure the APNS server, the Apple push notification server. Firebase configures with APNS, and we have to identify our Apple developer account and how we will associate that account with our Firebase account. These configurations must be provided. It provides a plist file after configuration, and we have to add this plist file to our code. Similarly, we have to do for Android and web. I have used this service so we can test notifications in debug mode as well as in release mode, of course, and handle any remote notifications. Then, when a user clicks on that notification, we can redirect the user to the corresponding page. I have also used the Pusher kit, which is used to implement notifications. I have also used the APNS server directly. I know how to implement APNS directly, integrating them at the native site, native iOS, and native Android. I know Objective-C and Java, which are used to integrate them. Thank you.

When integrating third-party native modules in React Native applications, there are several configurations. So, in React Native, if we are integrating any third-party, 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 version, which is 4.74. So any library should be checked for updates in the latest version and then they have to make their library compatible with that particular version. So they have to improve or maintain their library periodically and push their library so that developers like me can check the collaborators are improving their library day by day and they are pushing new updates, making their code compatible with the new version, enhancing the performance of that library, and releasing new functions or fabricating older ones. If they are doing this, I believe that library is very good to use, so we can use that library in our React Native code. This is applicable for each library, and we should be very careful about that. The React Native community also provides a lot of libraries, so we can also use libraries directly from the React Native community. But if there is any separate library, for example, a library from Google, we will have to integrate that library from Google itself.

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 debug by doing like this and another way is we can add console statements 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 a strictly typed environment. So we can ensure if any method requires some parameters with different types, for example integers, but in React Native, there is no integer, there is a number. So we can make sure we are passing the parameters correctly with the correct type. So we should use TypeScript to avoid this kind of situation. But for debugging, as I said, the console statement, Flipper, and there are more tools. I also use a proxy tool, ProxyMan, which lets me know how APIs are getting called, what parameters I am sending in all APIs, and what parameters I am receiving from the server. I can also add breakpoints and update the parameters to check if there is any issue. So these kinds of tools really improve the debugging to find the issues. One more tool we can use is that React Native depends on a package bundler, so we can improve debugging from there, and on the browser, a debugging tool starts. So we can inspect that and then we can add breakpoints and check each object on the browser as well by inspecting the web page if we are debugging from the React Native screen itself. So these kinds of tools I use and I also debug from the native site, from the native iOS and Android site, because maximum issues also can come from the native site. So I also check the code at the native site. There we can also add breakpoints and check the values of the objects and like that we can check.

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 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 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 are used to manage the state of the application. Redux is a state management system that is a little complex and it is advised to use if we have a lot of data management requirements and there are 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 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 set the provider at a top level and then we can access the state of this React Context anywhere in the screen. So, yeah, like both work in an asynchronous environment and I believe in complex state management applications, we should use Redux and in lightweight state management applications, we can use React Context API.

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.. 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? So, regarding the basic and initial architecture of our React Native application, we should use a theme first, which can allow our app to run in light and dark mode. We know that both iPhone and Android phones have two types of modes: light mode for daylight and dark mode for night. If our application requires different backgrounds and colors for appeal buttons for both modes, then we should use a theme. There are a lot of things to use themes. For example, I use styled component themes in React Native applications, but there are some other themes as well, such as Native Base, which provides a theme that we can use. In that case, we will have to use their components and styled components in our UI. By doing that, we can achieve this requirement nicely and manage different colors, like primary and secondary colors, if we are using a theme. These themes have their own components and allow us to use colors. If we just pass a simple property, for example, primary or secondary, they will automatically use the primary or secondary color. In our application, if we are creating a standard application, we are also maintaining these themes. For example, we are using primary colors at multiple times, so we can change the color at one place and it will be changed everywhere. Similarly, we can use fonts, different fonts, custom fonts in our applications. React Native is 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, we should create a state management layer, and we can use context, React Context, or Redux. They have their own integration, and we have to provide their providers and storage. We can also pass asynchronous methods, and we can cache all the data in our applications by caching the data using these state management tools. We should also integrate the React Navigation provided by the 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. These things we need at the initial time, and there are a lot of things that we need, but time is limited, so we can communicate this 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 for version controlling, where many developers can collaborate. For CICD, I have integrated and configured CICD in Jenkins myself for 3 to 4 projects. We can define the pipeline, mention our repository and branch, so whenever we will push anything in that particular branch, then the continuous deployment process will start 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 to AppCenter, so AppCenter, we will connect AppCenter with Jenkins, so Jenkins will create the build and we will finally upload that build to TestFlight. So, for that particular thing, we will use AppCenter or AppCenter also creates 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 TestFlight 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 this 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 a build every time, so whenever we will push our code in a particular branch, then the pipeline will be started automatically and then the build will be available on TestFlight or Google Play Store for testing, alpha, and beta testing to our testers.

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