ahmadajah03 Thu Mar 2020 3 years ago

S01E13 - Plant App - React Native

React Native Plant App

Source code: https://git.io/fjLxo
Expo Snack: https://snack.expo.io/@react-ui-kit/plant-app
Coding duration: ~4h 20m
Software: React-Native, Expo.io, VSCode, iOS Simulator

Design: https://dribbble.com/shots/4569970-Plant-Freebie-2-Dribbble-Invites
Designer: Paolo Spazzini (https://dribbble.com/paolospazzini)
Music by Epidemic Sound (https://www.epidemicsound.com)
Logo Animation: Bisigned (https://www.bisigned.com)


Music playlist:
1. Strending Kids - Ooyy
2. Hold Up - Fasion
3. It's Gonna Be Alright - Basixx
4. Are We Still in Love - Gloria Tells
5. Second Hand Slide - Lucas Pittman
6. Trouble by Trouble (Luwaks Remix)(Instrumental Version) - The Eastern Plain
7. Oceans Apart - Lucas Pittman
8. Zulu - Lucas Pittman
9. Urban Conspiracy - Jules Gaia
10. Birds of Paradise - Ennio Máno
11. Late Night Mood - Colors of Illusion
12. The Last Arrival - Daniel Kadawatha
13. Unscrambler - Aiolos Rue

Timeline:
00:01:02 - Setup theme, components & screens
00:31:05 - Welcome screen with horizontal image slider
01:09:00 - Login screen
01:42:50 - Forgot your password screen
01:50:00 - SignUp screen
01:57:00 - Browse screen for categories
02:23:35 - Settings screen with: Switch, Slider, toggle Input & Text
03:01:16 - Explore screen
03:45:35 - Explore search input animation

Components used in the app:
- react-native-slider for Slider
- react-navigation for Screens navigation
- react-native-vector-icons
- expo

Custom components:
- Block a flavoured View with predefined styles
- Card a Block with predefined style
- Badge, Button, Divider
- Switch & Slider
- Text a flavoured react-native Text with predefined styles
- theme.js for easy color & size customisation

Screens in App:
- Welcome
- Login, Forgot, SignUp
- Browse, Explore
- Product, Settings

#reactnative #reactjs #reactuikit #reactnativeapp
react.js javascript ui ui-kit react-ui-kit es6 react-native tutorial reactnative react-native-app plant-app react navigation