This repository is meant to contain logs and references to some assignment work that I've done for Centauri React Native Cohort by Real Dev Squad.

Projects

• Tweeter: Exercises 1-3
  • Snack
• Sencha Teahouse: Exercises 4
  • Snack

Exercises

• Exercise 1: Characters Remaining
  • Task
  • Demo
  • Lessons Learnt
• Exercise 2: Navigation
  • Task
  • Demo
  • Lessons Learnt
• Exercise 3: Swipeable
  • Task
  • Demo
  • Lessons Learnt
• Exercise 4: Cart
  • Task
  • Thinking Process
  • Demo
  • Lessons Learnt

---

Exercise 1: Characters Remaining

Task

Source of instructions can be found here.

Create a simple textbox that displays how many characters are remaining in the "tweet" to send out (Tweets are 280 characters).

If the characters remaining are equal or more than 10, make the info text light gray. If the characters remaining are less than 10, make it Yellow. If you exceed the character limit, make the details Red.

Demo

video6251534266098779532.mp4

Lessons Learnt

• This was pretty simple to do since I had React knowledge.
• I find it interesting how the TextInput component still keeps the bold formatting that I copied elsewhere 😃

Exercise 2: Navigation

Task

Source of instructions can be found here.

Implement a simple 2-screen app, where you have button "Go to details screen", clicking which takes you to the "details" screen and hitting "back" takes you back to the first screen.

Demo

navigation-demo.mp4

Lessons Learnt

Some extra things I tried and learnt about:

• Local storage using React Native Async Storage. The useAsyncStorage hook is really easy to use.
• Flipper for debugging and Flipper Advanced Async Storage Plugin for CRUD actions on local storage.
• State management using React context still works as intended on React Native.

Exercise 3: Swipeable

Task

Source of instructions can be found here.

Upon rendering a list of emails in an inbox, swipe left to delete an email from the list.

Additional Task How can you add an "Undo" feature?

Demo

Simulator.Screen.Recording.-.iPhone.13.-.2022-01-19.at.00.04.15.mp4

Lessons Learnt

• Learnt how to use Native Base library components e.g. Box, Button, Pressable, Toast.
• The Swipeable component involves having to think about how to render the component that is shown after swiping the list item.
• Learnt how to use React Native Gesture Handler Library's Swipeable API.

Ideally, I would want to replicate how Grab does the "undo order" UX with a proper countdown.

Exercise 4: Cart

Task

Source of instructions can be found here.

Create the two screens with the little information you can understand from these screens. (Missing Requirements on purpose). Feel free to make it look pretty.

New Requirement

You cannot pass data as argument when navigating to the second screen.

• navigation.navigate('CheckoutSummary', { numItems }) ❌
• navigation.navigate('CheckoutSummary') ✅

Thinking Process

Figma with comments on my initial thoughts on this task

Demo

Checkout.demo.mp4

Lessons Learnt

• Learnt how to use GraphCMS to add items via their interface & retrieve items using GraphQL in RN app.
• Learnt how to use Zustand for state management and Zustand Flipper plugin for debugging.
• Learnt how to use Expo Cli to make a bare RN project expo-compatible
• It's pretty interesting how I didn't think about passing the number of items using the navigation props at all from the beginning, so I just completed the additional task by chance.