Introdution

Comic App Demo

• Supports mobile and tablet devices
• Functions: Purchase and read comics
• Demonstrate quickly scaffolding an RN app using npx react-native@latest init. Set up navigation and theme, and use the modern testing tool React Native Testing Library to quickly test the app's functions.

Choice of technologies

• React Native version 0.72.3
• Typescript
• React Navigation: for all navigation-related stuff
  • Packages: @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens @react-navigation/bottom-tabs
• React Native Fast Image for faster image downloading and image caching out of the box as the app has to download and render a lot of images
• Use a custom theme and context to fully control the app appearance(Maybe consider using a UI lib?)
• Testing:
  • React native testing library
  • Jest

Ideas for improvement

• Comic Detail Screen: Add zoom gesture and animation for the comic detail screen cover image(similar to Instagram)
• Add shared-transition animation for the thumbnail to the comic detail screen
• Use reanimated Carousel component instead of the base ScrollView to have a better performance https://github.com/dohooo/react-native-reanimated-carousel
• Carousels should be able to auto-scrolling(allow loop)

To be production ready needs

• Connect to real APIs & implement API module
• Add app Icon
• Add Splash screen
• Add App environment variables
• Choose and set the Font family for the app
• Update to have high-quality assets for icons(@3x)
• Comic Detail Screen: Add zoom gesture and animation for the comic cover image(similar to Instagram)
• Add shared-transition animation for the thumbnail to the comic detail screen
• Optimal design for tablet: add breakpoints (based on screen sizes, like the CSS media query) and optimize layout, sizes, and font sizes… for each device group.
• Add redux, redux-toolkit, RTK query, and setup cache to optimize API loading performance
• Add more tests on dump components
• Add more defensive code in case data could be nullable
• Add E2E testing tools like Detox
• ...

Testing

We will add test for two screens:

• The Store screen
• The Comic detail screen

To run all the tests here

yarn test

Lint check and Typescript compile

# Lint check    
yarn lint

# Typescript check    
npx tsc --noEmit

Github workflow

Will automatically run test and linting and Typescript checks on new code pushed

Demo

Iphone

Video

Screenshots:

Android

iPad

How to run the app

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.