Merge pull request #590 from Iterable/2.0.0-alpha/MOB-10032-add-login-page

[MOB-10032] Example App: Login page

Author: lposen

.gitignore

@@ -80,3 +80,7 @@ lib/
 # React Native Codegen
 ios/generated
 android/generated
+
+# Iterable
+.env
+.xcode.env.local

android/build.gradle

@@ -1,6 +1,6 @@
 buildscript {
   // Buildscript is evaluated before everything else so we can't use getExtOrDefault
-  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["ReactNativeSdk_kotlinVersion"]
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["RNIterable_kotlinVersion"]
 
   repositories {
     google()
@@ -31,11 +31,11 @@ if (isNewArchitectureEnabled()) {
 }
 
 def getExtOrDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["ReactNativeSdk_" + name]
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["RNIterable_" + name]
 }
 
 def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ReactNativeSdk_" + name]).toInteger()
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RNIterable_" + name]).toInteger()
 }
 
 def supportsNamespace() {

android/gradle.properties

@@ -1,5 +1,7 @@
-ReactNativeSdk_kotlinVersion=1.7.0
-ReactNativeSdk_minSdkVersion=21
-ReactNativeSdk_targetSdkVersion=31
-ReactNativeSdk_compileSdkVersion=31
-ReactNativeSdk_ndkversion=21.4.7075529
+RNIterable_kotlinVersion=1.7.0
+RNIterable_minSdkVersion=21
+RNIterable_targetSdkVersion=31
+RNIterable_compileSdkVersion=31
+RNIterable_ndkversion=21.4.7075529
+android.useAndroidX=true
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/src/main/java/com/iterable/reactnative/RNIterableAPIPackage.java

@@ -1,5 +1,6 @@
 package com.iterable.reactnative;
 
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
@@ -12,8 +13,13 @@
 
 public class RNIterableAPIPackage implements ReactPackage {
     @Override
-    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(new RNIterableAPIModule(reactContext));
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new RNIterableAPIModule(reactContext));
+
+        return modules;
     }
 
     @Override

example/.env.example

@@ -0,0 +1,19 @@
+# This file contains environment variables that are used by the example scripts.
+# To use the example scripts, you must first copy this file to `.env` and
+# replace the placeholder text with your own values.
+
+# To add an API key, do the following:
+#  1. Sign into your Iterable account
+#  2. Go to [Integrations > API Keys](https://app.iterable.com/settings/apiKeys)
+#  3. Click "New API Key" in the top right corner
+#  4. Fill in the following fields:
+#     - Name: A descriptive name for the API key
+#     - Type: Mobile
+#     - JWT authentication: Leave **unchecked** (IMPORTANT)
+#  5. Click "Create API Key"
+#  6. Copy the generated API key
+#  7. Replace the placeholder text next to `ITBL_API_KEY=` with the copied API key
+ITBL_API_KEY=replace_this_with_your_iterable_api_key
+
+# Your Iterable user ID or email address
+ITBL_ID=replace_this_with_your_user_id_or_email

example/Gemfile.lock

@@ -0,0 +1,105 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (6.1.7.9)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    claide (1.1.0)
+    cocoapods (1.15.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.15.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.3.4)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.17.0)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    json (2.7.2)
+    minitest (5.25.1)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.3.8)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.25.1)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (>= 3.3.6, < 4.0)
+    zeitwerk (2.6.18)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+
+RUBY VERSION
+   ruby 2.6.10p210
+
+BUNDLED WITH
+   1.17.2

example/README.md

@@ -1,79 +1,123 @@
-This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+This is the Iterable React Native Example App, bootstrapped using
+[`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+Use this to understand how you can use Iterables React Native SDK in your own
+React Native application.
 
 # Getting Started
 
->**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+>**Note**: Make sure you have completed the [React Native - Environment
+>Setup](https://reactnative.dev/docs/set-up-your-environment) instructions till
+>"Creating a new application" step, before proceeding.
+
+## Step 1: Install dependencies
+To install the app dependencies, run the following command from the
+_example app directory_ (the directory in which this document resides):
+
+```bash
+yarn install
+```
+
+Once this is done, you will need to install the pods in the _ios_ folder in the
+_example app directory_.  To do so, run the following:
+
+```bash
+cd ios
+pod install
+```
+
+Once this is done, `cd` back into the _example app directory_:
+
+```bash
+cd ..
+```
+
+## Step 2: Add your environment variables
+In the _example app directory_, there is a file called **.env.example**.  Make a
+copy of this file, name it **.env** and place it in the exampe app directory.
+
+In it, you will find:
+
+```shell
+ITBL_API_KEY=replace_this_with_your_iterable_api_key
+ITBL_ID=replace_this_with_your_user_id_or_email
+```
 
-## Step 1: Start the Metro Server
+Replace `replace_this_with_your_iterable_api_key` with your _mobile_ Iterable API key,
+and replace `replace_this_with_your_user_id_or_email` with the email or user id
+that you use to log into Iterable.
+
+Follow the steps below if you do not have a mobile Iterable API key.
+
+### Adding an API Key
+To add an API key, do the following:
+ 1. Sign into your Iterable account
+ 2. Go to [Integrations > API Keys](https://app.iterable.com/settings/apiKeys)
+ 3. Click "New API Key" in the top right corner
+ 4. Fill in the followsing fields:
+    - Name: A descriptive name for the API key
+    - Type: Mobile
+    - JWT authentication: Leave **unchecked** (IMPORTANT)
+ 5. Click "Create API Key"
+ 6. Copy the generated API key
+
+
+## Step 3: Start the Metro Server
 
 First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
 
 To start Metro, run the following command from the _root_ of your React Native project:
 
 ```bash
-# using npm
-npm start
-
-# OR using Yarn
 yarn start
 ```
 
-## Step 2: Start your Application
+## Step 4: 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
 
 ```bash
-# using npm
-npm run android
-
-# OR using Yarn
 yarn android
 ```
 
 ### For iOS
 
 ```bash
-# using npm
-npm run ios
-
-# OR 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.
 
-1. Open `App.tsx` in your text editor of choice and edit some lines.
-2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+## Congratulations! :tada:
 
-   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+You've successfully run the Iterable Example App. :partying_face:
 
-## Congratulations! :tada:
 
-You've successfully run and modified your React Native App. :partying_face:
+# Troubleshooting
 
-### Now what?
+## Error: `Could not find gem 'cocoapods (>= 1.13, != 1.15.0, != 1.15.1)' in locally installed gems`
 
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+To fix, run the following in the _example app directory_:
 
-# Troubleshooting
+```bash
+bundle install
+```
 
-If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+## Other
+If things are not working and you are stumped as to why, try running the
+following in the _example app directory_:
 
-# Learn More
+```bash
+npx react-native doctor
+```
 
-To learn more about React Native, take a look at the following resources:
+This will give you information about what react native needs in order to run,
+and whether it is accessible to the app.
 
-- [React Native Website](https://reactnative.dev) - learn more about React Native.
-- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
-- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
-- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
-- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
+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`.

example/android/app/build.gradle

@@ -117,3 +117,5 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

example/android/app/src/main/java/iterable/reactnativesdk/example/MainActivity.kt

@@ -1,5 +1,7 @@
 package iterable.reactnativesdk.example
 
+import android.os.Bundle
+
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
@@ -19,4 +21,12 @@ class MainActivity : ReactActivity() {
    */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
       DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}
+
+  /**
+   * For react-native-screens
+   * This being in Kotlin **may** cause issues with react-native-screens
+   */
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null)
+  }
+}