I'm having a hard time trying to activate my react native switch, getting the app notification.
the user must activate the option to receive notification from the application on the device.
this procedure has already been performed, the second step is
I have a react native switch
{
name: 'storeNotificationSetting',
params: ['notification'],
function: (state, action) => {
return {...state, notification: action.notification};
},
},
saveSwitchChange = isTouchIdEnabled => {
this.props.storeNotificationSetting(isTouchIdEnabled);
};
<Switch
label='Ativar Notificações'
name='isNotificationsEnabled'
onChange={this.saveSwitchChange}
/>
function mapStateToProps(state) {
const { notification } = state.global;
return {
notification,
};
}
function mapDispatchToProps(dispatch) {
const { storeNotificationSetting } = globalActionCreators;
return {
storeNotificationSetting: function (isTouchIdEnabled) {
return dispatch(storeNotificationSetting(isTouchIdEnabled));
},
};
}
How can I make my saga take the mobile device feature and activate my switch so that this notification functionality is activated?
Related
I'm writing a project in React-Native for both iOS and Android, I want to send notification automatically when users just install app but don't login or sign-up after 3 days. I'm using firebase cloud data for the project. Is it possible to do that over coding or firebase?
Using Firebase, you can get the FCM token for the device even without them being logged in. You will needs to get their permission to receive notifications though.
import React, { Component } from "react";
import { Text, View } from "react-native";
import firebase from "react-native-firebase";
export default class componentName extends Component {
async componentDidMount() {
this.checkPermission();
}
//1
async checkPermission() {
firebase
.messaging()
.hasPermission()
.then((enabled) => {
if (enabled) {
this.getToken();
} else {
this.requestPermission();
}
});
}
//2
async requestPermission() {
firebase
.messaging()
.requestPermission()
.then(() => {
this.getToken();
})
.catch((error) => {});
}
//3
async getToken() {
fcmToken = await firebase.messaging().getToken();
if (fcmToken) {
//
//
//
//
//
// Call your API here
//
//
//
//
//
//
}
}
render() {
return (
<View>
<Text> Your APP </Text>
</View>
);
}
}
Im trying to implement the authy-node phone verification with firebase functions and my app in react-native the message is sent to the correct mobile phone but for some reason the data I get back from the api is null any ideas out there
My Api firebase functions
import * as functions from 'firebase-functions';
const authy = require('authy')('mySecret');
export const getCode = functions.https.onCall((data, context) => {
const {
number, countryCode
} = data;
return authy.phones().verification_start(number, countryCode, { via:
'sms', locale: 'en', code_length: '4' }, (err: any, res: any) => {
if (err) {
throw new functions.https.HttpsError(err);
}
return res;
});
});
and this is my call from my app
export default class test extends Component {
constructor() {
super();
}
componentWillMount() {
const getCode = firebase.functions().httpsCallable('getCode');
getCode({number: 'theCorrectNumber', countryCode: '44'})
.then(function (result) {
const data = result;
console.log(data)
}).catch( function (error){
console.log(error)
})
}
render() {
return (
<View/>
);
}
}
Twilio developer evangelist here.
From what I can see in the Authy Node library that I'm assuming you're using, making a request to the API does not return a Promise. Instead it is built with request and responds to asynchronous requests using callbacks only. You do deal with the callback, but you are returning the result of calling the asynchronous function, which is null, rather than the result from the callback.
Perhaps including a callback as part of the function call would work better:
import * as functions from 'firebase-functions';
const authy = require('authy')('mySecret');
export const getCode = functions.https.onCall((data, callback) => {
const { number, countryCode } = data;
return authy
.phones()
.verification_start(
number,
countryCode,
{ via: 'sms', locale: 'en', code_length: '4' },
callback
);
});
You can then use it like this:
export default class test extends Component {
constructor() {
super();
}
componentWillMount() {
const getCode = firebase.functions().httpsCallable('getCode');
getCode({ number: 'theCorrectNumber', countryCode: '44' }, (err, res) => {
if (err) {
throw new functions.https.HttpsError(err);
}
const data = res;
console.log(data);
});
}
render() {
return <View />;
}
}
Let me know if that helps at all.
I'm using Expo to develop both Android and iOS at same time. Notifications were working fine for several weeks, and then out of no where stopped working in production, even though I did not update the app during this time.
Server-side, everything is still fine, and notifications are being pushed. In dev, notifications are still being received and handled properly, but in production, it's crickets.
Has anyone else experienced this / what could be causing this?
Here is my code:
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
notificationsSet: false,
}
}
componentDidMount() {
this.registerForPushNotificationsAsync(this.props.currentUser.currentUser.id, this.props.currentUser.authToken)
savePushToken = (userId, pushToken, token) => {
//API call to save push token to database
apiHelper
.savePushToken(userId, pushToken, token)
.then(res => {
return
})
.catch(err => console.log("err saving", err));
};
handleNotification = notification => {
this.props.setNotification({ notification })
}
registerForPushNotificationsAsync = async (userId, token) =>{
//requesting if user would like to turn on notifications
const { status: existingStatus } = await Permissions.getAsync(
Permissions.NOTIFICATIONS
);
//this checks if notifications is turned on for the app --- "granted"
let finalStatus = existingStatus;
if (existingStatus !== "granted") {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== "granted") {
return;
} //if "granted" then get push notifications and calls this.savepushtoken to save into the API
let pushToken = await Notifications.getExpoPushTokenAsync();
this.subscription = Notifications.addListener(this.handleNotification);
this.savePushToken(userId, pushToken, token);
};
render() {
return(...)
}
}
I've made a simple app with phone authentication (sms).
My problem splits to two, the first part is that the verification code (sms) is always wrong somehow (I do get it, however it doesn't pass the confirmation), and the second part (as stated in the title) is that the user can still access the main activities even if authentication failed.
the function is invoked via a button.
the function is :
signIn(){
const appVerifier = this.recaptchaVerifier;
const phoneNumberString = "+972" + this.phoneNumber.substring(1,10);
firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
.then( confirmationResult => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
let prompt = this.alertCtrl.create({
title: 'Enter the Confirmation code',
inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
buttons: [
{ text: 'Cancel',
handler: data => { console.log('Cancel clicked'); }
},
{ text: 'Send',
handler: data => {
confirmationResult.confirm(data.confirmationCode)
.then(function (result) {
// User signed in successfully.
this.uid = result.user.uid
this.addUser(this.fullName, this.uid);
console.log(result.user);
// ...
}).catch(function (error) {
console.log("Invalid code") // always getting here
});
}
}
]
});
prompt.present();
}).catch(function (error) {
console.log("SMS not sent")
});
}
UPDATE (app.component)
the decision is made in the constructor of app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
var that = this
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
that.rootPage = TabsPage; // even though auth failed, he comes here
} else {
that.rootPage = LoginPage;
}
});
});
}
I dont see it in your code but anywhere you call a method to push the main App-Page. You only should show the main App-Page after User successfully logged in. If this dont work maybe the user comes inside of your app, because the Firebase function is asynchron.
I have created a thunk that dispatches a bunch of different actions:
export function resetEverything() {
return function (dispatch) {
return Promise.all([
dispatch(updateCurrentColor('blue')),
dispatch(updateCurrentTypeChoice('hot')),
dispatch(updateData('fish', {})),
dispatch(updateData('giraffes', {})),
dispatch(updateData('elephants', {})),
dispatch(updateData('zebras', {})),
]).then(() => console.log('resetEverything called'));
};
}
These actions are also used in the application individually. Individually called, they work fine; the store is updated with the payloads.
However, in this batch operation, all of the actions are dispatched, the console shows "resetEverything called", and even when I look through the Redux extension in Chrome, each of the actions are dispatched with the same structure (with different payload, naturally). But...when I look at the Diff it says (states are equal) and sure enough, examining the State>Tree shows that the store keys haven't been updated at all.
Why isn't this working? Why are the dispatched actions being ignored?
Reducer:
import update from 'immutability-helper';
function reducer(state = initialState, action = {}) {
switch (action.type) {
case UPDATE_CURRENT_COLOR:
return update(state, { currentColor: { $set: action.payload } });
case UPDATE_CURRENT_TYPE_CHOICE:
return update(state, { currentTypeChoice: { $set: action.payload } });
case UPDATE_DATA:
return update(state, { data: { [action.payload.property]: { $merge: action.payload.dataObject } } });
default: return state;
}
}