This application demonstrates how to integrate the Segment react-native library with a mobile application running on Android and iOS. This application also uses the Shopify GraphQL APIs.

License: MIT License

JavaScript 89.58% Python 1.38% Java 1.65% Objective-C 6.63% Ruby 0.76%

segmentmobiledemoreactnative's Introduction

SegmentMobileDemoReactNative

React Native App Utilizing Ignite

⬆️ How to Setup

Step 1: git clone this repo

Step 2: cd to the cloned repo

Step 3: yarn install

Step 4: cd ./ios && pod install (make sure you have Cocoapods set up)

If you are updating from an old version of this app - you may want to delete all of your Pods and reinstall them and rebuild the app (iOS only).

Make sure that you are using the Cocapods-generated .workspace file when working with xcode otherwise you will have problems.

In order for this app to be built and deployed to a simulator, you will need to enable a developer profile in xcode, even when using the command line build tools.

▶️ How to Run App

cd to the repo
Run Build for either OS

for iOS
- run react-native run-ios
for Android
- Run Genymotion
- run react-native run-android

🔐 Secrets

This project uses react-native-config to expose config variables to your javascript code in React Native.

You have to provide a .env file with at least the following entries:

SEGMENT_WRITE_KEY= <your Segment write key>
SHOPIFY_API_URL= <your shopify API endpoint>
SHOPIFY_AUTH_TOKEN= <your shopify auth token>

For the app to work out of the box, you will want to copy the Shopify data format used in this app: Segment Demo eCommerce Store.

segmentmobiledemoreactnative's People

Stargazers

Watchers

segmentmobiledemoreactnative's Issues

Create per-screen headers

We are using StackNavigator - clicking cart multiple times adds it to the stack which creates weird behavior.

Black separator bar missing in main page header

Add a loading splash screen while products are loading

The app shows a blank screen while loading - show a Segment badge with a blurb and a spinner....

Add a confirmation dialog when clearing bag

Disable yellow warnings

Yellow warnings distract from the simulator demo.

Add item quantity per size

Clicking 'Add to Cart' for an item adds separate line items
- Need a quantity property
- Adding more than one of an item should increase that variant's quantity; each variant is a separate line item in the cart