A React Native mobile application built for iOS for the 2023-24 FBLA Mobile Application Development Competition. This app allows highschool students to create a portfolio of their highschool experiences. We used React Native primarily because it could support both iOS and Android and is also very versatile. We also used Expo Go to deploy our application during testing and is also how the app runs. The app is not planned for release to the App Store yet. Some of the main challenges we faced were figuring out how to save and load data while also being able to add and delete data. Furthermore, we also had difficulty getting all this data from different screens to collect into an individual screen to display as a portfolio.
To start, you will need to install the Expo Go Application on your iPhone of iOS 13 or later. You will also need the latest recommended release of Node.js LTS as well as Git for source control to clone our Github repository into a code editor of your choice (We recommend Visual Studio Code). You can also just press the "Open with Visual Studio" option. You can also download it as a ZIP file and extract it. You can open that extracted folder using Visual Studio Code. You will also need to create an Expo account to use the Expo Go Application. This app is intended to run on iPhones and iPads running iOS 13+ or higher. Android functionality may be possible although there is no full support.
Follow the Expo Go documentation guide to get started and receive additional help.
A list of all dependencies we used. If needed, run these commands in your terminal:
- Asynchronous Storage
npx expo install @react-native-async-storage/async-storage - React Native Context & Reducer No installation required.
- React Native Navigation
npx expo install react-native-screens react-native-safe-area-context - React Native Stack Navigation
npm install @react-navigation/native-stack - Expo Splash Screen
npx expo install expo-splash-screen - Expo Print
npx expo install expo-print - Expo Sharing
npx expo install expo-sharing - Expo Vector Icons
npm i @expo/vector-icons@6.3.1 - Formik
npm install formik --save - React Native Elements
npm install react-native-elements - React Native Keyboard Aware ScrollView
npm i react-native-keyboard-aware-scroll-view --save - React Native Safe Area Context
npx expo install react-native-safe-area-context - React Native Screens
npx expo install react-native-screens - React Native Share
npm i react-native-share --save - Yup Validation
npm i yup
Once you have cloned our repository, you can open up the files with a code editor of your choice. To start a development server, you will need to first run the command in the terminal: cd PROJECTNAME. Replace PROJECTNAME with the name of the folder that contains all of our project files. This ensures you are in the directory of our project if not already. Ensure that your phone and the computer/laptop are connected to the same WiFi network. Next, run the command: npx expo start to run the development server. This will print out a QR code in the terminal which you will need to scan using the camera. This will open up the Expo Go app and run the application directly on your phone! It also prints out a list of other commands you can type into the terminal in case you need more help or information. To stop running the server, press CTRL+C in the terminal to quit the process and end the server.
Follow the Expo Go documentation guide to run the project. (You are not creating a new project). You pretty much only need to follow steps 2-3.
- Team Members: Hemant C (IceBlazer), Prabhath K, Aryan P
- Big thank you to Net Ninja for helping us learn React Native! - React Native Beginner Playlist
- Expo Vector Icons
- Logo Designed Using Canva