Merge pull request #592 from Iterable/2.0.0-alpha/MOB-10034-add-commerce-section

[MOB-10034] Example App: commerce

Author: lposen

example/Gemfile.lock

@@ -108,6 +108,94 @@ To fix, run the following in the _example app directory_:
 bundle install
 ```
 
+## Error: `Signing for 'ReactNativeSdkExample' requires a development team.  Select a development team in the Signing & Capabilities Editor`
+
+- Open XCode
+- Go to 'Signing & Capabilities'
+- Choose a team
+- Stop your application, then rerun
+
+If you are still experiencing issues, try deleting `ios/.xcode.env.local`
+
+## Error: `/Library/Ruby/Gems/XYZ does not have write permissions` or `/usr/local/lib does not have write permissions`
+
+This is a common issue with using ruby on Macs.  You can modify the read/write
+access of the computers Ruby folder, but a better (and safer) way is to use
+`rbenv` and [`homebrew`](https://brew.sh/) by doing the following:
+
+1. **Install/update homebrew**
+If you have homebrew, update it by running: `brew update && brew upgrade`.
+If you do not have homebrew, follow the [installation
+instructions](https://brew.sh/).
+
+2. **Install `rbenv` and `ruby-build`**
+```bash
+# Uninstall ruby (you can try skipping this step if you have concerns)
+brew uninstall --ignore-dependencies ruby
+# Install `rbenv` and `ruby-build`
+brew install rbenv ruby-build
+# Install the correct ruby version, eg: 3.3.6
+rbenv install 3.3.6
+# Default to using this ruby version
+rbenv global 3.3.6
+```
+
+3. **Tell your computer to use `rbenv`**
+Add the following to the top of your `.zshrc` or `.bash_profile`:
+```zsh
+eval "$(rbenv init -)"
+```
+
+4. **Reload `.zshrc` or `.bash_profile`**
+Run the following in your terminal:
+```bash
+# If using zsh
+source ~/.zshrc
+# If using bash
+source ~/.bash_profile
+```
+
+5. **Check that the correct ruby version is loading**
+Run the following in your terminal:
+```bash
+ruby --version
+```
+If working, it should say `3.3.6`
+
+## Error: `bad interpreter: No such file or directory` on `pod install`
+Reinstall cocoapods by doing the following:
+```bash
+# Uninstall current version of cocoapods
+brew uninstall cocoapods
+# Install a fresh version of cocoapods
+brew install cocoapods
+# Recreate link to cocoapods
+brew unlink cocoapods && brew link cocoapods
+```
+
+Run `pod install` again, and it should work.
+
+## Error: `com.android.builder.errors.EvalIssueException: SDK location not found.  Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your projects local properties file`
+
+This means that the project cannot find the location of your Android SDK.
+
+There are two ways to fix this:
+
+### 1. Add `ANDROID_HOME` to your *.zshrc* or *.bashrc* file.
+1. Open your *.zshrc* or *.bashrc*
+2. Add the following to the file:
+   ```bash
+   ANDROID_HOME=/path/to/Android/SDK # EG: ANDROID_HOME=/Users/My.Name/Library/Android/sdk
+   ```
+
+### 2. Add a *local.properties* file to *example/android*.
+1. Go to *example/android*
+2. Create a file called *local.properties*
+3. In *local.properties*, add:
+   ```bash
+   sdk.dir=/path/to/Android/SDK # EG: sdk.dir=/Users/My.Name/Library/Android/sdk
+   ```
+
 ## Other
 If things are not working and you are stumped as to why, try running the
 following in the _example app directory_:
@@ -120,4 +208,44 @@ This will give you information about what react native needs in order to run,
 and whether it is accessible to the app.
 
 Take a look at the OS you are trying to run.  Make sure that everything has been
-installed and that the necessary items have been added to your `PATH`.
+installed and that the necessary items have been added to your `PATH`.  Below
+are example items that are commonly added to the *.zshrc* or *.bashrc*:
+
+```zsh
+# Load rbenv if using (suggested)
+if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
+
+# Load nvm if using (suggested)
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
+[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
+
+# General paths
+export PATH=$HOME/bin:/usr/local/bin:$PATH
+export PATH=$PATH:$(pwd)/bin
+
+# Homebrew setup
+if [ -d "/opt/homebrew/bin" ]; then
+    export PATH="/opt/homebrew/bin:$PATH"
+fi
+
+# Android paths and variables
+export ANDROID_HOME=$HOME/Library/Android/sdk
+export ANDROID_SDK_ROOT=$ANDROID_HOME
+export PATH=$PATH:$ANDROID_HOME
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+export PATH=$PATH:/opt/homebrew/bin/gradle
+export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
+
+# Java variables
+export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
+
+# Node variables and settings
+export NODE_BINARY=node
+export NODE_OPTIONS=--openssl-legacy-provider
+```
+
+You should also look through the [React Native environment setup
+docs](https://reactnative.dev/docs/set-up-your-environment) and make sure that
+you did not miss anything.

example/README.md

@@ -12,7 +12,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle")
+        classpath('com.android.tools.build:gradle:8.7.2')
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
     }

example/android/build.gradle

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1900,4 +1900,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: aab4a30773612c4ffb73be13f5b169b8b156f374
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

example/ios/Podfile.lock

@@ -1,6 +1,7 @@
 import { Route } from '../../constants';
 
 export const routeIcon = {
+  [Route.Commerce]: 'cash-outline',
   [Route.Inbox]: 'mail-outline',
   [Route.User]: 'person-outline',
 };

example/src/components/App/App.constants.ts

@@ -8,8 +8,9 @@ import type { MainScreenParamList } from '../../types';
 import { routeIcon } from './App.constants';
 import { getIcon } from './App.utils';
 import { User } from '../User';
-import Inbox from '../Inbox';
+import { Inbox } from '../Inbox';
 import { useIterableApp } from '../../hooks';
+import { Commerce } from '../Commerce';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
@@ -65,6 +66,13 @@ export const Main = () => {
             },
           })}
         />
+        <Tab.Screen
+          name={Route.Commerce}
+          component={Commerce}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
         <Tab.Screen
           name={Route.User}
           component={User}

example/src/components/App/Main.tsx

@@ -0,0 +1,31 @@
+export type CommerceItem = {
+  id: string;
+  name: string;
+  icon: any;
+  subtitle: string;
+  price: number;
+};
+
+export const items: CommerceItem[] = [
+  {
+    id: 'black',
+    name: 'Black Coffee',
+    icon: require('./img/black-coffee.png'),
+    subtitle: 'Maximize health benefits',
+    price: 2.53,
+  },
+  {
+    id: 'cappuccino',
+    name: 'Cappuccino',
+    icon: require('./img/cappuccino.png'),
+    subtitle: 'Tasty and creamy',
+    price: 3.56,
+  },
+  {
+    id: 'mocha',
+    name: 'Mocha',
+    icon: require('./img/mocha.png'),
+    subtitle: 'Indulge yourself',
+    price: 4.98,
+  },
+];