Getting a React Native app up and running.

How to Set Up a React Native Application

There are two ways to set up a React Native app. You can do it through either Expo or React Native CLI.

Expo Go

npx create-expo-app my-app

cd my-app

npx expo start

Install Expo Go app on your iOS or Android device. You will need to connect to the same network as your computer. Scan the QR code to view the app.

React Native CLI

Download the CLI, select your computer OS and the target OS of the app, here.

You will then need to ensure you have Node, Watchman, the React Native CLI, a Ruby version manager, Xcode and CocoaPods.

brew install node
brew install watchman

Ruby version managers: rbenv, RVM, chruby, asft-vm.

Xcode can be downloaded via the app store.

npx react-native init my-app

npx react-native start

npx react-native run-ios

Styling

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

const Styles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>Red Text</Text>
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    marginTop: 10,
  },
  red: {
    coloR: red,
  },
});

export default Styles;

Interactions

Here is a small example of a touch button.

import React, { Component } from "react";
import { Alert, Button, StyleSheet, View } from "react-native";

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert("You tapped the button.");
  }

  render() {
    return (
      <View styles={styles.container}>
        <Button onPress={this._onPressButton} title="testing" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
  },
});