React Native Image Gallery

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

Screenshots & Demo

Below are demo videos showcasing key functionalities on both iOS and Android.

iPhone Gallery and Like Button	iPhone Zoom and Like Button
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-09.at.21.05.52.mp4	Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-09.at.21.41.39.mp4

HeartWithLiquidButton is a custom component that animates the heart icon with liquid effect when the user likes an image. The component is used in the Gallery screen to like an image. More info in the YouTube video below:

https://youtu.be/JlXARcxCoDY

HearthWithLiquidActivityIndicator is an ActivityIndicator that animates the heart icon with liquid effect. The component is used in the Gallery screen to indicate that the images are being loaded. More info in the YouTube video below:

https://youtu.be/2GFf_Z981Zo

The app includes support for pinch to zoom, pan, and double-tap to zoom in and out of images. The video below showcases the zoom functionality on both iOS and Android. The app is written in typescript with static typing and includes also jest tests written with react-native-testing-library.

https://youtu.be/eU95lYyO7qM?si=4lmYIYbeNyJ1x1Ab

CLICK TO DISPLAY MORE VIDEOS

iPhone

iPhone Favorites Pictures

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-09.at.21.06.46.mp4

iPhone Position Indicator

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-02-09.at.21.32.34.mp4

Android

Android Gallery, Zoom and Like button

android.test.small.mp4

Installation

Prerequisites

• React Native Environment: Ensure you have set up your React Native development environment. (See the Set Up Your Environment guide.)
• Node Version: This project uses Node.js v22.13.1.
• Refer to the additional instructions on how to install the project in case of issue during the installation.

Essential Steps

1. Create a .env File

In the project root, create a .env file and add your Pexels API key:

PEXELS_API_KEY=your_api_key

2. Install the dependencies

yarn install

or with npm:

npm install

2. Start Metro From the project root, run:

yarn start

or with npm:

npm start

3. Run the App

Open a new terminal and run one of the following commands:

Android Instructions:

yarn android

or with npm:

npm run android

iOS Instructions

The first time you create a new project, run the following commands to install cocoapods dependencies:

bundle install

Then, every time you update your native dependencies, run:

bundle exec pod install

Now you can build the project with the command:

yarn ios

or with npm:

npm run ios

For additional installation details (such as CocoaPods setup for iOS), please refer to additional instructions.

Running Tests

This project uses Jest for testing. To run the tests, execute:

yarn test

or with npm:

npm run test

Note: Console messages are suppressed during tests. To enable logging for debugging, remove the mock on global.console in jest-setup.js.

Troubleshooting

If you encounter issues, please refer to the React Native Troubleshooting Guide and also the instructions on how to Set Up Your Environment.