-
Notifications
You must be signed in to change notification settings - Fork 42
[MOB-10032] Example App: Login page #590
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
lposen
merged 15 commits into
2.0.0-alpha/master
from
2.0.0-alpha/MOB-10032-add-login-page
Nov 21, 2024
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
84bd88a
Add example .env file and update .gitignore for Iterable
lposen b9c5690
Update Android build configuration to use RNIterable properties
lposen 594ce59
Add Gradle wrapper properties and refactor RNIterableAPIPackage to us…
lposen 2d57408
Update package.json to add navigation dependencies and update Babel p…
lposen 3a836e2
Update example project configuration and add react-native-vector-icon…
lposen 3bd96d1
Add initial structure for navigation and components in example project
lposen a7b20e5
ran `bundle install`
lposen 6317f6b
ran `bundle install`
lposen 3c91a97
App builing and loading correctly
lposen 0491d27
Refactor app structure: remove old App component, add Main component …
lposen d90369f
Update README and environment setup: enhance instructions for API key…
lposen f82ed22
Merge branch '2.0.0-alpha/MOB-9671-fix-linting-issues' into 2.0.0-alp…
lposen 539e4b5
Merge branch '2.0.0-alpha/master' into 2.0.0-alpha/MOB-10032-add-logi…
lposen 534c676
Fixed typo, as per PR review
lposen 5b442a9
Fixed typo, as per README
lposen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -80,3 +80,7 @@ lib/ | |
| # React Native Codegen | ||
| ios/generated | ||
| android/generated | ||
|
|
||
| # Iterable | ||
| .env | ||
| .xcode.env.local | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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`. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.