React Native Meetup Bangalore — October 2017

Summary of our 6th React Native Meetup

We recently had our 6th React Native Meetup at our office. The event was very successful and we had a lot of React Native enthusiasts.

The agenda for this Meetup was:

• Introduction by Shruti Kaushik
• React Native News by Jasbir singh, Shaktishree M, & Shivraj Kumar.
• Enriching Developer Experience using React Native by Muskein Singh from Flipkart.
• Building an event app in React Native by Jasbir singh.
• Creating self-contained micro apps with React Native by Dineshswamy Paranthaman, Founder of nanoapps.co.
• BuilderX Introduction by Krutarth Dave & Himanshu Satija.
• Creating a Twitter Clone in React Native [Tutorial with Open Sourced Code] by PraNeet Rohida.
• Flutter vs React Native | Flutter Side: Rishabh Jain & Himanshu Satija, React Native Side: Shivraj Kumar & Rishabh Pandey, Co-ordinator: Sankhadeep Roy.
• Conclusion and Takeaways by Sankhadeep Roy.

React Native News

Jasbir, along with Shakthi and Shivraj spoke about the recent events that have happened in the world of React and React Native. The talk started with a brief timeline depicting all the major events that have brought React and React Native to what it is today.

The main question asked by Jasbir here was:

Is React already cross-platform?

The obvious answer would be: Yes! We use React Native so that our code can work on both Android and iOS.

But now what if you wanted your code to work on the Web as well? For that, we would use React. So essentially we are saying that we need to use React Native for Mobile platform and React for the Web platform, which in turn means that React is not completely cross-platform!

But that again is not true! React Native can now be used for Web Development by using React Native For Web.

As of now, React Native is not developed enough to support all the features that React provides.

This resonates with what Leland Richardson from Airbnb spoke about in his talk at Chain React earlier this year.

Airbnb introduced the concept of React Primitives, which is a list of fundamental React components that can be used to build any other component on any other platform. These components are:

• Animated
• StyleSheet
• View
• Text
• Image
• Touchable

Check out this video to know more about How Airbnb uses React Native:

React Native OpenTok

React Native OpenTok is a wrapper over native TokBox OpenTok SDK. Developed by TokBox, the OpenTok platform makes it easy to embed high-quality interactive video, voice, messaging, and screen into web and mobile apps.

Android Palette API

This is another cool addition to React Native, created by CallStack. Android Pallete API extracts the prominent colors from images to help you create visually engaging apps. Currently, it only works for Android.

To know more, check out the following post by Raúl Gómez Acuña.

Colour your apps in React Native using Material Palette

React Native Gesture Handler

Here is a new declarative API by Expo that provides a native way to handle touch and gestures for React Native Apps.

This API allows the developer to define complex gesture handling and recognition logic. And the best part is that it runs 100% in native thread, thus making it completely deterministic.

Expo AR Kit

The latest release of Expo has an experimental release of the Expo Augmented Reality API for iOS. It enables the creation of AR scenes using just JavaScript with familiar libraries such as three.js, React Native and Expo’s native APIs for Geolocation other device features. Here’s a video that shows it in action!

To know more about Expo AR Kit, check out this post by Nikhilesh Sigatapu.

Introducing Expo AR: Three.js on ARKit

CallStack Haul

Haul is an awesome command line tool for developing React Native apps. Haul is a drop-in replacement for react-native CLI that is built on open tools like Webpack. It can act as a development server or bundle your React Native app for production.

Haul has been around quite sometime now. But recently, CallStack has added some new features to it such as:

• Replaced React Native packager to bundle your app.
• Access to full webpack ecosystem, using additional loaders and plugins is simple.
• Doesn’t need watchman, symlinks work nicely.
• Helpful and easy to understand error messages.
• Hot module reloading.

To see the whole talk, check out this video:

Here are the slides to their talk:

React Native Meetup by shakthishree

ReactNativeSeed

The issue with React Native CLI or CRNA(Expo) is that they provide us with only an one-page application. There is no navigation or a UI library or state management.

To solve this issue, we came with a tool called ReactNativeSeed.

Shivraj Kumar speaks about ReactNativeSeed, a tool that will generate your favourite started project for React Native. It will help you choose a static-type checker, state-management library and a stack.

BuilderX

Here Krutarth Dave and Himanshu Satija speak about BuilderX, a sketch-like design tool created by us that simultaneously writes React Native code for you. BuilderX was announced by Sanket Sahu at React Native EU.

The idea for BuilderX came to us with this question,

What if your “designer tool” gave you a “.js” file?

The basic workflow for building an app is something similar to this:

A designer will initially create the designs for our app. A developer takes these designs and converts them to the UI equivalent for different frameworks. Finally, the developer integrates data(API calls) into the app.

So, UI conversion phase is just creating a gap between the designer and the developer. Another issue is that the designer and the developer don’t speak the same language. The designer’s work is mostly done once the developer performs the UI conversion. For any further changes in design, the designer has to start from scratch.

But what if we could bridge this gap between the designer and developer? This would require us to skip the UI conversion phase.

It would be even more awesome if we could do this bi-directionally. By this, we mean once the data integration phase is complete, designers can enter the same source code and make any changes that they want.

And this is exactly what BuilderX enables us to do!

BuilderX is a design tool that writes React Native code for you. All you have to do is just “Drag & Drop” the components that you want in your app.

It is also quite easy to switch between designing and coding in BuilderX!

Once you are done designing your app in BuilderX, you can simply copy it in your editor to get the full React Native code.

You can also create reusable components in BuilderX. Any changes made in the component’s React Native code will be immediately reflected in all the screens where that component is used.

Enriching Developer Experience using React Native

Muskein talks about his work as a Software Developer at Flipkart, and how people at Flipkart have been using React Native to build some pretty amazing things.

Flipkart chose React Native to achieve these goals:

• Cross-Platform Development
• Dynamic Updates
• Full Stack Development

Developing and debugging a React Native component in a Native App can be a real pain since almost all of the tutorials out there suggest you to start from scratch and create a completely new React Native App.

But what if you want to integrate an already existing app with a React Native component?

Muskein presents us with a one-click solution that makes development and debugging very easy!

One of the major reasons why Flipkart uses React Native is to be able to ship updates over the air without depending on App release cycles. This involves being able to deploy new bundles to pre production environments for testing, verification and sign offs and then pusing these bundles to production. Muskein shares the system that Flipkart has built for internal distribution of the React Native bundle to Quality Assurance and business before it goes live to over 50 million of their users.

Building A Twitter Clone in React Native

PraNeet Rohida talks about how he successfully created a Clone App of Twitter in React Native and how it helped him understand the workings of React Native.

You can check his code here:

pranit123/Twitter-Clone

PraNeet has also written a companion post on this topic:

Building a Twitter Clone App in React Native

Flutter vs React Native

Flutter is another emerging mobile app technology. We tried to compare Flutter with React Native and figure out with one is better.

Team Flutter was comprised of Rishabh and Himanshu Satija, while Team React Native had Shivraj Kumar and Rishabh Pandey.

We compared both of these technologies with respect to various areas such as:

• Learning Curve
• Debugging & Testing
• State Management
• Performance
• Community Support
• Styling
• Bridging

We came to the conclusion that each of these technologies is quite great. I always say that “No one technology or framework can satisfy all the use cases”, and this statement fits here as well.

Developers who want to port their web App to mobile platform will find React Native to be easier. React Native and React have many similarities and this will help a Web Developer to migrate to Mobile Development.

Flutter finds its strength when a developer wants to build gaming apps, or if the apps need to have a lot of animations. Developers who have experience with Native code will find Flutter to be much easier than React Native.

Here’s the entire video of the discussion:

You may check out this post if you want to know more about what we at GeekyAnts are working on with regards to Flutter:

What Are We Doing With Google’s Flutter?

In The End…

Awesome Meetups like these cannot be possible without the participation of everyone, whether as a speaker or as an attendee. To stay updated with our meetups, you can join this group.

We will be hosting an Angular Meetup soon. We would like to invite all Angular enthusiasts to attend it. Click here to join.

I am Rajat S, a DC Comics fan and occasional Football player who is currently at GeekyAnts as Technical Content Writer.

Thanks for reading! Please 👏 and follow me if you liked this post!