Five years ago, I had the desire to create a smartphone app to enhance my learning, and I decided to give it a try.

This article is like a diary about the excitement I felt when I actually used the app I created and installed it on my own phone.

Finished Product

I started with the simple idea of creating my own English vocabulary book.

The app saves data using the phone's internal storage (AsyncStorage), allowing you to study English anytime without needing an internet connection.

Of course, I didn't publish such a basic app on any store, but I was thrilled when I successfully installed and used it on my own phone.

How I Made It (Resources)

Start Developing Apps with React Native, Firebase, and Expo from Scratch!

I used this resource for comprehensive learning.

It’s been five years since I used it to learn, but even now, this resource has been updated, and in 2023, it underwent a major overhaul, allowing you to learn in the current environment.

It’s an excellent resource, and I’m glad I chose it.

The content covers the basics thoroughly, and if you can get inspired to create something you want, this resource can be a great foundation for various projects.

Also, although other resources might offer hands-on implementation as well, this one provides:

1. Debugging methods
2. Coding in action
3. Pulling code from the official documentation

I found it incredibly educational to see real, raw operations, like how bugs are handled and resolved.

How to Set Up the Environment

I used ExpoCLI for setting up the environment.

Expo Official

The Node.js version is quite different now compared to back then, and some commands have changed, so I created a separate article for that.

How to Set Up ExpoCLI. (TypeScript + ReactNative)

What I Learned

I learned a lot from creating this English vocabulary app.

When Building with Expo, Search with Expo

I was initially confused, but there’s a possibility that the implementation differs between React Native CLI and Expo.

Many times, packages for React Native didn’t work in Expo, so I would search for Expo-specific solutions and implement those.

This was particularly the case with packages.

In terms of programming syntax, you can still write in React just the way it is.

It Helped Me Learn React

As long as you know React, you don’t need to learn any new language to write the View.

Since I had just started dabbling in programming, it was a great way for me to study React.

Systematic Learning of Mobile App Development

Developing with an emulator is a bit more challenging than developing for the web using a browser, as I experienced emulator-specific issues and difficulties.

Additionally, I learned that even individual developers can release apps to the store, how apps need to request access to the phone’s data (like photos), and the general mechanisms behind that. These were things I wouldn’t have known if I hadn’t studied them.

Code from Back Then

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

import CircleButton from "../elements/CircleButton"
import { withOrientation } from "react-navigation"

class MemoCreateScreen extends React.Component {
  state = {
    text: "",
    mean: "",
  }

  storeData = async name => {
    try {
      await AsyncStorage.setItem("posts", name)
    } catch (error) {
      console.log(error)
    }
    Alert.alert(name + ":stored")
  }
  handlePress() {
    AsyncStorage.setItem(this.state.text, this.state.mean)
  }

  clear() {
    AsyncStorage.clear() // For debugging purposes
  }

  render() {
    const { create } = this.props

    return (
      <View style={styles.container}>
        <TextInput
          style={styles.memoEditInput1}
          multiline
          placeholder="English Word"
          onChangeText={text => {
            this.setState({ text: text })
          }}
        />
        <TextInput
          style={styles.memoEditInput2}
          multiline
          placeholder="Meaning"
          onChangeText={text => {
            this.setState({ mean: text })
          }}
        />
        <CircleButton name="check" onPress={this.handlePress.bind(this)} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
  },
  memoEditInput1: {
    width: "100%",
    height: 50,
    backgroundColor: "#ddd",
    flex: 1,
    paddingTop: 32,
    paddingRight: 16,
    paddingBottom: 16,
    paddingLeft: 16,
    fontSize: 16,
  },
  memoEditInput2: {
    width: "100%",
    height: 50,
    backgroundColor: "#fff",
    flex: 1,
    paddingTop: 32,
    paddingRight: 16,
    paddingBottom: 16,
    paddingLeft: 16,
    fontSize: 16,
  },
})

export default MemoCreateScreen

I’m proud of my past self for writing this with such effort.

It’s been a while since I’ve seen a class component.

I’m so used to functional components now that it feels quite strange.

  handlePress() {
    AsyncStorage.setItem(this.state.text, this.state.mean);
  }

This part is where data is saved to local storage.

Thinking about how past efforts have built up to now, it motivates me to keep going.

That’s all.