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.

• 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

• 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)

• 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
• ...

We will add test for two screens:

• The Store screen
• The Comic detail screen

To run all the tests here

yarn test

# Lint check    
yarn lint

# Typescript check    
npx tsc --noEmit

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

Video

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

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

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:

# using npm
npm run android

# OR using Yarn
yarn android

# 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.