Skip to content

A collection of JavaScript expo projects that were used to gain understanding in order to build more useful projects.

Notifications You must be signed in to change notification settings

AndrewFelton23/Expo_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Expo_app

About

This is a collection of javascript apps that use the expo sdk to create and deploy apps. This will be done on the iPhone 14 Pro Max running the latest version of iOS 16.2.

Notes to build your first expo app

To create a new app open a new terminal and enter the follow:

npx create-expo-app my-first-app

then cd into the directory

cd my-first-app

In order to run the app on the web, dependencies must be installed by running the following commands:

npx expo install react-dom react-native-web @expo/webpack-config

start the app by entering:

npx expo start 

Now enjoy using the app and customising it to fit your needs.

my-app

The purpose of this app was to build the program and demonstrate that it runs while changing the text displayed in the middle of the screen. The output is show below:

PhotoDisplay

The purpose of this app was to build a program that shows an image and two buttons with different styles. The output is show below:

ReactNative_Navigation

stack-app

The purpose of this app was to build a program that navigates between screens using the react native stack:

To create this create a new file and open it in vscode, Install Expo CLI by typing the following in the terminal:

npm install -g expo-cli

Create React Native Project

expo init <app-name>

then cd into the folder that you created

cd <app-name>

install react navigation

npm install @react-navigation/native

Install Stack Navigation

npm install @react-navigation/native-stack

start program

npx expo start

drawer-app/drawernav-app

The purpose of this app was to build a program that navigates between screens using the react native drawer:

To create this using Yarn. Create a new file and open it in vscode, Install Expo CLI by typing the following in the terminal:

npm install -g expo-cli

Create React Native Project

expo init <app-name>

then cd into the folder that you created

cd <app-name>

install react navigation

yarn add @react-navigation/native

install dependencies

expo install react-native-screens react-native-safe-area-context

Install drawer Navigation

yarn add @react-navigation/drawer 

Install drawer Navigation dependencies

yarn add react-native-gesture-handler react-native-reanimated  

start program

npx expo start

Alternatively to create this using npm. Create a new file and open it in vscode, Install Expo CLI by typing the following in the terminal:

npm install -g expo-cli

Create React Native Project

expo init <app-name> --npm

then cd into the folder that you created

cd <app-name>

install react navigation

npm install @react-navigation/native

install dependencies

expo install react-native-screens react-native-safe-area-context

Install drawer Navigation

npm install @react-navigation/drawer 

Install drawer Navigation dependencies

npm install react-native-gesture-handler react-native-reanimated  

start program

npx expo start

About

A collection of JavaScript expo projects that were used to gain understanding in order to build more useful projects.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published