&

Password: GeekyAnts9
Name: GeekyAnts 5.0 & GeekyAnts 2.4

Join the Slack Meetup Team

http://reactnativebangalore.nativebase.io

I am Sanket

Loves to build new things

Strums guitar when bored

GeekyAnts comprises of about 65 people into React & React Native.

We organize these Meetups very often.

CEO and co-founder @GeekyAnts

Twitter: @sanketsahu

React Asia

Your thoughts?

Lets get to know each other

Just Curious

Worked with React Native?

 Worked with React?

Native developers in the house?

Used NativeBase ?

 Javascript developers?

Speakers and Topics list

Jasbir Singh

Bhavish Hak

Rishabh Pandey

Sankhadeep Roy

Himanshu Satija

Build a simple React Native app from scratch by GeekyAnts

Speakers and Topics list

Siddharth KP

Porting existing mobile website to React Native. Tips and Tricks.

@siddharthkp

The Fourth Industrial Revolution

Technology is doing everything today

Its not just about computers anymore

We are changing the world through this

Its one of the few things, where you could just sit down and make something from scratch

Evolution of mobile phones

App development history

Problems with Native coding

https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

Scripting native is tuff

What is React native?

For starters its a relatively new Library  available since March 2015

Was in use at Facebook internally. Open source now.

Biggest Advantage is React

You can build actual native apps using Javascript.

A React Native app is a real mobile app

Build native mobile apps using javascript and React
Hot Reloding : Dont waste time recompiling.
Bridge what you want from native.

Easy testing.

Features

render() {

return(

<ListView
dataSource= {this.state.dataSource}
renderRow= { (rowData) => this.makeRow(rowData)}

 ) }

React Native works by using JavaScript code to manage native views. A “View” in React Native is “UIView” in iOS, and

a native “View” in Android at runtime.

ios

Android

Some problems worth mentioning

FB and Google SDK signing takes lot of pain and time.

Asset management is time consuming.

A lot of things have to be setup before you can actually dive into the code 

New versions every month.

A new tool that makes it significantly easier to get started with a RN project. Inspired by design of Create React App.

In simple words, its a wrapper around React Native that does not have native code included in it

Worry not, Expo is here

Why choose CRNA/Expo ?

 Support for iOS and Android

Push Notifications

Facebook/Google  Login

Instant Updating

Easier Updating To New React Native Releases

 Asset Management

Live Coding session

Introducing NativeBase

100% Open Source

4,672 Github stars

1,098 Followers

Using NativeBase in our App

So much to navigate?

Navigation in React Native

React Navigation - From React Community

React Native Router Flux(RNRF)

Navigation Experimental

Navigator

React Native Navigation - Wix

Airbnb Navigation

Getting back to our code

State Management

Redux

MobX

Simple, scalable state management

Redux is a predictable state container for Javascript apps.

It helps you write applications that behave consistently, run in different environments(client, server and native) and are easy to test.

Mobx makes state management easy again by addressing the root issue: It makes it impossible to produce an inconsistent state by making sure that everything that can be derived from application, will be derived. Automatically

Redux

MobX

Conceptual Differences

MobX

Redux

• Object Oriented & Reactive
• Observables
• Data Mutation
• Multi-store
• Nested State View

• Functional
• Plain Objects
• Immutability
• Single-store
• Normalized State

Tea Break (5 minutes)

We got a Rockstar
Guest Speaker

Javascript Architect @practo
Physics graduate
Loves interfaces and Javascript.

Topic: Porting an existing mobile website to React Native. Tips and Tricks.

Siddharth KP

Q/A session

The thing with Great Questions

Volunteers highly appreciated

Connecting the dots

Where are we headed?

What the future looks like?

What are we doing about this?

How cool would it be if photoshop generated React Native code?

The NativeBase Builder

The NativeBase Builder