Index

Introduction

Folder workspace/javascript/reactnative-projects

Install expo:

sudo npm install expo-cli --global

Start your first app:

expo init rn-first-app
cd rn-first-app
expo start

Select blank,
than select name: RN First App

cd rn-first-app
npm start

For eslint error:

eslint --init

In your android phone, search for expo
and install it.

Then scan the QR code of the app.

In vscode open the folder

An optional extension: Material Icon Theme

Now:

App.js
See the onPress event:

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

export default function App() {
  const [outputText, setOutputText] = useState("Open up App.js to start working on your app! ")
  return (
    <View style={styles.container}>
      <Text>{outputText}</Text>
      <Button title="Change Text" onPress={() => setOutputText("The text changed!")} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Install android studio:

Inline styles

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

export default function App() {
  return (
    <View style={{padding: 50}}>
      <View style={{flexDirection: "row", justifyContent:"space-between", alignItems: "center"}}>
      <TextInput placeholder="Course Goal" style={{width: "80%", borderColor: "black", borderWidth: 1, padding:10}} />
      <Button title="ADD" />
      </View>
      <View></View>
    </View>
  );
}

Use stylesheet for optimization:

const styles = StyleSheet.create({

});

App.js

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

export default function App() {
  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput placeholder="Course Goal" style={styles.input} />
        <Button title="ADD" />
      </View>
      <View></View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  input: {
    width: "80%",
    borderColor: "black",
    borderWidth: 1,
    padding: 10
  }
});

Using Hooks (useState)

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

export default function App() {
  const [enteredGoal, setEnteredGoal] = useState("");

  const getInputHandler = enteredText => {
    setEnteredGoal(enteredText);
  };

  const addGoaldHandler = () => {
    console.log(enteredGoal);
  };
  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Course Goal"
          style={styles.input}
          onChangeText={getInputHandler}
          value={enteredGoal}
        />

        {/* addGoalHandler is added onPress */}
        <Button title="ADD" onPress={addGoaldHandler} />
      </View>
      <View />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  input: {
    width: "80%",
    borderColor: "black",
    borderWidth: 1,
    padding: 10
  }
});

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

export default function App() {
  const [enteredGoal, setEnteredGoal] = useState("");
  const [courseGoals, setCourseGoals] = useState([]);

  const getInputHandler = enteredText => {
    setEnteredGoal(enteredText);
  };

  const addGoaldHandler = () => {
    //Anonymous function inside setCourseGoals
    setCourseGoals(currentGoals => [...courseGoals, enteredGoal]);
  };
  return (
    <View style={styles.screen}>
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Course Goal"
          style={styles.input}
          onChangeText={getInputHandler}
          value={enteredGoal}
        />
        <Button title="ADD" onPress={addGoaldHandler} />
      </View>
      {/*  New data */}
      <View>
        {courseGoals.map(goal => (
          <Text>{goal}</Text>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    padding: 50
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  input: {
    width: "80%",
    borderColor: "black",
    borderWidth: 1,
    padding: 10
  }
});