Thobeka would like an Android app that would allow her to record and track her favourite books while away-from-home.
- React Native
- React Native Picker
- React Native Vector Icons
- React Navigation
This project formed part of the Mobile App Scripting module where we had to develop our app in React Native. Therefore, React Native was used. We could develop with or without Expo.
- Home Screen where the user can view the details of the last book they entered
- Details: Title, Author, Genre, Number of Pages
- Total number of pages read across all entered books
- Average number of pages read across all entered books
- Addition Screen where the user enters the title, author, genre and number of pages of the book they want to add
- History Screen where the last 3 books read and their details are displayed
- Genre Screen where the total number of books read in each genre is displayed
- Code must make use of seperate files for each screen, instead of all the code being within App.js
- Design wireframes and prototype of the app in Figma
- Create a React Native project and implement the Home Screen without any functionality and hardcoded data
- Develop and implement the Addition Screen with book addition functionality and error-checking
- Implement navigation between Home and Addition screen
- Implement the tracking of total and average pages read
- Display the latest book's details on the Home Screen
- Add different Home Screen design when no books have been added
- Develop and implement the History Screen
- Develop and implement the Genre Screen
- Add Context API to store the data of the books entered and the genre count
- Add different History Screen when no books have been added
- 94% for Part 1
- 98% for Part 2
- 100% for Part 3
This was my first time working with React Native (and the React library in general). I learned a lot about React Native, components, navigation, Javascript (ES6+) features such as arrow functions, Context API and working with JSON data.
- The first 2 parts were relatively straightforward (I had one or two hitches that were resolved within a day or two), but Part 3 was particularly difficult.
- I struggled with getting certain components (data grabbed from a JSON array) to re-render through useState
- Getting used to Context API was a little tough, but I understood it in the end (which fixed the above problem)