Skip to content

Commit 8d9db72

Browse files
DevHossamHassanDevHossamHassan
committed
Update Readme.md
1 parent 0d70d7f commit 8d9db72

File tree

1 file changed

+39
-103
lines changed

1 file changed

+39
-103
lines changed

‎README.md

Lines changed: 39 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,60 @@
11

22
# instabug-reactnative
33

4-
## Dependencies
5-
6-
`react-native` version `>0.26`
7-
84
## Installation
5+
This section explains how to install Instabug SDK into your React Native application.
96

10-
`$ npm install https://github.com/Instabug/instabug-reactnative#master --save`
11-
12-
`$ react-native link instabug-reactnative`
13-
14-
#### iOS installation
15-
16-
1. Open your app `.xcodeproj` file
17-
2. Add the following line to your "Podfile": `pod 'Instabug', '~> 7.0'`
18-
3. run `pod install`
19-
4. Run your project (`Cmd+R`)<
20-
21-
#### Android Manual installation
22-
23-
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
24-
- Add
25-
26-
```java
27-
import com.instabug.reactlibrary.RNInstabugReactnativePackage;
28-
```
29-
30-
to the imports at the top of the file
31-
- Add
7+
1. Open the terminal and navigate to your React Native Directory. Then run the following command.
328

33-
```java
34-
new RNInstabugReactnativePackage("YOUR_ANDROID_APPLICATION_TOKEN",MainApplication.this,"INVOCATION_EVENT");
35-
```
36-
37-
to the list returned by the `getPackages()` method
38-
2. Append the following lines to `android/settings.gradle`:
39-
40-
```gradle
41-
include ':instabug-reactnative'
42-
project(':instabug-reactnative').projectDir = new File(rootProject.projectDir, '../node_modules/instabug-reactnative/android')
43-
```
44-
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
45-
46-
```gradle
47-
compile project(':instabug-reactnative')
48-
```
49-
50-
## Usage
51-
52-
```javascript
53-
54-
import Instabug from'instabug-reactnative';
9+
```bash
10+
npm install instabug-reactnative
11+
```
5512

56-
```
13+
2. Link the bridging files in the npm package to the ios project use the following command.
14+
```bash
15+
react-native link instabug-reactnative
16+
```
17+
3. Add Instabug SDK to your iOS project by adding this to your [**Podfile**](https://guides.cocoapods.org/syntax/podfile.html) (You can skip this step if you are building an Android app only).
18+
```bash
19+
pod 'Instabug', '~> 7.0'
20+
```
21+
4.Then run the following command (You can skip this step if you are building an Android app only).
22+
```bash
23+
pod install
24+
```
25+
CocoaPods will download and install the SDK and add all the required dependencies into your ios project.
5726

27+
## Using Instabug
28+
1. To start using Instabug, import it into your `index.ios.js` and `index.android.js` file.
5829

59-
### iOS Example
30+
```javascript
31+
import Instabug from 'instabug-reactnative';
32+
```
33+
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).
6034

6135
```javascript
62-
class testApp extends Component {
63-
constructor() {
64-
super();
65-
Instabug.startWithToken('YOUR_TOKEN', Instabug.invocationEvent.floatingButton);
66-
}
67-
...
36+
Instabug.startWithToken('IOS_APP_TOKEN', Instabug.invocationEvent.shake);
37+
```
38+
3. Open `android/app/src/main/java/[...]/MainApplication.java`
39+
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).
40+
```javascript
41+
@Override
42+
protected List<ReactPackage> getPackages() {
43+
return Arrays.<ReactPackage>asList(
44+
new MainReactPackage(),
45+
new RNInstabugReactnativePackage("ANDROID_APP_TOKEN",MainApplication.this,"shake","#1D82DC"));
6846
}
6947
```
48+
You can find your app token by selecting the SDK tab from your [**Instabug dashboard**](https://dashboard.instabug.com/app/sdk/).
7049

71-
You can check the rest of the APIs here [Wiki](https://github.com/Instabug/instabug-reactnative/wiki).
72-
73-
74-
If your app doesn't already access the microphone or photo library, you'll need to add the following 2 keys to your app's info.plist file:
75-
76-
NSMicrophoneUsageDescription
77-
NSPhotoLibraryUsageDescription
78-
79-
### Android Example
80-
81-
82-
Usage
83-
84-
To initialize Instabug in your app, you only need to link instabug-reactnative correctly by overwriting
85-
86-
"YOUR_ANDROID_TOKEN" text by your android app token,
87-
"button" text by your desired invocation event,
88-
"light" text by your desired color theme,
89-
and can take a wide range of optional parameters for configuration.
90-
91-
1. Open up `android/app/src/main/java/[...]/MainApplication.java`
92-
93-
after linking the plugin, you should find the getPackages method looks like
94-
95-
```java
96-
@Override
97-
protected List<ReactPackage> getPackages() {
98-
return Arrays.<ReactPackage>asList(
99-
new MainReactPackage(),
100-
new RNInstabugReactnativePackage("YOUR_ANDROID_TOKEN",MainApplication.this,"button","light")
101-
);
102-
}
103-
```
104-
The invocation event can be specified as one of the following values:
105-
50+
## Documentation
51+
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).
10652

107-
| value | native equivalent | description |
108-
|:------------:|:-------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
109-
| 'shake' | InstabugInvocationEvent.SHAKE | Shaking the device while in any screen to show the feedback form. |
110-
| 'button' | InstabugInvocationEvent.FLOATING_BUTTON | Shows a floating button on top of all views, when pressed it takes a screenshot. |
111-
| 'screenshot' | InstabugInvocationEvent.SCREENSHOT_GESTURE | Taking a screenshot using the Home+Lock buttons while in any screen to show the feedback form, substituted with IBGInvocationEventShake on iOS 6.1.3 and earlier. |
112-
| 'swipe' | InstabugInvocationEvent.TWO_FINGER_SWIPE_LEFT | Swiping two fingers left while in any screen to show the feedback form. |
113-
| 'none' | InstabugInvocationEvent.NONE | No event will be registered to show the feedback form, you'll need to code your own and call the method invoke. |
11453

115-
The InstabugColorTheme can be specified as one of the following values:
54+
## Contact US
55+
If you have any questions or feedback don't hesitate to get in touch. You can reach us at any time through **[email protected]**.
11656

11757

118-
| value | native equivalent | description |
119-
|:------------:|:-------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
120-
| 'light'| InstabugColorTheme.InstabugColorThemeLight |light theme is color theme to use for the SDK's UI|
121-
| 'dark'| InstabugColorTheme.InstabugColorThemeDark |Dark theme is color theme to use for the SDK's UI|
12258

12359
## License
12460

0 commit comments

Comments
 (0)