React Native

RN.md

React Native

1. Introduction
2. Installation
3. Styles
4. Components
5. Main App
6. Images
7. Touch Indications
8. Status Bar

Introduction

Extension for CSS.

Installation

You might also use react-devtools in order to smart debug and inspect you application:

$ npm i -g react-devtools
$ react-devtools

It will recognize your application and give you the same react dev-tools as in the browser.

Styles

In React Native you can style your components with style objects, assigned to the elements. Each style property can receive either style object or array of style objects, which are being merged (overriding values). For example, the following Text element will receive blue background color even though the welcome style object has red background color value.

import React, {Component} from 'react'
import { StyleSheet, View, Text } from 'react-native'
export default class HelloRN extents Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.welcome, {backgroundColor: 'blue'}]}>
          Welcome!
        </Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  welcome: {
    margin: 10,
    backgroundColor: 'red'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

In react native it is very common to use flex styling with all its properties. A fun way to learn flex styling is on flexboxfroggy.

Components

In order to be familiar with all react native's components, you can clone the react-native project, install it and run the RNTester. It is an application which allows you to view and look at the source code of the components (all their properties etc).
Very recommended!
There are also components which can be used only for a specific platform, like DatePickerIOS component which is the build in API date picker for IOS. In order to use the Android's date picker, you will have to use the date picker for android component which has different API, but your logic for both components can be shared.

Main App

In order to use same component in both IOS and Android root components, you can write the main app component and register both of them to the application:

//  ./src/components/App
import React, {Component} from 'react'
import { View, Text } from 'react-native'
class App extents Component {
  render() {
    return (
      <View>
        <Text>Main App!</Text>
      </View>
    )
  }
}
export default App

// For both files:
// index.ios.js
// index.android.js
import { AppRegistry } from 'react-native'

import App from 'src/components/App'

AppRegistry.registerComponent('MainApp', () => App)

Images

You can use images in some variations:

• require with static path. You can't use dynamic path because it needs to be built!
• An object with uri property for external image.

//  ./src/components/App
import React, {Component} from 'react'
import { View, Image } from 'react-native'
class App extents Component {
  render() {
    return (
      <View>
        <Image source={(require('../../resources/images/1.png'))} />
        <Image source={{uri: 'https://www.thesportsdb.com/images/sports/soccer.jpg'}} />
      </View>
    )
  }
}
export default App

In order to view external images, you need to ......................................

Touch Indications

We can use some APIs in order to indicate touch events:

• TouchableOpacity - Uses animation to decrease the opacity of the element on touch event
• TouchableHighlight - Highlights the element on touch event

//  ./src/components/App
import React, {Component} from 'react'
import { Text } from 'react-native'
class MyTextComponent extents Component {
  handlePress = () => {
    console.log('Text Clicked!') // The opacity change is automatically, this is an extra handling
  },
  render() {
    return (
      <TouchableOpacity onPress={this.handlePress}>
        <Text>Press Me!</Text>
      </TouchableOpacity>
    )
  }
}
export default MyTextComponent

Status Bar

We can get data from different platforms, like status bar element:

//  ./src/components/App
import { EStyleSheet } from 'react-native-extended-stylesheet'
import { StatusBar } from 'react-native'

const styles = EStyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    '@media ios': {
      paddingTop: 20
    },
    '@media android': {
      paddingTop: StatusBar.currentHeight
    }
  }
})