React Native Technical Interview

Demo

iOS	Android

Table of Contents

• 1. General Information
• 2. Main Features
• 3. Installation and Setup Instructions
• 4. Libraries
• 5. License

1. General Information

This repository contains source code for A React Native Technical Interview test.

Check out requirements here.

2. Main Features

• Screens

  • Login screen.
  • Dashboard screen with bottom navigation:
    • There will be 2 tabs inside it:
      • Home
      • Favorite

• Login Screen

  • There will be three views.
    1. Enter Email (Input Field)
    2. Enter Password (Input Field)
    3. Login (Button)
  • Login button click → check the user input and allow login with the fixed email & password below.
  • If email & password matched, open the dashboard screen with two tabs. (Email: reactnative@jetdevs.com , Password: jetdevs@123 )

• Home Tab

  • Random user API, load more (pagination), and pull to refresh.
  • The following items should be in each item.
    • Profile picture
    • Name
    • Other details (optional, you can add them to make better UI)
    • Your favorite icon on the top right side.
  • Provide a function to mark users as a favorite/unfavorite.

• Favorite Tab

  • Show your favorite users list.
  • Provide an option to mark users as an unfavorite.

3. Installation and Setup Instructions

This is a new React Native project, bootstrapped using @react-native-community/cli.

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.

4. Libraries

• React Native@0.74:
• Routing:
  • React Navigation
• State management:
  • Zustand:
    • A small, fast and scalable state-management solution using simplified flux principles.
    • Why zustand over redux?:
      • Simple and un-opinionated.
      • Makes hooks the primary means of consuming state.
      • Doesn't wrap your app in context providers.
      • Can inform components transiently (without causing render).
• Forms:
  • React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.
  • @hookform/resolvers; Yup: Form validation.
• API request
  • Axios: HTTP client.
  • React-query:
    • Fetch, cache and update data.
    • Server state management.
• Other libraries
  • @react-native-async-storage/async-storage
  • @shopify/flash-list
  • react-native-heroicons

5. License

MIT license