This project was to in 1 week build a mobile app in React Native using styled components. The app should be using one of the sensors of the mobile phone or fetching data from an external API and interact with it, or be useful such as a calculator or stopwatch.
To build this app I fetched data from an open API that shows 10 images everytime you reload, you can then share an image with friends.
I used React Native, styled components to style the app, share-method to share images and as a strech goal I put an animation above the images to make it pretty.
Check it out here:
In this week's project, you'll be building your first mobile application with React Native!
This week's project is a very free one. Your only restrictions are that it should be a mobile app created with React Native and using styled components. Also, the app it self 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.
- a multiscreen app by using React Navigation.
- a useful app such as a calculator, a stopwatch or a compass.
- step counter
- photo booth
- some kind of game based on shakes/tilts on the phone
- camera app
- a bubble level
- Or maybe you remember this game!?
- Fetch a bunch of cute dog photos from an api and use the share method to share it with your friends.
- How to use React Native to create a mobile app
- Practice using Styled Components for your styling.
-
Fork this repo
-
Clone this repo into your projects folder on your computer
-
Open up VS Code
-
In the terminal, run
npm install
to install the dependencies needed -
Run the react native development server by running
npm start
orexpo start
FIX: Kรถr istรคllet nedan npm install --unsafe-perm -g expo-cli
Om det inte funkar, kรถr fรถrst nedan: export PATH=$PATH:/mnt/c/Windows/System32
-
Make sure that you have signed up to expo.io and downloaded the app to your phone.
-
Scan the QR code to open upp the app on your phone. Make sure that your phone and your computer is connected to the same network.
Start by investigating the React Native documentation and see what components there are and what else you can do in React Native such as making the phone vibrate, copy something to clipboard, use popup alerts.
Once you have your idea, start by sketching out what your app will look like and how you'd like to use components. Now we're using styled components, but you can still break things into small, manageable components.
After that, think about how the logic should be divided up. Are you using an API? What component should handle the fetch. Are you building a compass, how should you structure you files?
Then you're ready to start working on the project. This project has a base of what you need to get started, but if you want to use some extra libraries or packapages, such as React Navigation, you need to install it like this:
npm install --save react-navigation
When starting to write your code, try to work on the project in small chunks rather than taking on too much at once.
- You should use Styled Components.
- Code follows Technigoโs code guidelines.
- Contribute by helping others with this project on Stack Overflow.
- Demo your app for your team.
-
When youโre finished with the project, push your code to GitHub with these commands:
git add . git commit -m "your commit message" git push origin master
-
Navigate to your repo and create a Pull Request into the Technigo repo
-
Wait for the code review from your teachers
Ask for help and share your knowledge about this project with the 'project-react-native-app' tag on Stack Overflow. Talk to your team on Slack and help each other out. Do some research about your problem, you are surely not the first one with this problem, Google is your friend ๐. And you can of course also book a tech call.
Make sure you've commited and pushed a version of your project before starting with the stretch goals.
Add multiple screens to your app
Add some kind of navigation in your app, either with bottomtabs or navigation backwards and forwards between screens.
Add some animations to your app
Either have a look at panResponders or take a look at how to implement animations with the help of Lottie