68 lines
3.0 KiB
Markdown
Raw Normal View History

2016-10-03 20:20:59 +02:00
2016-10-17 17:41:42 +02:00
# instabug-reactnative
2016-10-11 12:29:34 +02:00
## Installation
2017-07-11 15:22:06 +02:00
This section explains how to install Instabug SDK into your React Native application.
2016-10-03 20:20:59 +02:00
2017-08-31 02:35:09 +02:00
1. Open the terminal and navigate to your React Native Directory. Then run the following command.
2016-11-02 15:22:35 +02:00
2017-07-11 15:22:06 +02:00
```bash
npm install instabug-reactnative
```
or
```bash
yarn add instabug-reactnative
```
2016-11-02 15:12:42 +02:00
2017-08-31 16:18:31 +02:00
2. Install [**Ruby**](https://www.ruby-lang.org/en/documentation/installation/). (You can skip this step if you're building for Android only)
3. Link the bridging files in the npm package to the ios project use the following command.
2017-07-11 15:22:06 +02:00
```bash
react-native link instabug-reactnative
```
2016-11-02 15:12:42 +02:00
2017-07-11 15:22:06 +02:00
## Using Instabug
1. To start using Instabug, import it into your `index.ios.js` and `index.android.js` file.
2016-10-03 20:20:59 +02:00
2017-07-11 15:22:06 +02:00
```javascript
import Instabug from 'instabug-reactnative';
```
2. Then initialize it in the `constructor` or `componentWillMount`. This line will let the Instabug SDK work with the default behavior. The SDK will be invoked when the device is shaken. You can customize this behavior through the APIs (You can skip this step if you are building an Android app only).
2016-11-02 15:12:42 +02:00
```javascript
2017-07-11 15:22:06 +02:00
Instabug.startWithToken('IOS_APP_TOKEN', Instabug.invocationEvent.shake);
```
3. Open `android/app/src/main/java/[...]/MainApplication.java`
2017-07-24 21:04:01 +02:00
You should find the getPackages method looks like the following snippet. You just need to add your Android app token (You can skip this step if you are building an iOS app only). You can change the invocation event from here, simply by replacing the `"shake"` with any of the following `"button"`, `"none"`, `"screenshot"`, or `"swipe"`. You can change the primary color by replacing the `"#1D82DC"` with any colour of your choice.
In the case that you are using the floating button as an invocation event, you can change the floating button edge and the floating button offset using the last two methods, by replacing `"left"` to `"right"`, and by changing the offset number.
2017-07-11 15:22:06 +02:00
```javascript
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
2017-07-24 21:04:01 +02:00
new RNInstabugReactnativePackage.Builder("YOUR_APP_TOKEN", MainApplication.this)
.setInvocationEvent("shake")
.setPrimaryColor("#1D82DC")
.setFloatingEdge("left")
.setFloatingButtonOffsetFromTop(250)
.build()
2016-10-09 14:50:04 +02:00
}
2016-10-03 20:20:59 +02:00
```
2017-07-11 15:22:06 +02:00
You can find your app token by selecting the SDK tab from your [**Instabug dashboard**](https://dashboard.instabug.com/app/sdk/).
2016-10-17 18:03:04 +02:00
2017-07-11 15:22:06 +02:00
## Documentation
For more details about the supported APIs and how to use them, you can check our [**Documentation**](https://docs.instabug.com/docs/react-native-overview).
2016-11-02 15:12:42 +02:00
2017-07-11 15:22:06 +02:00
## Contact US
If you have any questions or feedback don't hesitate to get in touch. You can reach us at any time through **support@instabug.com**.
2016-11-02 15:22:35 +02:00
2016-11-02 15:12:42 +02:00
2016-10-04 11:41:36 +02:00
## License
This software is released under <a href="https://opensource.org/licenses/mit-license.php">MIT License</a>.
2017-01-20 20:52:04 +02:00
© 2016 Instabug. All rights reserved.