Especially thanks to React-UI-Kit Channel !
ReactNative Project 2020 from 365Design & Dribble
I'm transforming Dribbble designs to React / React-Native code. Happy Coding :)
Overview
| Project | Name | Description | Status |
|---|---|---|---|
| 01 | Plant App | Plant app with 6 Ui view ( login, setting, product ... ) | 100% :white_check_mark: |
| 02 | Camping App | Camping Spot Searching with Redux intergrate | 100% :white_check_mark: |
| 03 | Parking App | Car parking finder app with price calculator | 90% :hammer_and_wrench: |
| 04 | VPN App | Vitural Private Network app with select country | 100% :white_check_mark: |
| 05 | Home App | iOT simulator app for controlling devices in home | 100% :white_check_mark: |
| 06 | Travel App | Travel article news with main & details UI view | 100% :white_check_mark: |
| 07 | To be continued :) |
Project 1: Plant App with login and setting ✅
Design sketch link here
Demo design:
UI View: 6
Coding time: 16 hours.
Description:
- Handmade components for reusable ( Button, Input, Divider )
- Animated dots progress and animated timing for resize search input
- Login, signup, config header options in navigation
- Slider, modal and many more
Dependencies:
"@react-native-community/masked-view": "^0.1.9",
"@react-native-community/slider": "^2.0.9",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-vector-icons": "^6.6.0"Issue & Resolve: Check it here
Project 2: Camping App Searching with Redux ✅
Design sketch link here
Demo design:
UI View: 2
Coding time: 9hours.
Description:
- Custom marker with Map View
- Using redux to change Setting
Dependencies:
"@react-native-community/masked-view": "^0.1.9",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.11",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-maps": "^0.27.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"Issue & Resolve: Check it here
Project : Car Parking Finder App ✅
Design sketch link here
Demo design:
UI View: 2
Coding time: 7 hours.
Description:
- React Native Map, React Native Map Marker
- React Native FlatList, React Native ScrollView ,
- React Native Modal
Dependencies:
"react-native-dropdown": "0.0.6",
"react-native-maps": "^0.27.1", // for testing
"react-native-material-dropdown": "^0.11.1", // for testing
"react-native-modal": "^11.5.6", // for testing
"react-native-modal-dropdown": "^0.7.0", // for testing
"react-native-vector-icons": "^6.6.0"
"react-native": "0.62.2",Issue & Resolve: Check it here
Unfinished Task:
- Using React-Native-dropdown for render hours
- Calculating the price and render the same hours ( with main view ) in modal view
Project 4: VPN App ✅
Design sketch link here
Demo design:
UI View: 2
Coding time: 8 hours.
Description:
- React Native Navigation
- React Native ScrollView ,
- React Native Modal
- React Native vector icon
- Using state to turn on/off connected status and picker country
Dependencies:
"@react-native-community/masked-view": "^0.1.8", "@react-navigation/native": "^5.1.5", "@react-navigation/stack": "^5.2.10", "react": "16.11.0", "react-native": "0.62.2", "react-native-gesture-handler": "^1.6.1", "react-native-modal": "^11.5.6", "react-native-reanimated": "^1.8.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.4.0", "react-native-vector-icons": "^6.6.0"
Issue & Resolve: Check it here
Project 5: Home App ✅
Design sketch link here
Demo design:
UI View: 2
Coding time: 8 hours.
Description:
- React Native Navigation
- React Native SVG Chart
- React Native vector icon
- Using PanResponder for marking PanSlider
- Special: Idea for marking Block component ( handmade ) instead of View
Dependencies:
"@react-native-community/masked-view": "^0.1.9",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-svg": "^12.1.0",
"react-native-svg-charts": "^5.3.0",
"react-native-vector-icons": "^6.6.0"Issue & Resolve: Check it here
Project 6: Travel Article App UI View Snack ✅
Design sketch link here
Demo design:
UI View: 2
Coding time: 8 hours.
Description:
- Flatlist & Scrollview Image Gallery
- Animated dots progress/stepper ( horizontal in Flatlist )
- Rating star
Dependencies:
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-vector-icons": "^6.6.0"
"react-native": "0.62.1",