dimaportenko / magento-react-native

React Native mobile app for Magento 2.x

Open source React Native mobile app for Magento 2

Magento React Native is a fully functional eCommerce App for your Magento 2 website. It uses Magento 2 REST API, to dispaly catalog, products, add products to cart, place an order and much more.

📣 Annoncement

This project is over 3 years old and I'm currently working on the new version of it. It will use Magento 2 GraphQL API and a more modern tech stack. The key feature of the new project is that I'm covering the development process with video tutorials on YouTube.

📲 Setup

Follow the Documentation for detailed step by step instructions on how to setup project locally and run the project. Or watch Video Tutorial.

🎨 Theme editing

Modify the design of the App to reflect your brand style - instructions

🎬 Demo

🛣 Roadmap

You can check the GitHub Project or Issues to get an overview of new features, fixes or releases planed.

🗃️ Alternative projects

MageCart: Magento 2 React Native project by Sanjeev Yadav

👨‍💻 Contributors

Thanks goes to these wonderful people (emoji key):

Dmytro Portenko 💻	Sanjeev yadav 💻	Artem 💻	iTox 💻	Taylor Sturtz 💻	Qualwebs 💻	Hungvt 💻
Sidney Lopes 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

📪 You can contact me

I open to any discussion. I have Slack workspace so ping me via email if you want to join.

[email protected]

upwork

linkedin

🎉 Thanks to

They are offering an open-source plan for this project.

🛡 License

MIT License Copyright (c) 2017-2019 Dmytro Portenko.

magento-react-native's Issues

access_token easily found in index.android.bundle

if allow all resources for the access token, are there any security risks concern?

Update demo gif

The current demo gif is outdated. Need to update the demo gif file.

Show this Error on android

Price not show as per customer group..

Are there certain things to report that are not a bug or feature?
Please tell us as exactly as possible about your request, thanks.
We will reply as soon as possible.
Hii Price not show as there is a multipal group of customer. all have different price

getting issue when app is downloaded and installed the node modules

DrawerScreen component accessible at every Screen

Describe the bug
Since react-native-gesture-handler is enabled in the code, dragging left across the screen opens up the Drawer. There are two Drawer used one showing CategoryTree and other showing DrawerScreen for Category component. And as DrawerScreen drawer is the top most Drawer, swiping left across any screen whether Home, Cart, Login etc, it opens up.

Expected behavior

1. CategoryTree Drawer should be only accessible from HomeScreen, Login or Account (depending upon user is authenticated or not) and Cart. As soon as other screen are added in their respective stacks, swiping left should not open Drawer.

As , SearchScreen is first level of Bottom tab navigator and it also show products which contain filters, CategoryTree Drawer should not open on swiping left

2. DrawerScreen drawer should only be accessible from Category and SeacrhScreen
3. From any other screen which are not mentioned here, drawer should remain disabled.

Current Behavior
DrawerScreen can be access from any screen, by swiping left across the screen

Steps to Reproduce

1. Open the app on Android phone
2. Start swiping left across the screen

Solution
First solution(Easy method): Disable gesture
Second Solution: Keep only one Drawer Navigator. Remove DrawerScreen as Drawer and make it a screen that render over top of the Category and search screen
Third Solution: Properly handle both Drawer state as mentioned in Expected behavior.

Screenshots

DrawerScreen accessible from HomeScreen

Smartphone (please complete the following information):

• Magento Version: [2.1.0]
• Device: [Android Emulator Nexus 5X]
• OS: [PIE]
• Version [28]

Additional context
I don't know whether gestures are enabled on iOS or not, but they are enabled on Android.

Product with no custom option throw error on AddToCart

Describe the bug
If a product doesn't contain custom option, clicking on Add To cart button throws error.

Expected behavior
Product should have added to cart and code shouldn't be run which check for custom option if there are no custom option

Current Behavior
Currently in code

Object.keys(selectedCustomOptions).forEach((key) => {
      console.log(selectedCustomOptions[key]);
      customOptions.push({
        optionId: key,
        optionValue: selectedCustomOptions[key],
        extensionAttributes: {},
      });
    })

selectedCustomOptions is null, so iterating over it, is throwing error

Steps to Reproduce

1. Replace store url with http://13.233.82.59/magento/index.php/ and access_token with f6a7lmt61uyy2elepkvbwp4q0904beh5
2. Open App
3. Chose first product in Home Category
4. Select configurable options
5. Click add to cart button

Screenshots

Smartphone (please complete the following information):

• Magento Version: [2.1.0]
• Device: [Android Emulator Nexus 5X]
• OS: [PIE]
• Version [28]

Additional context
I really don't know much about custom options so do test at your end too.

Product that you are trying to add is not available

Describe the bug
"Product that you are trying to add is not available" this message is not cleared when visiting other available product

Expected behavior
"Product that you are trying to add is not available" this message should be cleared after page refreshed..

Current Behavior
"Product that you are trying to add is not available" this message not cleared when visiting available product..its stays there and cleared when add to cart button pressed..
Screenshots*

Smartphone (please complete the following information):

• Magento Version: [e.g. 2.2.3]
• Device: [e.g. xiaomi mi mix2]
• OS: [e.g. miui 10]
• Version [e.g. 10.2.0.1]

Invariant Violation Error

I got the below mentioned error when application build and run.
I am using the following versions:
magento: 2.3
react-native-cli: 2.0.1
react-native: 0.59.10
OS : windows10

IMAGE SCREENSHOT FOR ERROR REFERENCE:

Crash on the checkout

In the Magento admin panel i removed all the countries and regions except South Africa

support push notifications？

Add sales price for products

TODO: Add sales price for products

Getting error Exception in thread "main" java.lang.NullPointerException

Exception in thread "main" java.lang.NullPointerException
at org.gradle.wrapper.BootstrapMainStarter.findLauncherJar(BootstrapMainStarter.java:34)
at org.gradle.wrapper.BootstrapMainStarter.start(BootstrapMainStarter.java:25)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:127)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)

Support Multi currency in App

Is your feature request related to a problem? Please describe.
Allow app to change currency, which will update the currency symbol and currency rate.

Describe the solution you'd like

• Create a Price component which will replace all manually defined price in Text component
• Show drop down to select currency in Home Screen
• Update currency symbol and price rate accordingly in entire app
• When placing order, show price in base currency which will be charged
• In Order List Screen & Order Detail Screen use currency symbol defined by order_currency_code irrespective of selected currency

Additional context
magento 2 Admin setting to add currency - video

If you want I would like to work on it.

Support localization(i18n) in the App

Is your feature request related to a problem? Please describe.
Currently strings are either hard-coded in each file , which is not good for support of localization.

Describe the solution you'd like

1. use i18n-js & react-native-localize package in App
2. Follow similar project structure as in ignite-bowser boilerplate
3. Remove all hard coded strings
4. Reference all strings from i18n folder

Additional context
I have implemented it in magecart, here is the code, do you want this feature, I could work on it.

Categories list displayed but images and Products not displayed yet

Hi i am followed your application i am successfully got the categories . But i am not get the categories images and product images as your follow application.
Especially i am not getting products

I gave my Base URL & AccessToken

how to install on magento2 production

Getting issue

When i was download this app application not run android and ios

getting like this

How to configure CMS block to get image slider and featured product in JSON response?

I have created a cms block and added two category list in it, one is men sale and other is women sale, I don't know which plugin you have used to show image carousel(slider) hence i haven't added any image slider.

When i am hitting this api
http://13.233.82.59/magento/index.php/rest/default/V1/cmsBlock/19

I am getting this response in JSON API
{"id":19,"identifier":"MHP9","title":"Mobile Home Page","content":"<p>{{widget type=\"Magento\\CatalogWidget\\Block\\Product\\ProductsList\" title=\"Men Sale\" show_pager=\"0\" products_count=\"10\" template=\"Magento_CatalogWidget::product\/widget\/content\/grid.phtml\" conditions_encoded=\"a:2:[i:1;a:4:[s:4:type;s:50:Magento|CatalogWidget|Model|Rule|Condition|Combine;s:10:aggregator;s:3:all;s:5:value;s:1:1;s:9:new_child;s:0:``;]s:4:1--1;a:4:[s:4:type;s:50:Magento|CatalogWidget|Model|Rule|Condition|Product;s:9:attribute;s:12:category_ids;s:8:operator;s:2:==;s:5:value;s:2:31;]]\"}}<\/p>\r\n<p>{{widget type=\"Magento\\CatalogWidget\\Block\\Product\\ProductsList\" title=\"Women Sale\" show_pager=\"0\" products_count=\"10\" template=\"Magento_CatalogWidget::product\/widget\/content\/grid.phtml\" conditions_encoded=\"a:2:[i:1;a:4:[s:4:type;s:50:Magento|CatalogWidget|Model|Rule|Condition|Combine;s:10:aggregator;s:3:all;s:5:value;s:1:1;s:9:new_child;s:0:``;]s:4:1--1;a:4:[s:4:type;s:50:Magento|CatalogWidget|Model|Rule|Condition|Product;s:9:attribute;s:12:category_ids;s:8:operator;s:2:==;s:5:value;s:2:30;]]\"}}<\/p>","creation_time":"2019-03-26 09:54:43","update_time":"2019-03-27 07:32:13","active":true}

This JSON response is not in the format that you are getting in your app. Hence I am unable to show anything on Home screen.

I am attaching the link of image showing cms block from magento admin that I have created
Image 1
Image 2

Can you tell me how to configure CMS Block to get JSON response like you are getting for home screeen.

Update README file and add CONTRIBUTING and CODE_OF_CONDUCT

Are there certain things to report that are not a bug or feature?
I would like to update README file to look like this README file
I would like to add CODE_OF_CONDUCT file which is generic and can be added to any project
I would also like to add CONTRIBUTING file like this which will help new contributors to navigate through the process and explain them about some guideline that they need to follow .

What's the point of this update?
I think by providing better readme file and a contributing file, will increase the number of contribution, plus it will give them clear guideline on which things they can work on, how can they get started and help improve the project.

Other context

• The README changes that I am proposing aren't much that different from your already existing README file
• The CODE_OF_CONDUCT file is generic one and can be added without any change.
• The CONTRIBUTING file is pretty specific to how I organize my project and how I want to get help, if you decide to go forward, we need to make CONTRIBUTING file to reflect your style.

Add trailing slash for config url

Handle 401 http error in fetch and show error on screen

Is your feature request related to a problem? Please describe.
Currently in magento/index.js send function doesn't handle 401 or other error HTTP code, which in turn doesn't use full potential of try catch block written in RestAction.js and there is need to manually check if there is error message from the HTTP response.

Describe the solution you'd like
Handle HTTP error status code like 401 and other properly in send function written in magento/index.js file.

Other context
Currently the PR I have created, only in initMagento function in RestAction.js file error is handled, this need to be done in all the function written in RestAction.js, this blueprint need to be followed in RestAction.js

export const someFunction = () => {
  return async dispatch => {
    try {
      const data = await magento.someApiEndpoint();
      dispatch({ type: SOMETHING_SUCCESS, payload: data });
    } catch (error) {
      console.log(error);
      dispatch({ type: SOMETHING_ERROR, payload: { errorMessage: error } });
    }
  };
};

and then these actions need to be handle in reducer like

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SOMETHING_SUCCESS:
      return {
        ...state,
        data: action.payload,
      };
    case SOMETHING_ERROR:
      return {
        ...state,
        errorMessage: action.payload,
      };
    default:
      return state;
  }
};

and then we can access errorMessage from redux and show appropriate error on Screen

Better setup project instructions

Issue
Time to time people asks me to help with the initial project setup.

Solution
To create a detailed step by step setup guide with screenshots.

Order screen show previous user orders, if logout and logged in from new account

DESCRIPTION: I logged it into an account, it showed the order related to that customer, now I logged out and created new account(app instance was never closed), In my order screen it showed previous user order.

Expected behavior:
My order screen should have been blank

But once I closed the app completely and relaunched, it showed blank screen in OrderScreen

a new magento2 react-native project

this project can same with the following？
https://codecanyon.net/item/complete-react-native-app-for-magento2-ecommerce-websites/22174264

Use currency API to fetch currency symbol

Is your feature request related to a problem? Please describe.
Currently the currency symbol are statically defined in src/helper/price.js and priceSignByCode function is used to get currency symbol. There is a currency API /V1/directory/currency which returns the default currency along with currency symbol. This API should be used to append currency Symbol to the prices instead of manually providing currency.

Describe the solution you'd like

1. hit the API GET /V1/directory/currency

{
    "base_currency_code": "USD",
    "base_currency_symbol": "$",
    "default_display_currency_code": "USD",
    "default_display_currency_symbol": "$",
    "available_currency_codes": [
        "USD"
    ],
    "exchange_rates": [
        {
            "currency_to": "USD",
            "rate": 1
        }
    ]
}

2. Save the response in MagentoReducer
3. Use redux to get currency symbol from the reducer

const mapStateToProps = ({ magento }) => {
  const { default_display_currency_symbol: currency_symbol } = magento;
  return {
    currency_symbol
  };
};

Additional context
Magento 2 API list
If you approved, I would like to work on this issue.

Razorpay not implement

Are there certain things to report that are not a bug or feature?
Please tell us as exactly as possible about your request, thanks.
We will reply as soon as possible.
Hii where is rozarpay implement?

FAILURE: Build failed with an exception.

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:installDebug'.

com.android.builder.testing.api.DeviceException: No connected devices!

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 8.676 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

TextInput contentType property

Add where applicable

1. iOS prop textContentType https://facebook.github.io/react-native/docs/textinput#textcontenttype
2. Android prop autoCompleteType https://facebook.github.io/react-native/docs/textinput#autocompletetype

Product prices

When I open the app all prices appear as zero and after couple of seconds actual prices rendered.
Why is this happening and how to resolve this?

Single item placed in cart after successful order placement doesn't show Price

Describe the bug
I'm not able to reproduce this bug every time, but 4-5 times I have encounter this bug, when I'm adding single 'Configurableitem to cart, sometimes, inCart` Screen price is not shown, but as soon as I add second item in cart or remove the same product and re-add again, price does show up.

Expected behavior
Price should be shown in Cart for items, and at bottom total price in Cart should also be shown

Current Behavior
In CartListItem price is 0
Also at bottom where total price in Cart is shown, is not showing

Steps to Reproduce
(Not 100% accurate)

1. Use my store url and access token
2. Try adding single item in Cart from list in HomeScreen
3. Open Cart screen
4. Try removing item from cart add different product in Cart from HomeScreen

Screenshots

Smartphone (please complete the following information):

• Magento Version: [2.1.0]
• Device: [Android Emulator Nexus 5X]
• OS: [PIE]
• Version [28]

Additional context
I will try to find a way to reproduce this app, if not close this issue if afterwards

Create single file for theme related content

Is your feature request related to a problem? Please describe.
I would like to extract all colors, padding, margin, text size etc into single theme.js. This will help customize the styling of the app really straight forward, and client can modify the theme to reflect their brand style.

Describe the solution you'd like

1. Create colors.js to hold all colors used in app
2. Create spacing.js that will hold standard spacing used for padding and margin.
3. Create typography.js to hold standard Text styles that can be reuse in entire app
4. Merge all color, spacing, typography into single theme.js which will be used by all component

Additional context
I have implemented in my magecart repo, you can see it for reference.

Can I do it?

Cache images with react-native-fast-image library

Is your feature request related to a problem? Please describe.
Images are loading from the website every time, so it causes unnecessary delays and traffic usage.

Describe the solution you'd like

1. Install react-native-fast-image
2. Replace all

import { Image } from 'react-native';  
<Image ...

usages in the project with

import FastImage from 'react-native-fast-image';  
<FastImage ...

Need product name text overflow hidden

Can bigger product name adjusted in one line and more text can be hidden so that it doesn't effect the product image to displaced and text will be within the product name box.thanks

Error: JSON Parse error: Unrecognized token '<'

I Change Base Url and Change token And run the app.. Its giving me Error like

[SyntaxError: JSON Parse error: Unrecognized token '<']
LOG [Error: JSON Parse error: Unrecognized token '<']

Cart refreshes and blanks out

Hi,

For some weird reason cart resets itself when I navigate between pages.

Store IP - http://13.127.13.193/

I can email you admin credentials.

Let me know if you can help.

getCountry function not called in CheckoutCustomerAccount

Describe the bug
In CheckoutCustomerAccount component componentDidMount (CDM) function is written twice, hence the first CDM function is never called which contain logic to fetch countries, due to which in form there is no country to select. Hence no shipping

componentDidMount() {
    // this function is never getting called
    this.props.getCountries();
  }

componentDidMount() {
  // Hardcode US
  // this.props.updateCheckoutUI('countryId', 'US');
  // Clear the error
  this.props.updateCheckoutUI('error', false);
  // Clear loading
  this.props.checkoutCustomerNextLoading(false);

Expected behavior

1. Available Country should be fetched in CheckoutCustomerAccount
2. Dropdown need to be shown in UI to select country

Current Behavior

1. getCountry function is not getting called
2. There is no dropdown to select country in CheckoutCustomerAccount which result in no shipping, and cannot place product

Steps to Reproduce

1. Add item to cart
2. Press checkout
3. The country field is plain input box

Smartphone (please complete the following information):

• Magento Version: [2.1.0]
• Device: [Android Emulator Nexus 5x]
• OS: [Android PIE]
• Version [Android API 28]

Additional context
This problem was introduced in this commit

Cart Item Price show 0

Describe the bug
A clear and concise description of what the bug is.

Expected behavior
A clear and concise description of what you expected to happen.

Current Behavior
What is the current behavior?

Steps to Reproduce
Please provide detailed steps for reproducing the issue.

1. Navigate to...
2. Press on...
3. Scroll to...
4. See error...

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Magento Version: [e.g. 2.1.0]
• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

About Magento react native app Home page

Hi, I'm new to magento and react native, I'm up magento 2.2 server and Run this app on android but in app magento home page not shoving and other view are working perfectly.
please guide me how to config the magento sever or app to show the mobile home page,.

thank you .

Problem build demo with react-native-vector-icons

I have a problem build this demo:

Problem

A problem occurred evaluating project ':react-native-vector-icons'.

Could not find method google() for arguments [] on repository container of type org.gradle.api.internal.artifacts.dsl.DefaultRepositoryHandler.

Can add to cart button adjusted after product gallery?

Please adjust the add to cart button and quantity info after product image gallery in product detail page so that customer don't have to scroll down or search for add to cart button while initiating add to cart button on multiple lines short discription

Can you add push notification in this app it would great feature for targeting cutomers

Is your feature request related to a problem? Please describe.
No its not related to problem.

Storybook integration

Is your feature request related to a problem? Please describe.
I would like to incorporate integrate storybook into the App. This will help to keep track of all the ways component especially in common folder can render, provided different props.

Describe the solution you'd like

1. Add storybook, react-native-storybook-loader packages in the app
2. Hook storybook into the app
3. Writes stories for component present in common folder

Additional context
Should I do it?

magento app does not place order

when i am place its say your order is sucessfully done bur then i check in my admin pannel it does not have order

Eslint config is broken

TODO: fix eslint config

error after install apk

Payment gateway

Upgrade: React Native from 0.59.2 to 0.61.2

Is your feature request related to a problem? Please describe.
React native >= 0.60 has some major changes like

• AndroidX support
• Hermes(new JavaScript engine) support
• 64 bit support
• fast refresh
• Auto link library (no need to manually link packages)
• With Hermes unable, build size decreases and performance improves

Describe the solution you'd like
Follow these steps to upgrade react native

1. Run the upgrade command

   react-native upgrade
   

   Some files will not get upgraded, those files need to be changes manually

2. Open React Native upgrade helper and choose 0.59.2 in left column and latest react native version in right column
   

3. Files which were not changes automatically in Step 1, modified them manually using step 2

4. Run the App and test

Additional context
Official React Native upgrade guide

TODO

• Upgrade react native from 0.59.5 to ^0.61.2
• Enable hermes
• Test entire app for any case of failure

Remove unnecessary use of Promise in API call

Is your feature request related to a problem? Please describe.
Currently API calling required three nested Promises use

1. from fetch, inetrnal Promise

fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
            // do something
        })
        .catch(error => {
           // do something
        });

2. top level Promise return from function send in magento/index.js file

send(url, method, params, data, type) {
    // ...
    return new Promise((resolve, reject) => {
      console.log({ uri, method, headers, data, ...params });
      fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          // ...
        })
        .then(responseData => {
          // ...
        })
        .catch(error => {
          // ...
        });
    });
  }

3. Promise written in admin/index.js, customer/index.js and guest/index.js file

export default magento => {
  return {
    getStoreConfig: () => {
      return new Promise((resolve, reject) => {
        const path = '/V1/store/storeConfigs';

        magento
          .get(path, undefined, undefined, ADMIN_TYPE)
          .then(data => {
            //...
          })
          .catch(e => {
            // ...
          });
      });
    },
  };
}

The third Promise is totally unnecessary. We can simply return the Promise from 2 into the third one, in turn reducing the unnecessary memory required to create new promise and writing repeated code in admin/index.js, customer/index.js and guest/index.js file which is violating DRY(Do Not Repeat) Principle.

Describe the solution you'd like
Simply return the Promise return from send function directly in admin/index.js functions

export default magento => {
  return {
    getStoreConfig: () => magento.get('/V1/store/storeConfigs', undefined, undefined, ADMIN_TYPE),
  };
}

Additional context
We can discuss, I would be willing to make some changes in the pull request.

could you sent a invite Slack link to me?