Amazon-Clone in React Native

Description

This is an Amazon clone built using React Native. The project replicates core functionalities of the Amazon app, including navigation, product browsing, and user-friendly UI components.

Libraries

@react-navigation/native: Handles navigation between screens in the app.
react-native-screens: Optimizes screen navigation performance with native primitives.
react-native-safe-area-context: Ensures the app content is rendered within safe areas like notches and status bars.
@react-navigation/stack: Enables stack-based navigation for handling multiple screens.
react-native-gesture-handler: Improves handling of gestures such as swipes, taps, and scrolls.
@react-native-masked-view/masked-view: Provides masking support for navigation animations.
react-native-linear-gradient: Adds smooth linear gradient effects to various components.
react-native-swiper: Implements swiping functionality for features like product carousels or image sliders.
react-native-vector-icons: Allows usage of customizable vector icons within the app.

Preview

Take a look at some previews of the app:

Home Screen

Products Screen

Installation

To run the project locally, follow these steps:

Clone the repository:

git clone https://github.com/KamilErdogmus/RN-Amazon-Clone.git

Navigate to the project directory:

cd your-repository

Install dependencies:

Using npm

npm install

Using yarn

yarn install

If you're using MacOS, navigate to the ios folder and install CocoaPods dependencies:

cd ios

 pod install

 cd ..

Step 1: Start the Metro Server

First, you'll need to start Metro, the JavaScript bundler that comes with React Native.

To start Metro, run the following command from the root of your React Native project:

Using npm

npm start

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

Using Yarn

yarn android

For iOS

using npm

npm run ios

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.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

Open App.jsx in your text editor of choice and edit some lines.
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Now what?

If you want to add this new React Native code to an existing application, check out the Integration guide.
If you're curious to learn more about React Native, check out the Introduction to React Native.

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

React Native Website - learn more about React Native.
Getting Started - an overview of React Native and how setup your environment.
Learn the Basics - a guided tour of the React Native basics.
Blog - read the latest official React Native Blog posts.
@facebook/react-native - the Open Source; GitHub repository for React Native.