React Native

Introduction

Why

• True native app
• Performance is great
• Easy to learn
• Shared across platforms
• Good community

==Components

• React uses components to build apps
• React Native has many components
• Including translate features

Installation

sudo npm i -g react-native-cli
sudo npm i -g create-react-native

Create Project

Note ignite is a useful tool for creating components in react-native

react-native init reactiveNativeCLI
npx create-react-native-app globo
expo start

Sample App.js

This is not much different to java and Xamarin.
App.js

import React from 'react';
import Home from './app/views/Home.js'

export default class App extends React.Component {
  render() { 
    return (
      <Home />
    )
  }
}

Home.js

import React from "react";
import { Text, View } from "react-native";

export default class Home extends React.Component {
  render() {
    return (
      <View>
        <Text>This will be the homepage</Text>
        <Text>These other lines are here</Text>
        <Text>So you are not mad</Text>
      </View>
    )
  }
}

Styles

Inline Styles

These can be defined with double brackets. Note React supports flex :)

..
    return (
        <View style={styles.container}>
          <Header message = 'Press to Login'></Header>
          <Text style={{flex:8}}>This will be the homepage</Text>
          <Text style={{flex:6}}>These other lines are here</Text>
        </View>
      )
..

Using const Styles

Simple create a style and attach it to the component

import React, { useState } from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = (props) => {

    const [loggedIn, setLoggedIn] = useState(false);

    const toggleUser = () => {
        const newLoggedIn = loggedIn ? false : true
        setLoggedIn( newLoggedIn)
     }

    const display = loggedIn ? 'Sample User' : props.message

    return (
        <View style={styles.headStyle}>
            <Text style={styles.headText} onPress={toggleUser}>{display}</Text>
        </View>
    )
}
const styles = StyleSheet.create({

    headText: {
        textAlign: 'right',
        color: '#ffffff',
        fontSize: 30,
    },
    headStyle: {
        paddingTop: 30,
        paddingBottom: 10,
        paddingRight: 10,
        backgroundColor: '#35605a'
    },
})

export default Header

Platform Support

There are API in the Platform package to support the platforms. These provide helpers for things which are platform specific e.g. version, dimensions and others. You can have React load the appropriate js by name a file Home.ios.js and Home.android.js and it will load the correct one.

Using Images

This is how to use the image without assets.

...
import { StyleSheet, Text, View, Image } from "react-native";
...
  return (
    <View style={styles.headStyle}>
      <Image
        style={styles.logoStyle}
        source={require("./img/Globo_logo_REV.png")}
      />
      <Text style={styles.headText} onPress={toggleUser}>
        {display}
      </Text>
    </View>
  );
....
const styles = StyleSheet.create({
...
  logoStyle: {
    flex: 1,
    width: undefined,
    height: undefined,
  },
});

Detecting Touch

Alert

Could not get this to work on the web so here is an implementation

import { Alert, Platform } from 'react-native'

const alertPolyfill = (title, description, options, extra) => {
    const result = window.confirm([title, description].filter(Boolean).join('\n'))

    if (result) {
        const confirmOption = options.find(({ style }) => style !== 'cancel')
        confirmOption && confirmOption.onPress()
    } else {
        const cancelOption = options.find(({ style }) => style === 'cancel')
        cancelOption && cancelOption.onPress()
    }
}

const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert

export default alert

Detecting Press

This was the approach. Not sure the benefits between TouchableOpacity. Probably looks nice.

        <TouchableOpacity style={styles.buttonStyles} onPress={onPress}>
          <Text style={styles.buttonText}>ABOUT</Text>
        </TouchableOpacity>

Navigation

Install

We are going to use react-navigation

npm i react-navigation

Configure

In App.js create an object containing all of the routes and the initial route

import Home from './app/views/Home'
import Contact from './app/views/Contact'

const Routes = StackNavigator(
  {
    HomeRouteName: {
      screen: Home,
    },
    ContactRouteName: {
      screen: Contact,
    },
  },
  {
    initialRouteName: "HomeRouteName",
  }
);

function App() {
    return (
      <Routes />
    )
}

Implement on Component

On the page import StackNavigator and set the header option to null as we already have a header.