https://github.com/laststonedjs/arctic_foxes_react_native
React native and Expo CLI application for displaying, adding, editing and updating cute arctic foxes and their detailed display and description.
https://github.com/laststonedjs/arctic_foxes_react_native
crud-application expo-cli expo-go expo-image-picker image-picker javascript react-native react-native-modal
Last synced: 3 months ago
JSON representation
React native and Expo CLI application for displaying, adding, editing and updating cute arctic foxes and their detailed display and description.
- Host: GitHub
- URL: https://github.com/laststonedjs/arctic_foxes_react_native
- Owner: laststonedjs
- Created: 2023-03-02T16:54:14.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-05T14:03:42.000Z (about 2 years ago)
- Last Synced: 2025-01-14T03:39:06.298Z (4 months ago)
- Topics: crud-application, expo-cli, expo-go, expo-image-picker, image-picker, javascript, react-native, react-native-modal
- Language: JavaScript
- Homepage: https://arctic-foxes-react-native.vercel.app
- Size: 4.29 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🦊 Arctic Foxes 🦊 React Native, Expo-Go
- To start the application, it is necessary to start the command:
`npm start` from the root directory (dir_name: 'arctic_foxes_rn') and Metro will generate a QR code for scanning (Expo-Go App - we can download it from the play store).
> > If by any chance it doesn't compile on the first try, just click 'R' in the terminal or scan the qr code again
Go deeper and get to know my pets from the far north of the planet, this application also offers you the possibility of inserting,
deleting and changing existing foxes from the list. Without a backend, I use data object from a local dummyData.js file.
-
Goals and Achievements during the construction of the project
Through this task and challenge, the biggest challenge for me was sending data between components and calling them through various dynamic forms, cards and lists. Thoroughly reading the react-native documentation, I learned a lot more about FlatList (many of its props), native navigation and, among other things, the search functionality that I implemented on the 'Home' page. As for the 'Details' page, you can find larger pictures, more descriptions with text, as well as our editing section.- For fonts used this great Inter typeface open source font family!
[ https://rsms.me/inter/ ]- Note
When scanning the QR code with the Expo-Go application, your mobile phone must be on the same Wi-Fi network as the PC.
Enjoy and give me a star if you like it! 🔥🔥Screenshots
Home Screen![]()
Fox Cards![]()
Fox Details Screen![]()
From here it is possible to edit the existing Fox![]()
"Edit" Modal![]()
"Add" Modal![]()
Example of added fox to the list![]()