Building beautiful UI in React Native

By Sanket Sahu

I'm Sanket

Co-founder of GeekyAnts

  • React Native Community Contributors
  • NativeBase (5,500+ Github stars)
  • 80+ in strength

GeekyAnts (NativeBase)

@sanketsahu

What is React Native?

Why React Native?

  • JavaScript
  • React
  • Cross Platform
  • Performance
  • Backed by Facebook
  • Growing community

Usual Workflow of
Mobile App Development

Building beautiful UI in React Native

Hard parts of building the UI for Mobile

  • Limited Screen Size
  • Plethora of Devices to support
  • Multiple platforms and their standards
    • Google's Material Design
    • Apple's Cupertino Design

Let's build a simple "Button Component" in React Native

...which would look like this

...which could be used like this

<MyButton title="Awesome Button" />

Caption

Box with rounded corners

<Text />

<TouchableOpacity />

How to layout?

Let's build a simple screen having

  • Header
  • Content area
  • Footer 

Header

Content

Footer

Header

  • Fixed height
  • Doesn't scroll
  • Background color
  • White Text

Content

  • Fluid height
  • Content Scrolls

Footer

  • Fixed height
  • Doesn't scroll
  • Background color
  • White Text

<View />

  • Much like <TouchableOpacity />
  • <Text /> for the title

<ScrollView />

  • Like <View /> but it's content can scroll

<View />

  • Similar to Header

StatusBar

  • The color has changed

Button

  • We can re-use our button component 🙌

But how do we position elements?
(at top, center and bottom)

Welcome Flexbox!

A layout mode inspired from CSS 3

Terminology

Container

  • flexDirection
  • alignItems
  • justifyContent
  • ...

Items

  • flex
  • alignSelf
  • aspectRatio
  • ...

Flex properties

flexDirection

(for Container)

Couretsy: https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35

flexDirection

(for Container)

alignItems

(for Container)

justifyContent

(for Container)

alignSelf

(for Items)

flex

(for Items)

without flex: 1

with flex: 1

before

after

iOS guidelines

Android guidelines

Platform specific differences

Platform specific differences

But the UI needs
more than just
"rectangular blocks"

Icons?

use "react-native-vector-icons"

Custom Shapes?

use "react-native-svg"

and we need Tabs, Cards, Swipper, FAB etc

The need of a generic set of UI components

And that's why we built

NativeBase

NativeBase KitchenSink App

Takeaways

  • Building UI in React Native is very similar to web
     
  • Flexbox is a must to build layouts in React Native
     
  • Platform specific guidelines can't be ignored
     
  • Use libraries like NativeBase to save the development time

@sanketsahu

Follow me?

Thank you!

Made with Slides.com