rimsila / kitten-app

🚀 KittenApp - React Native

Feature

• Have two screen:

  • KittenList: List with random kitten images with randomly generated names.
  • KittenItem: view kitten detail

• KittenList Screen:

  • On application startup all images retrieved from kitten API then combine with randomly name and description with loading indicator while images are being fetched to display in list is empty will show empty message.
  • User can filter number to displayed kitten list (30/50/100)
  • Show Online/Offline status on the Header right
  • Show specific count of displayed kitten items in header with title

• KittenItem Screen:

  • header with go back and title
  • in Kitten item screen render kitten image at the top followed by it’s name and display kitten description below.

• BONUS

  • Generate signed .apk file, release version in root folder: app-release.apk
  • Write tests for some react-native component and utils
  • Store kitten data in redux state and support offline mode and auto refetch data when online

KittenApp is React Native application. This project is configured with redux, redux thunk with redux-tookit and redux persist. Uses latest version of react-navigation (v6) and using Restyle for type-enforced system to design UI components

Technologies Use

• Typescript 4 support.
• React Hooks
• React Navigation 6 theming support.
• React Native Gesture Handler
• Shopify restyle - library for building UI libraries with theming support
• Redux with hooks support
• Redux Persist
• Axios
• Jest
• Eslint (Airbnb config)

Prerequisites

• Node v10 (it is recommended to install it via NVM)
• Yarn
• A development machine set up for React Native by following these instructions

Getting Started

1. Clone this repo, https://github.com/rimsila/kitten-app.git

2. Go to project's root directory, cd kitten-app

3. Run yarn to install dependencies

4. Run yarn pod or yarn pod-m1 to install pod on ios

5. Start developments:

   • On Android:
     • Run react-native run-android or Use Android Studio
   • On iOS:
     • Run yarn react-native run-ios Or
     • Open yarn xcode in Xcode
     • Hit Run after selecting the desired device

6. Enjoy!!!