An open API service indexing awesome lists of open source software.

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.

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