ayghon / image-search-demo

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

Getting Started

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:

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

yarn android

For iOS

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.

Step 3: Explore

This is a simple image search app with two screens:

• Home
• Results

In the Home screen:

• Enter a search term in Home's text field
• Press the Search button
• Number of likes are indicated at the bottom of the screen

In the Results screen:

• Results are paginated, scroll to the bottom of the screen to see more images
• You can pull to refresh results
• You can like images by pressing on the top right button of each image

Step 4: Run tests

I used Detox to create a simple e2e test testing:

• First screen is Home
• Can enter a value in a field and search images
• Can handle field validation for search field
• Can like images

For Android, use this emulator: Pixel_6_Pro_API_33

For iOS, use this simulator: iPhone 14

Learn More

App built with:

• FlashList
• React Hook Form
• Orval
• React Query
• React Navigation
• Nanostores
• Listly API v4
• Detox