How-To, Build Your Own App

Whether for personal use or for an entrepreneurial idea, building your own app and using it on your phone can be an empowering, interesting, and most importantly fun way to spend your time. In this article, we focus on how to build your own app from scratch, and all you need to bring with you is your imagination.

We will use Expo, which simplifies mobile app development by providing a set of tools and services built around React Native. If these terms are not familiar to you, don’t worry, you will understand more as you read. If you are a developer or looking to be one, you can check out Expo and React Native documentation to learn more.

Before You Start

You will need a computer (Windows, MacOS, or Linux) and an internet connection. First, we will set up our environment, which means installing the necessary software and adjusting options so that we can focus on our coding when we start building our app. Then, we will play with our app, test it and finally publish it.

Set Up Your Environment

Your “environment” refers to your computer setup. Let’s get it ready so we can focus on coding later.

1- Install a Code Editor

A code editor will make your day much easier. Visual Studio Code is easy to learn and use, it is made by Microsoft. Install whichever you like since you can change them any time you want.

2- Install Node.js

Go to nodejs.org and download the latest version. After installing, open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type:

node -v

npm -v

You’ll see version numbers—that means it’s working!

3- Install Expo CLI

In your terminal, type:

npm install -g expo-cli

Check its version with:

npx expo –version

4- Get Expo Go

Download “Expo Go” on your phone from the App Store (iOS) or Google Play Store (Android). We will use this app to test and try our ideas on our own app.

If you prefer to use a virtual phone on your computer, you can download other software like Android Studio by Google in order to create a virtual device and test on that instead. You can learn more on how to use an emulator with expo from here.

If you don’t want to test your app on a mobile device and it is only for web, you can try it on a web browser without installing anything.

Create Your New Project

1- Start a New Project

In your terminal, go to your preferred directory and type:

npx create-expo-app TodoApp

Choose the “blank” template.

2- Go to and Start Your Project

Your project (app) is created to a folder called “TodoApp”, but you need to move your terminal directory to it. (If you are using VSCode, you can open this folder with it now)

Type:

cd TodoApp

This command makes it so your terminal uses your app directory as its directory.

You can run your project (start the app) with typing:

npx expo start

A QR code and more information will show up.

3- Test Your Project

Open Expo Go on your phone, scan the QR code, and you will see your app load.

If you are using a virtual device, press the appropriate button in the terminal to load it (a for android, for example).

If you don’t want to use any mobile device, press “w” on terminal to load your app on a web browser.

Build Your New App

Now that we are done with setting up our app, we can start building it.

To summarize, expo uses the files on your folder as instructions to build your app. These files have their code inside which you will need to edit to change your app. Make sure to use AI like Copilot (if using VSCode) to generate code for you, which can make this process much easier, you just need your imagination to create!

To give you an example, below we will create a To-Do List app to add tasks.

1- Open Your Project

If you haven’t already, open the “TodoApp” folder in Visual Studio Code (or any text editor).

2- Edit “App.js”

Replace everything in “App.js” with this:

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

export default function App() {
const [task, setTask] = useState(”);
const [taskList, setTaskList] = useState([]);

const addTask = () => {
if (task.trim()) {
setTaskList([…taskList, { id: Date.now().toString(), value: task }]);
setTask(”);
}
};

return (
<View style={styles.container}>
<Text style={styles.title}>To-Do List</Text>
<TextInput
style={styles.input}
placeholder=”Enter a task”
value={task}
onChangeText={setTask}
/>
<Button title=”Add Task” onPress={addTask} />
<FlatList
data={taskList}
renderItem={({ item }) => (
<Text style={styles.taskItem}>{item.value}</Text>
)}
keyExtractor={(item) => item.id}
/>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 20,
backgroundColor: ‘#fff’,
},
title: {
fontSize: 24,
fontWeight: ‘bold’,
marginBottom: 20,
},
input: {
borderWidth: 1,
borderColor: ‘#ccc’,
padding: 10,
marginBottom: 10,
borderRadius: 5,
},
taskItem: {
fontSize: 18,
padding: 10,
borderBottomWidth: 1,
borderBottomColor: ‘#eee’,
},
});

3- Save and Test

Save “App.js,” and Expo Go will update. Type a task like “Learn coding” and hit “Add Task”—it’ll show up!

4- Tweak Your App

Once you change the code in “App.js” and hit save, the changes will come in real time to the Expo Go App (or your virtual device, or web browser). Keep trying new things to improve your app! Below are a few examples you can edit.

Change the Color

In “App.js,” find “backgroundColor” (you can use ctrl+f to open the search bar) and change it to:

backgroundColor: ‘#f0f0f0’,

Save the file and the app will run the code.

Add Deleting Functionality

In “App.js”, find and change the “renderItem” part to:

renderItem={({ item }) => (
<View style={styles.taskItem}>
<Text>{item.value}</Text>
<Button
title=”Delete”
onPress={() => setTaskList(taskList.filter((t) => t.id !== item.id))}
/>
</View>
)}

Update “styles.taskItem” to:

taskItem: {
flexDirection: ‘row’,
justifyContent: ‘space-between’,
alignItems: ‘center’,
padding: 10,
borderBottomWidth: 1,
borderBottomColor: ‘#eee’,
},

Save, and now you can delete tasks!

Test and Fix

Change “App.js,” save, and see it live on your phone. If something’s off, check the terminal or shake your phone in Expo Go and tap “Toggle Inspector.”

Export Your New App

After you finish adjusting your app, it is time to export it!

Sign up at expo.dev, come back to your terminal and type:

npx expo login

Use your credentials to login,and build your app with:

npx expo build:android

npx expo build:ios (Mac only)

Or share fast with:

npx expo publish

Get the link and send it to friends with Expo Go.

 

Final Notes

You’ve successfully set up your environment, built a simple app, and even tried it out. Next steps we will leave to your imagination. We hope you will find it interesting and most importantly fun to play with your code and build an app! If you need any assistance, let us know and our experts will help you bring your ideas to reality.