The React and React Native Remote meetup that was organized by GeekyAnts dealt with all that’s new and happening in light of the exciting new changes that are taking place in the React ecosystem. React Native has just rolled out latest version and the no code movement is gaining momentum as well and there couldn't have been a better time to conduct this series of talks wherein the panelists explore topics like utility props in NativeBase, JSI and Turbo modules in React Native’s new architecture, Unbundled being the future of web development and how to create beautiful bottom navigation bar animations with REA2.
The following is a summary of all the events that transpired at the meetup:
Why NativeBase Chose Utility Props: Vipul Bharadwaj
The session was kicked off with a discussion by Vipul Bharadwaj, Senior Software Engineer at GeekyAnts, about why utility props were implemented on the latest update of NativeBase and why this is a massive enhancement to the component library. He explained this via an example wherein a stylesheet was supposed to be created via button but this proved to be an issue as React Native prevented the user from importing the button due to a limitation on the pre-built components. This was eradicated by the utility props present on NativeBase which removes the hassle of creating a separate stylesheet as the models on React Native were being managed on a local state, thus expediting the development process. He also spoke about the various advantages of utility props and how they help to understand code more comprehensively through minimal compilation along with touching on how this cuts down the runtime for more intuitive and responsive development.
Introduction To JSI and Turbo Modules In React Native’s New Architecture: Ameya Upalanchi
The next talk in line was an introduction to JSI and Turbo modules which had been implemented in the latest architecture of React Native to make the framework far more performant. The speaker- Ameya Upalanchi,a frontend developer who specialises with React Native development, introduced Javascript interface (JSI) and how it has boosted React Native development by acting as a bridge in the multi-threaded architecture to ensure faster communication between the Native code and Javascript code. This was elaborated through a demonstration on the latest version of React Native where UI operations are handled by native modules by sending UI commands over the bridge for specific components synchronously for faster development. The discussion also dealt with the advantages of the newly launched TurboModule, which promotes faster modular development by only initializing and lazy loading the required component which is to be used.
Unbundled- The Future Of Web Development: Soham Shah
The following discussion on the agenda was about unbundling as the future of web development. Soham Shah delivered this informative talk by talking about the importance of bundling, the process of merging all your code and submitting it to the browser, in web development but how it can become quite a time consuming process when done in the traditional way. After establishing its importance and drawbacks, he then goes on to discuss the features of Snowpack CSS and Vite.js from a philosophical approach on how it came about while also backing his arguments with scientific arguments. He also elaborated on the logic of both these technologies by explaining how Snowpack follows an approach of bundling only those components that require it while Vite.js finds multiple routes and creates modules to make a program production ready. The benefits of both these technologies for optimised and streamlined development were then analysed by comparing their pros and cons.
How To Create Beautiful Bottom Navigation Bar Animations With REA2: Aditya Pahilwani
The final discourse for the way revolved around creating beautiful bottom navigation bar animations with React Native Reanimated 2. The speaker-Aditya Pahilwani, illustrated on the topic using an example where he implemented a boiler code, made the logic comprehensible and then proceeded to explain how to create aesthetic animations for the bottom navigation bar. He specified tab and icon containers to animate the primary one and threw light on how to translate these icons while also preventing them from being blocked by creating an overflow. The topic of creating custom hooks to handle keyword popups for a truly beautiful bottom navigation bar was also discussed at length in this talk.
The event which covered many of the developments in the React and React Native community was brought to close with a panel discussion wherein the speakers answered the questions curated by the audience. You can watch the entire event below:
