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