Skip to content

Commit

Permalink
docs: Updating the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Ahmed-Ali committed Jun 23, 2024
1 parent 35501b8 commit 39713d4
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 108 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ You'll find our [complete SDK documentation at https://customer.io/docs/sdk/reac

## Install and initialize the SDK

1. Open your terminal and run `npm install customerio-reactnative`
1. Add iOS dependencies to your project by going to the iOS subfolder and running `pod install`.
1. Open your terminal and run `npm install customerio-reactnative` or `yarn add customerio-reactnative`
1. Add iOS dependencies to your project by going to the iOS subfolder and running `pod install`.
> Note: In your iOS project subfolder, find the Podfile and make sure it uses `use_frameworks!`.
Make sure your deployment target is set to at least 13.0. Before you perform this step, you may want to update your podfile to support [APNs and/or FCM push notifications](https://customer.io/docs/sdk/react-native/push/#install-the-push-package) and [rich push](https://customer.io/docs/sdk/react-native/rich-push/#rich-push) respectively.

Expand Down
49 changes: 11 additions & 38 deletions docs/dev-notes/DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,19 @@

### Getting started

Since this SDK is npm package, it does not need to be compiled separately.
Make sure your you have a working [React Native development environemnt](https://reactnative.dev/docs/set-up-your-environment). Make sure to


## Work on Ami App locally

We use the [Ami App](https://github.com/customerio/amiapp-reactnative) to test the SDK in a real-world environment.

When you install dependencies via yarn/npm in react native app, you can install it from your local machine directly. You need to follow the following steps to use local version of the SDK

1. Go to `package.json` of your react native app
1. Find the SDK dependency i.e. `"customerio-reactnative": "{version}"`
1. Update the SDK version to path of the SDK e.g. `"customerio-reactnative": "../customerio-reactnative"`
1. Run `yarn install` to update dependencies and use local version of SDK instead

### Android

Android SDK can be tested locally by following [instructions from native SDK](https://github.com/customerio/customerio-android/blob/develop/docs/dev-notes/DEVELOPMENT.md#work-on-remote-habits-locally). Once SDK release is installed locally, it can be included in Ami App using any of the following options:

### Option 1: Updating in SDK

Updating [`gradle.properties`](https://github.com/customerio/customerio-reactnative/blob/develop/android/gradle.properties) to use local version by updating following line:
## Work on SDK Locally

1. Firt thing you will need to clone the repo and its submodules
```bash
git clone https://github.com/customerio/customerio-reactnative --recursive
```
customerio.reactnative.cioSDKVersionAndroid=local
```

### Option 2: Updating in Ami App

React Native SDK allows overriding SDK version on app side, so Ami App can override the version and use local release instead by [adding the following line in `gradle.properties`](https://github.com/customerio/amiapp-reactnative/blob/main/android/gradle.properties)

```
cioSDKVersionAndroid=local
```

---

### iOS

iOS SDK cannot be tested locally at this time. You must instead refer to a version of the iOS SDK already released to production.

If you make changes to native code, it sometimes may not be reflected in the app. View the [Ami App docs](https://github.com/customerio/amiapp-reactnative/blob/HEAD/docs/dev-notes/DEVELOPMENT.md#work-on-sdk-locally) for next steps on getting Ami App to install the SDK from your local directory.
2. Then run the following commands in order
- `cd customerio-reactnative`
- `yarn install`
- `yarn example pods` This is required only if you want to run the iOS sample app
- `yarn example start`

> Please note that currently there is no script or automation that helps you make the changes, so you should revert the changes in `package.json` and `yarn.lock` for local version of `customerio-reactnative` before pushing any changes to git.
At this point you can chose whether to run the iOS/Android example apps and you can open the native project for each in `example/ios` and `example/android` if you want to be able to debug the native code with the native development IDE.
82 changes: 14 additions & 68 deletions example/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,22 @@ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped

>**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.
## Step 1: Start the Metro Server
## Install all dependencies
First thing, run `yarn install`
then `yarn pods` to install the iOS pods

First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
## Run the iOS app
You can run the app directly from the command line or from Xcode.

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
### Run from CMD
This app contains two targets, one is set up to use Apple Push Notification Service (APN) and the other uses Firebase Cloud Messaging (FCM)
You can run any of them with one of the two commands
```

## Step 2: 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
yarn ios-apn
# Or
yarn ios-fcm
```

### 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!

For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- 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).

# Troubleshooting

If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [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.
### Run from Xcode
First off, you sill need the Metro server, whic you can run from the command line by running `yarn start`
Then open the `ios/CustomerIO_RN.xcworkspace` file in Xcode and chose one of the two schemes to run the app

0 comments on commit 39713d4

Please sign in to comment.