Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Why React Native SDK is based on JS SDK? #236
Comments
|
Thanks for your feedback! We will discuss about this internally. Once we made a decision, we keep you updated! If anyone else has the same request or concern, please leave comments or just hit a emoji reply. |
|
I would like to know if there is actually a way to send events from a react-native application. The document in Amplitude "React Native SDK" is inaccurate and people from support has not been able to give me a precise way to use that SDK in my application. |
|
@nestorgm Sorry for the inconvenience! Are you talking about this one? https://help.amplitude.com/hc/en-us/articles/360025220532-React-Native-SDK |
|
Yes. |
|
@nestorgm Where of this doc got you stuck? Could you give us more details? |
|
Well. I'll try to explain myself. In summary, I have made different intents in different ways but, none of they can send an event to reach Amplitude's workspace. |
|
@nestorgm make sure you have installed https://github.com/react-native-community/async-storage. It plays an important role in sending events. It seems for me you have missed that step.
@haoliu-amp I agree with @nestorgm that docs does not include minimal required setup. I installed that packages because I was debugging your code. |
|
I should also mention that code quality around that SDK is quite poor. It misses a lot of required checks/throws that should happen when set up is not correct. Besides that I can say that code base does not follow the most important design principles. Your functions stopped to have single responsibility. Functions name don't represent what they supposed to do. For instance: var _saveCookieData = function _saveCookieData(scope) {
const cookieData = {
deviceId: scope.options.deviceId,
userId: scope.options.userId,
optOut: scope.options.optOut,
sessionId: scope._sessionId,
lastEventTime: scope._lastEventTime,
eventId: scope._eventId,
identifyId: scope._identifyId,
sequenceNumber: scope._sequenceNumber
};
if (AsyncStorage) {
AsyncStorage.setItem(scope._storageSuffix, JSON.stringify(cookieData));
}
scope.cookieStorage.set(scope.options.cookieName + scope._storageSuffix, cookieData);
};In some cases _saveCookieData does more than it's supposed to do. I mean it stores data in AsyncStorage. It was probably right before adding ReactNative support (but I would argue even with that). I would say it should be something like: var _saveScopeMeta = function _saveCookieData(scope) {
const scopeMeta = { ... };
this.storage.save(scopeMeta);
};SDK should init 'right' storage based on platform, etc. It should make code more clean and readable. |
|
React-Native support added lots of conditions in almost every SDKs method. I want to mention I think you should try to think about some kind of dependency injection for cases like that: let osName = this._ua.browser.name;
let osVersion = this._ua.browser.major;
let deviceModel = this._ua.device.model;
let deviceManufacturer = this._ua.device.vendor;
let versionName;
let carrier;
if (BUILD_COMPAT_REACT_NATIVE) {
osName = Platform.OS;
osVersion = Platform.Version;
if (this.deviceInfo) {
carrier = this.deviceInfo.carrier;
deviceManufacturer = this.deviceInfo.manufacturer;
deviceModel = this.deviceInfo.model;
versionName = this.deviceInfo.version;
}
}You can create some device info provider that follows some interface (I will write using TypeScript pseudocode because it's easier to read.): interface DeviceInfo {
osName: string;
osVersion: string;
deviceModel: string;
deviceManufacturer: string;
}
interface DeviceInfoProvider {
getOsName: string;
getOsVersion: string;
getDeviceModel: string;
getDeviceManufacturer: string;
getComposedInfo: DeviceInfo;
}
class UserAgentDeviceInfoProvider implements DeviceInfoProvider {
private readonly _ua = new UAParser(navigator.userAgent).getResult();
public getOsName() {
return this._ua.browser.name;
}
public getComposedInfo() {
return { osName: this.getOsName(), ... };
}
}
class ReactNativeDeviceInfoProvider implements DeviceInfoProvider {
private readonly _ua = new UAParser(navigator.userAgent).getResult();
public getOsName() {
return Platform.OS;
}
public getDeviceManufacturer() {
return DeviceInfo.getManufacturer();
}
public getComposedInfo() {
return {
osName: this.getOsName(),
deviceManufacturer: this.getDeviceManufacturer(),
...
};
}
}This approach allows to build very flexible SDKs. It's easier to test, because you can create provider with mocked data. It's easier to debug, you can find where is an issue in a provider or in a method that uses it. Same approach should be used for storage provider and any other entities that can be injected. I believe that you have 2 possible ways of SDKs future development:
|
|
@alexmbp Thanks for all your feedback, really helpful for us. We had a discussion over option 1 and 2 few weeks ago, and will start doing option 2 later this year. |
|
@haoliu-amp Thanks for letting me know! I appreciate it. Just curios - what approach has been picked for the flutter SDK? @nestorgm have you been able to send events using SDK? |
|
Well, they send me an actual ReactNative example where I can test an prove that SDK is working and sending events. Unfortunately in my application, which is more complex, previous to RN 0.60 and not using new hooks approach, sending of events is not been accomplished. There is any errors and the instance is being updated, but nothing is sent through the network. Still trying to discover why. |
|
@alexmbp Unfortunately Flutter SDK was also not a wrapper solution, we might need to change it too. |
|
@nestorgm Let us know if you need further help! |
|
I'd also like to get the wrapper above the native code for React Native, not just JS SDK, because of the impossibility to add |

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.

Hello Amplitude!
What was the reason to implement react-native SDK on top of JS SDK? Probably it would be more correct to implement bridges around native SDK?
I worry that conditions might lead to possible issues in both browser/react-native. I should also mention that it's quite uncomfortable to exclude react-native dependencies from the package (not super bad, but not good).
Is it a temporary workaround or you are going to invest more in that solution?
Connected issues:
#207 - dependencies
#222 - features
#226 - features