Skip to content

Commit 62a287f

Browse files
author
spoeck
committed
doc: add usage
1 parent f20eaf4 commit 62a287f

1 file changed

Lines changed: 108 additions & 0 deletions

File tree

README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,110 @@
11
# react-native-aws-mobile-analytics
22
A react-native module for using Amazon's AWS Mobile Analytics with the aws-sdk
3+
4+
Highly inspirated by the javascript version [aws-sdk-mobile-analytics-js](https://github.com/aws/aws-sdk-mobile-analytics-js)
5+
6+
<br/>
7+
8+
## Usage
9+
Add react-native-aws-mobile-analytics
10+
```
11+
npm install --save react-native-aws-mobile-analytics
12+
```
13+
14+
Add aws-sdk
15+
```
16+
npm install --save aws-sdk
17+
```
18+
19+
react-native-aws-mobile-analytics needs the [react-native-device-info](https://github.com/rebeccahughes/react-native-device-info) package as dependency for an unique client id. Make sure it is correct linked. You may have to call react-native link:
20+
```
21+
react-native link
22+
```
23+
24+
<br/>
25+
26+
Create file `MobileAnalytics.js` where you can do the configuration:
27+
```javascript
28+
import AWS from "aws-sdk/dist/aws-sdk-react-native";
29+
import AMA from "react-native-aws-mobile-analytics";
30+
import {
31+
Platform,
32+
} from 'react-native';
33+
34+
AWS.config.region = 'us-east-1';
35+
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
36+
region: 'us-east-1',
37+
IdentityPoolId: 'us-east-1:4c6d17ff-9eb1-4805-914d-8db8536ab130',
38+
});
39+
40+
41+
let appId_PROD = "2e9axxxxxxx742c5a35axxxxxxxxx2f";
42+
let appId_DEV = "xxxx44be23c4xxx9xxxxxxxxxxxxx3fb";
43+
44+
let options = {
45+
appId: __DEV__?appId_DEV:appId_PROD,
46+
platform : Platform.OS === 'ios' ? 'iPhoneOS' : 'Android',
47+
//logger: console // comment in for debugging
48+
};
49+
50+
const MobileAnalyticsClient = new AMA.Manager(options);
51+
export default MobileAnalyticsClient;
52+
```
53+
54+
<br/>
55+
56+
Before you could send the first event you have to call `MobileAnalyticsClient.initialize(callback)` and wait for the callback. You can handle that in your root component like following:
57+
```javascript
58+
import React from "react";
59+
import MobileAnalyticsClient from "./MobileAnalytics";
60+
import SomeComponent from "./components/SomeComponent";
61+
62+
export default class App extends React.Component {
63+
constructor(){
64+
super();
65+
66+
this.state = {
67+
isMobileAnalyticsLoading: true,
68+
};
69+
70+
MobileAnalyticsClient.initialize(()=>this.setState({isMobileAnalyticsLoading: false}));
71+
}
72+
render() {
73+
if(this.state.isMobileAnalyticsLoading){
74+
return null;
75+
}
76+
return (
77+
<SomeComponent/>
78+
);
79+
}
80+
};
81+
```
82+
83+
<br/>
84+
85+
Now you are able to send event in all your components:
86+
```javascript
87+
import MobileAnalyticsClient from "../MobileAnalytics";
88+
89+
90+
export default class SomeComponent extends Component {
91+
constructor() {
92+
super();
93+
// send a custom event
94+
MobileAnalyticsClient.recordEvent('analyticsDemo', { 'attribute_1': 'main', 'attribute_2': 'page' }, { 'metric_1': 1 });
95+
}
96+
}
97+
```
98+
99+
<br/>
100+
101+
#### Checkout the full example:
102+
[react-native-aws-mobile-analytics-demo](https://github.com/innFactory/react-native-aws-mobile-analytics-demo)
103+
104+
<br/>
105+
106+
## Contributors
107+
108+
[Anton Spöck](https://github.com/spoeck)
109+
110+
Powered by [innFactory](https://innfactory.de/)

0 commit comments

Comments
 (0)