Unable to include AB Testing for React Native application - react-native

I am integrating A/B Testing for my React Native application using Firebase. I have tried two methods - using react-native-ab and react-native-ab-test.
In the first case, I get an error saying "undefined is not an object(evaluating PropTypes.string)"
In the second case, I get an error saying "index.ios.js tries to require 'react-native' but there are several files providing this module. You can delete or fix them."
In both the cases, I get these errors just by importing the dependency in my JS file. By seeing the github pages of both dependencies, I think there is no need to link both the dependencies and they run fine.
Links :
https://github.com/lwansbrough/react-native-ab
https://github.com/landaio/react-native-ab-test

I installed it with this module and it works perfectly, you can try this:
https://github.com/invertase/react-native-firebase
https://rnfirebase.io/docs/v5.x.x/getting-started
and then it is to configure the remote config so that the a-b test works for you
https://rnfirebase.io/docs/v5.x.x/config/reference/config

I'm using A/B testing and works for me with this module:
"react-native-firebase": "3.3.1",
and needs pod too.
pod 'Firebase/Core', '~> 5.11.0'
pod 'Firebase/RemoteConfig', '~> 5.11.0'
My logic
import firebase from 'react-native-firebase';
setRemoteConfigDefaults() {
if (__DEV__) {
firebase.config().enableDeveloperMode();
}
// Set default values
firebase.config().setDefaults({
my_variant_remote_config_param: ''
});
}
/**
* FIREBASE remote config fetch
* #param valueToFetch: remote config key
*/
export const fetchRemoteConfig = async (valueToFetch: RemoteConfigKeysTypes): Promise<string> => {
try {
await firebase.config().fetch();
await firebase.config().activateFetched();
const snapshot = await firebase.config().getValue(valueToFetch);
const response = snapshot.val();
return response;
} catch (error) {
firebase.analytics().logEvent('remote_config_get_value_error', { error, key: valueToFetch });
return null;
}
};
More Info:
https://www.npmjs.com/package/react-native-firebase

Related

React Native Permissions "no permission handler detected"

I am attempting to request photo library access from the user in my react-native project
I am experiencing an issue where it claims that I am not providing the permission handler in my Podfile
I have these lines of code in my Podfile
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
and as well as that, I have imported the relevant information into my Info.plist file
<key>NSPhotoLibraryUsageDescription</key>
<string>For choosing a photo</string>
and I am requesting the photos with a TouchableOpacity making a call to this asynchronous function
import {Platform} from 'react-native';
import {Permissions} from 'react-native-permissions';
...
const getPermission = async () => {
if (Platform.OS !== 'web') {
const {status} = Permissions.check(
Permissions.IOS.PHOTO_LIBRARY,
);
return status;
}
};
const addProfilePhoto = async () => {
const {status} = await getPermission();
alert('Status: ' + status);
};
Would appreciate if anyone notices an issue with my code. I am not using expo and would prefer not to be using it.
EDIT 1:
I ended up reinitializing the project using npx react-native init and copied my source files over, excluding the ios folder. this seemed to work, and was probably an issue with my initial cocoapods setup.

How to get Expo static deep link for development?

I need an Expo static deep link for development to use for Oauth redirect with a 3rd party ( Cognito )
I have used Linking.makeUrl() but this returns a deep link with a dynamic local ipaddress
exp://10.0.0.107:19000 that will not be consistent for other developers on the team.
The documentation at:
https://docs.expo.io/versions/latest/workflow/linking/#linking-module
Says the various environment links look like
Published app in Expo client : exp://exp.host/#community/with-webbrowser-redirect
Published app in standalone : myapp://
Development : exp://wg-qka.community.app.exp.direct:80
I have tried that Development link but it fails to open.
I have the similar issue too, here is my solution
Also post in https://github.com/aws-amplify/amplify-js/issues/4244#issuecomment-586845322
In case anyone still needs help for expo+amplify+social logins
app.json
{
"expo": {
"scheme": "exposchemeappname://" // use any name you like, just make it unique
}
}
App.js
import { Linking } from 'expo';
import * as WebBrowser from 'expo-web-browser';
import awsconfig from './aws-exports';
const amplifyConfig = {
...awsconfig,
oauth: {
...awsconfig.oauth,
urlOpener: async (url, redirectUrl) => {
// On Expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);
if (type === 'success') {
await WebBrowser.dismissBrowser();
if (Platform.OS === 'ios') {
return Linking.openURL(newUrl);
}
}
},
options: {
// Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
AdvancedSecurityDataCollectionFlag: true
},
}
};
const expoScheme = "exposchemeappname://"
// Technically you need to pass the correct redirectUrl to the web browser.
let redirectUrl = Linking.makeUrl();
if (redirectUrl.startsWith('exp://1')) {
// handle simulator(localhost) and device(Lan)
redirectUrl = redirectUrl + '/--/';
} else
if (redirectUrl === expoScheme) {
// dont do anything
} else {
// handle the expo client
redirectUrl = redirectUrl + '/'
}
amplifyConfig.oauth.redirectSignIn = redirectUrl;
amplifyConfig.oauth.redirectSignOut = redirectUrl;
Amplify.configure(amplifyConfig);
Make sure you add the following redirect urls to amplify amplify auth update
# development
exp://127.0.0.1:19000/--/
exp://192.168.1.101:19000/ # depends on your lan ip
# expo client
exp://exp.host/#[EXPO_ACCOUNT]/[EXPO_APPNAME]/
# expo scheme for standalone
exposchemeappname://
you can use Linking module
install it by running: expo install expo-linking
import it at the top of your file: import * as Linking from "expo-linking";
and then use: Linking.makeUrl(); to get the link to your app hosted by expo client
console it to see the url

Cannot read property 'computeModPow' of undefined

After I've upgraded my project to react-native 0.64, aws amplify doesn't work properly. Mainly, I'm trying to make an authentification workflow, but the login functionality throws me the "Cannot read property 'computeModPow' of undefined", even if signup function works completely fine.
After digging into the problem, I found that "aws-cognito-identity-js" is the main problem. If I try to link the library, rn bundler throws an error, that "aws-cognito-identity-js" is already linked, or that I can't override it.
Any suggestions?
Package.json
"react": "16.8.6",
"react-native": "0.60.4",
"aws-amplify": "^1.1.32",
"aws-amplify-react-native": "^2.1.15",
Implementation:
export const loginUser = (credentials: any) => async (dispatch: any) => {
dispatch({ type: LOGIN_USER });
try {
const data = await Auth.signIn(credentials.email, credentials.password);
return loginUserSuccess(dispatch, data);
} catch (error) {
return loginUserFail(dispatch, error);
}
};
const loginUserSuccess = (dispatch: any, data: any) => {
console.log({ data });
dispatch({ type: LOGIN_USER_SUCCESS, attributes: {} });
};
const loginUserFail = (dispatch: any, error: any) => {
console.log({ error });
dispatch({ type: LOGIN_USER_FAILED });
};
Error:
"TypeError: Cannot read property 'computeModPow' of undefined
at BigInteger.nativeModPow [as modPow] (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217690:17)
at AuthenticationHelper.calculateA (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217990:16)
at AuthenticationHelper.getLargeAValue (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217928:16)
at new AuthenticationHelper (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:217910:12)
at CognitoUser.authenticateUserDefaultAuth (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:219720:36)
at CognitoUser.authenticateUser (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:219710:23)
at blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:185525:14
at tryCallTwo (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24791:7)
at doResolve (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24955:15)
at new Promise (blob:file:///6e426a68-ddf4-48ca-86cf-ba3536cb9a13:24814:5)"
I had the same problem and tried to run react-native link amazon-cognito-identity-js according to https://aws-amplify.github.io/docs/js/react#add-auth.
However the Cannot read property 'computeModPow' of undefined error persisted even after cleaning the build, restarting packager, etc.
The problem was that the package never got linked properly with react-native link amazon-cognito-identity-js. This requires us to manually link which is pretty easy to do luckily!
Assuming XCode (Look here to find how to do the similar process for Android) you go to the Project Navigator and right click Libraries folder which contains all your 3rd party .xcodeproj. Choose Add Files... and add the RNAWSCognito.xcodeproj from within the ${projectDir}/node_modules/amazon-cognito-identity-js/ios/ directory. Open the RNAWSCognito.xcodeproj and Products folders and drag libRNAWSCognito.a to Linked Frameworks and Libraries under the General tab. Re-run the project and should be good to go. May have to clean, restart packager, etc.
You can fix this by doing the following:
yarn add amazon-cognito-identity-js
react-native link amazon-cognito-identity-js
cd ios ; pod update ; cd ..
Cheers!
I don't know who needs this, but after I confirmed amazon-cognito-identity-js:
1) was in settings.gradle
2) was in app/build.gradle
I had to make sure to have the below in MainApplication.java
import com.amazonaws.RNAWSCognitoPackage;
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
// eg. new VectorIconsPackage()
new NetInfoPackage(),
new AsyncStoragePackage(),
new RNAWSCognitoPackage()
);
}
Good Luck.

React Native module not working only on iOS

I have recently upgraded my react-native project to 0.60. After upgrading, a native module I have been working with has stopped working on iOS, with the error TypeError: Cannot read property 'show' of undefined.
I have been modifying this native module but the only code I had modified after upgrading to RN 0.60 was Android code. My modified module code is at https://github.com/BradyShober/react-native-braintree-dropin-ui
The file that is calling the module is
import BraintreeDropIn from 'react-native-braintree-dropin-ui';
const showBraintreeUI = async (token, amount) => {
BraintreeDropIn.show({
clientToken: token,
countryCode: 'US',
currencyCode: 'USD',
orderTotal: amount,
googlePay: true,
googleMerchantId: 'merchantID',
applePay: true,
merchantName: "Name",
merchantIdentifier: "ID",
vaultManager: true
})
.then(async (result) => {
console.log(result)
}
catch(error){
console.log(error);
}
})
.catch((error) => {
if (error.code === 'USER_CANCELLATION') {
console.log("User cancelled payment");
}
else {
console.log(error);
}
});
}
export { getBraintreeToken, showBraintreeUI };
The expected result is the opening of the Braintree Drop In UI which works on Android but on iOS is throwing an error TypeError: Cannot read property 'show' of undefined.
I believe this to be an issue with autolinking, I have been able to get it to work if I right click Libraries in Xcode, then Add files and select the module's .xcodeproject and then add the library in Link Binaries with Libraries. I haven't been able to easily find what I would have to change in the module to not have to do those steps as a workaround.
I was able to get it working thanks to some help I got on the Reactiflux discord server. The issue was due to an issue in the module's Podspec that was causing none of the module's source files to be detected. The s.source_files was set to s.source_files = "RNBraintreeDropIn/**/*.{h,m}" instead of s.source_files = "*.{h,m}"

React Native project - cannot make API calls with AwsAmplify through custom library

I have a react-native app (without expo) called myapp.
I have a private custom package called myapp-core, where I handle AwsAmplify services (Auth, Storage) - to do login/signOut/etc.
I want to use myapp-core in myapp project, so I added it as a dependency in package.json ("myapp-core": "file:../myapp-core",) and then yarn install.
The problem I’m facing is that when I call myapp-core.authService.login(username, password) from the mobile project, I catch the error:
“ { “line”:177826, “column”: 17, “sourceURL”:
“http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false”
} ”
From my research, that means my custom library cannot make api calls - but I don’t know exactly.
When I use aws-amplify's Auth object directly in my mobile project, it works.
Hopefully relevant code:
/**=============================**/
/** myapp/CoreServices.js **/
import { AmplifyService } from “myapp-core";
export default class CoreServices {
constructor() {
AmplifyService.configure();
const auth = AmplifyService.authService();
auth
.login(“myusername”, “mypassword”)
.then(user => console.warn("success", user))
.catch(error => console.warn("error", error));
}
}
/**=============================**/
/** myapp-core/AmplifySevice.js **/
import Amplify from 'aws-amplify';
import AuthService from '../AuthService/AuthService';
import awsConfigs from '../aws-exports';
class AmplifyService {
static authServiceInstance = null;
static storageServiceInstance = null;
static configure(config = awsConfigs) {
if (config === null || config === undefined) {
throw new Error('AmplifyService must be initialized with Auth and Storage configurations.');
}
Amplify.configure({
Auth: { /*...*/ },
Storage: { /*...*/ }
});
}
static authService() {
if (!this.authServiceInstance) {
this.authServiceInstance = new AuthService();
}
return this.authServiceInstance;
}
static storageService() {
console.warn('storage service');
// initialize storage service
// return storage service
}
}
I managed to solve my project's issue.
Maybe someone will benefit from my solution.
The problem didn't have anything to do with AwsAmplify, but with the way I linked the projects: myapp-core with myapp.
The issue was that in the myapp-core I am using the aws-amplify package that I would normally link to the mobile projects (react-native link) but in my case I assumed (wrongly) that it wouldn't be the case.
The solution was to link whatever packages were needed in the iOS/Android projects to install the proper pods/gradle libraries, like react-native link amazon-cognito-identity-js for authentication.
... and now I am finally happy :))
Links that shed some light:
https://github.com/facebook/create-react-app/issues/1492
https://eshlox.net/2018/11/12/aws-amplify-react-native-typeerror-cannot-read-property-computemodpow-of-undefined/
In case somebody thinks this isn't the solution and I got lucky or something, please comment or post another response.