Update README and environment setup: enhance instructions for API key setup, modify navigation steps, and improve dotenv configuration in Babel

Author: lposen

example/.env.example

@@ -12,8 +12,7 @@
 #     - 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
+#  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

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 start
+```
+
+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
+```
+
+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 1: Start the Metro Server
+## 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/babel.config.js

@@ -10,7 +10,23 @@ module.exports = function (api) {
   return getConfig(
     {
       presets: ['module:@react-native/babel-preset'],
-      plugins: ['module:react-native-dotenv'],
+      plugins: [
+        [
+          'module:react-native-dotenv',
+          {
+            envName: 'APP_ENV',
+            moduleName: '@env',
+            path: '.env',
+            blocklist: null,
+            allowlist: null,
+            blacklist: null, // DEPRECATED
+            whitelist: null, // DEPRECATED
+            safe: false,
+            allowUndefined: true,
+            verbose: false,
+          },
+        ],
+      ],
     },
     { root, pkg },
   );

example/ios/Podfile.lock

@@ -1896,7 +1896,7 @@ SPEC CHECKSUMS:
   RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06
   RNVectorIcons: 6382277afab3c54658e9d555ee0faa7a37827136
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47
+  Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
 PODFILE CHECKSUM: aab4a30773612c4ffb73be13f5b169b8b156f374
 

example/src/hooks/useIterableApp.tsx

@@ -1,11 +1,4 @@
-import {
-  Iterable,
-  IterableAction,
-  IterableConfig,
-  IterableInAppShowResponse,
-  IterableLogLevel,
-} from '@iterable/react-native-sdk';
-
+import type { StackNavigationProp } from '@react-navigation/stack';
 import {
   type FunctionComponent,
   createContext,
@@ -15,7 +8,14 @@ import {
 } from 'react';
 import { Alert } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import {
+  Iterable,
+  IterableAction,
+  IterableConfig,
+  IterableInAppShowResponse,
+  IterableLogLevel,
+} from '@iterable/react-native-sdk';
+
 import { Route } from '../constants/routes';
 import type { RootStackParamList } from '../types/navigation';