Skip to content
Dima Portenko edited this page Mar 10, 2022 · 12 revisions

1. Create new integration token in Magento Admin to receive store data in API

  1. goto System > integrations

    Step 1

  2. Click on Add New integration button to display the New Integration page.

    Step 2

  3. Enter a unique name for the integration in the Name field. Then enter your admin password in the Your Password field.

    Step 3

  4. Select Resource Access to 'All' under 'API' tab (NOTE: it is only for a quick start, for production you have to allow only resources required by the app)

    Step 4

  5. Click Save to save your changes and return to the integrations page.

    Step 5

  6. Click the Activate link in the grid that corresponds to the newly-created integration.

    Step 6

  7. Click Allow

    Step 7

  8. A dialog similar to the following displays:

    Step 8

  9. Copy the Access Token value and click on the Done button.


2. Setup new CMS block in Magento Admin which will be used in HomePage

  1. goto Content > Blocks

    Step 1

  2. Click on Add New Block button

    Step 2

  3. Put your config inside Content section (config sample)

    Step 3

Note: The images wysiwyg/home/home-main.jpg, wysiwyg/home/home-t-shirts.png, wysiwyg/home/home-eco.jpg were upload in magento manually before this step and category id 30 and 31 are actual category id

If you are having trouble with image slider, follow this guide to Configure Home Page Image Slider

  1. Save your block

    Step 4

  2. Remember the id of this newly created CMS block

    Step 5


3. Installing

  1. Get the code

    git clone https://github.com/troublediehard/magento-react-native.git && cd magento-react-native
  2. Install dependencies

    yarn install
    # only for iOS
    cd ios
    pod install
  3. Rename src/config/magento-sample.js file to src/config/magento.js

  4. Change Magento base url to your magento website url in src/config/magento.js

    Step 4

  5. Replace access_token parameter in magento.js to Access Token from Integration you created.

    Step 5

  6. Replace home_cms_block_id parameter in magento.js with the cms block id you created.

    Step 6

  7. Run the project.

    # for iOS
    react-native run-ios
    # for android
    react-native run-android
  8. Persist application data.

    go to 'src/store/index.js'
    remove 'persistor.purge();'