Skip to content
This repository was archived by the owner on Jan 11, 2024. It is now read-only.

pwangy/PROJECT-React-Native-App

 
 

Repository files navigation

Project React Native App - Overview

Project done as a part of Technigo bootcamp.

This is my first mobile application using React Native and Styled Components!

Learning Objectives:

  • How to use React Native to create a mobile app
  • Practice using Styled Components for styling.

Approach

This React Native App project was one steep learning curve! I had to take my current knowledge of React and then recontextulize it within React Native's constraints. On top of this, I was also playing with some new tools: Expo, the accelerometer on my mobile device, and an API that was new to me— so lots of new concepts to figure out and implement.

After deciding on building and Animal Crossing villager randomizer and working out how that might function on paper, I set to work. I quickly realized I had to work backwards in order to test while coding, for example:

  • the API fetch had work before trying to randomize that data.
  • The random loading fucntion had to work before working out how to connect it to the sensor.

I had trouble accesing specific data points in from the API array so I pulled a handful of villagers (and their relevant data points) into a smaller and locally stored array. I also created a button for any development testing that needed to happen before getting to the step of pulling in the accelerometer component.

This project was not easy, but it was a fun challenge that was made manageable by breaking down my goals into smaller functional chunks. Then I kept building on the chunks that I had to end up with a finished project. Neat!

Core Tech

  • API
  • React Native
  • React Hooks
  • Styled Components

Requirements Completed

🔵 Blue Level

  • Use Styled Components.
  • The app should either be:
    • using one of the sensors of your mobile phone such as the camera, accelerometer or voice assistance etc.
    • using an external API to fetch something to your app and then interact with it.

View it live

Works best when viewed on the Expo app using the QR code under "My Device" in the preview area. https://snack.expo.io/@pwangy/react-native-app

About

My first mobile app! It's an Animal Crossing (New Horizons) random villager generator.

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 100.0%