- 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.
- 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! 🔥🔥
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