Issue with react native project after react-navigation & expo upgrade - firebase

I have the issue below after upgrading my react-native application.
My package.json is shown below
{
"name": "react-native-expo-app",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"expo": "^25.0.0",
"firebase": "^4.9.1",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"native-base": "^2.3.2",
"react": "16.2.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
"react-native-chooser": "^1.6.2",
"react-native-datepicker": "^1.6.0",
"react-native-dropdown": "0.0.6",
"react-native-elements": "^0.16.0",
"react-native-ui-kitten": "^3.0.0",
"react-navigation": "^1.0.0",
"react-navigation-redux-helpers": "^1.0.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "^4.10.2",
"redux-thunk": "^2.2.0"
}
}
The app seems to be processing subsequent pages while loading the first one as the error message is complaining about HomePage, but it should only be rendering WelcomePage. Please see my App.js code below.
const config = {
key: 'primary',
storage: AsyncStorage
};
const HomeNavigator = TabNavigator({
home: {screen: HomePage},
popular: {screen: PopularPage},
search: {screen: SearchPage},
notifications: {screen: NotificationsPage}
}, {
...TabNavigator.Presets.iOSBottomTabs,
});
const RootNavigator = TabNavigator({
welcome: {screen: WelcomePage},
auth: {screen: AuthPage},
signUp: {screen: SignUpPage},
resetPassword: {screen: ResetPasswordPage},
main: {
screen: DrawerNavigator({
home: {
screen: HomeNavigator,
},
profile: {
screen: ProfilePage,
},
following: {
screen: FollowingPage,
},
bookmarks: {
screen: BookmarksPage,
},
contact: {
screen: ContactPage,
},
info: {
screen: InfoPage,
},
conduct: {
screen: ConductPage,
},
login: {
screen: LoginPage,
},
groupProfile: {
screen: GroupProfilePage
}
},
{
contentComponent: SideMenuPage,
drawerWidth: 250
}
)
}
}, {
tabBarPosition: 'bottom',
backBehavior: 'none',
navigationOptions: {
tabBarVisible: false
},
lazy: true
});
const initialState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams('welcome'));
const navReducer = (state = initialState, action) => {
const nextState = RootNavigator.router.getStateForAction(action, state);
return nextState || state;
};
const appReducer = combineReducers({
nav: navReducer,
auth,
signUp,
resetPasswordReducer,
home,
popular,
rules,
conduct,
profile
}
);
const middleware = createReactNavigationReduxMiddleware(
"welcome",
state => state.nav,
);
const addListener = createReduxBoundAddListener("welcome");
class AppSupport extends React.Component {
render() {
return (
<RootNavigator navigation={addNavigationHelpers({
// dispatch: this.props.dispatch,
state: this.props.nav,
addListener,
})} />
);
}
}
const mapStateToProps = (state) => ({
nav: state.nav
});
const AppWithNavigationState = connect(mapStateToProps)(AppSupport);
const store = createStore(
appReducer,
applyMiddleware(ReduxThunk),
);
export default class App extends React.Component {
state = {isReady: false};
async componentWillMount() {
const config = {
apiKey: “hidden”,
authDomain: "hidden",
databaseURL: "hidden",
projectId: "hidden",
storageBucket: "hidden",
messagingSenderId: "hidden"
};
firebase.initializeApp(config);
this.setState({isReady: true});
}
render() {
if (this.state.isReady) {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
} else {
return <Expo.AppLoading/>
}
}
}
See

The error message indicates that there is no current user on line 17 of HomePage.jsx, where you're trying to use currentUser.displayName.
Most likely (you didn't share the relevant code) you have a direct lookup of the current user, something like:
firebase.auth().currentUser.displayName
You'll want to wrap that in an auth state listener:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in, get its display name.
}
});
This way the code only runs when there actually is a current user. Also see getting the current user in the Firebase docs.

Related

How to view the data stored in redux orm by a reducer in another file?

I have redux and redux-orm integrated to my async store of react-native, expo app.
I have defined my model like this.
model.js
import { Model, attr, many, ORM, fk } from "redux-orm";
export class Zuser extends Model {
static modelName = "Zuser";
static fields = {
id: attr(),
firstName: attr(),
lastName: attr(),
};
}
Regestiring it in
orm.js
import { ORM } from "redux-orm";
import { Zuser } from "./model";
const orm = new ORM();
orm.register(Zuser);
export { orm };
Configured the orm in
store.js
import { configureStore } from "#reduxjs/toolkit";
import thunk from "redux-thunk";
import AsyncStorage from "#react-native-async-storage/async-storage";
import appReducer from "../slices/app.slice";
import ormReducer from "../slices/orm.slice";
import { persistReducer } from "redux-persist";
/*
the configureStore from "#reduxjs/toolkit" to create the store and persist the store.
It will automatically apply the middleware and other enhancers, so you don't need to call applyMiddleware separately.
*/
const persistConfig = {
key: "root",
storage: AsyncStorage,
whitelist: ["app", "orm"],
};
const rootReducer = {
app: persistReducer(persistConfig, appReducer),
orm: persistReducer(persistConfig, ormReducer),
};
const store = configureStore({
reducer: rootReducer,
middleware: [thunk],
});
export default store;
Making the store persist in
persistor.js
import { persistStore } from "redux-persist";
import store from "./store";
export const persistor = persistStore(store);
I have configured the above in
app.js
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Navigator linking={linking} notificationChange={notificationChange} />
</PersistGate>
</Provider>
I have created reducer and selector for storing and retriving zuser data in
orm.slice.js
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import { orm } from "../../common/orm";
import { createSelector } from "#reduxjs/toolkit";
export const fetchZuser = createAsyncThunk("items/fetchZuser", async (uid) => {
const response = await fetch(
`https://XYZ/zen/get_zuser/${uid}`
);
const resp = await response.json();
if ((await resp.success) === false)
console.log("Error at: fetchZuser(), Problem while fetching zuser");
return await resp.data[0];
// Gives {id, firstName, lastName}
});
const ormSlice = createSlice({
name: "items",
initialState: { orm: orm.getEmptyState() },
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchZuser.fulfilled, (state, action) => {
const session = orm.mutableSession(state.orm);
const Zuser = session.Zuser;
const { objectId, firstName, lastName } = action.payload;
console.log("**Objects to store** ", action.payload);
Zuser.create({ id: objectId, firstName, lastName });
console.log("**Stored objects** ", Zuser.all().toModelArray());
state.orm = session.state;
});
},
});
const selectOrm = (state) => state.orm;
export const selectZuser = createSelector([selectOrm], (ormState) => {
const session = orm.session(ormState);
const Zuser = session.Zuser;
console.log("**Selector Zuser Session** ", Zuser);
let zobjects = Zuser.all().toRefArray()
console.log("**Selector zuser objects** ", zobjects);
});
export const {} = ormSlice.actions;
export default ormSlice.reducer;
I am calling the dispatch reducer thunk in
login.js
var res = dispatch(fetchZuser("1ZkDGFs8sX"));
console.log("Login res ", res);
It says the data is stored.
console
LOG **Objects to store** {"createdAt": "2022-12-13T07:01:01.591Z", "firstName": "oonga", "lastName": "boonga", "objectId": "NVlGiiw8Po", "updatedAt": "2023-02-05T08:54:58.723Z", "userPointer": {"__type": "Pointer", "className": "_User", "objectId": "1ZkDGFs8sX"}}
LOG **Stored objects** [{"_fields": {"firstName": "oonga", "id": "NVlGiiw8Po", "lastName": "boonga"}}]
Next when I try to use the selectZuser selector in
home.js
const zusers = useSelector(selectZuser);
console.log("Home zusers selector ", zusers);
I cant find any data, infact it gives me error in the selector.
console
LOG Selector Zuser Session [Function SessionBoundModel]
ERROR TypeError: undefined is not an object (evaluating 'branch[this.arrName]')
Package.json
{
"name": "timely-reflection",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/metro-config": "^0.3.22",
"#parse/react-native": "^0.0.1-alpha.17",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-navigation/bottom-tabs": "^5.11.2",
"#react-navigation/native": "^5.8.10",
"#react-navigation/native-stack": "^6.9.1",
"#react-navigation/stack": "^5.12.8",
"#reduxjs/toolkit": "^1.8.6",
"accordion-collapse-react-native": "^1.1.1",
"deep-equal": "^2.0.5",
"expo": "^47.0.0",
"expo-app-loading": "^2.1.0",
"expo-auth-session": "~3.6.1",
"expo-device": "^4.3.0",
"expo-notifications": "^0.16.1",
"expo-random": "~12.2.0",
"expo-splash-screen": "^0.16.2",
"expo-web-browser": "~10.0.3",
"inline-css": "^4.0.1",
"inline-scripts": "^1.7.4",
"moment": "^2.29.4",
"moment-timezone": "^0.5.37",
"parse": "3.4.0",
"prop-types": "^15.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-collapsible-tab-view": "^4.5.2",
"react-native-dropdown-picker": "^5.4.2",
"react-native-gesture-handler": "~2.8.0",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-native-sha1": "^1.2.3",
"react-native-uuid": "^2.0.1",
"react-native-web": "0.17.7",
"react-native-webview": "^11.23.0",
"react-redux": "^8.0.4",
"redux-orm": "^0.16.2",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"#babel/core": "^7.19.3"
},
"private": true
}
I tried persisting the store.
I am trying mutable session instead after normal session not working.
I am expecting to see the data stored when login happens in the home page.

Apollo Client is not working with NextJS using SSR

I'm trying to use Apollo Client/Server for my NextJS, and some pages I'm trying to SSR and staticlly generate them, but I'm faing an issue with Apollo where it fails to fetch on server but not when I use the client on the client.
Firstlly this is my package json, where my libs are configed:
{
"name": "landing",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev -p 9999",
"build": "next build",
"start": "next start -p 9999",
"lint": "next lint"
},
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#reduxjs/toolkit": "^1.9.0",
"apollo-server-micro": "2.25.1",
"deepmerge": "^4.2.2",
"firebase": "^9.14.0",
"graphql": "^15.5.1",
"loadash": "^1.0.0",
"luxon": "^3.1.1",
"mongoose": "^5.13.15",
"next": "11.0.1",
"next-redux-wrapper": "^8.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-images-uploading": "^3.1.7",
"react-infinite-scroll-component": "^6.1.0",
"react-redux": "^8.0.5",
"react-tag-input-component": "^2.0.2",
"uuid": "^9.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.4.19"
}
}
And here is my single API route in pages/api.jsx folder:
import { Connect } from "../utils/Connect";
import { ApolloServer, makeExecutableSchema } from "apollo-server-micro";
import { defs as typeDefs } from "../graphql/defs";
import { resolves as resolvers } from "../graphql/resolves";
Connect();
export const schema = makeExecutableSchema({ typeDefs, resolvers });
const api = { bodyParser: false };
const path = { path: "/api" };
export const config = { api };
export default new ApolloServer({ schema }).createHandler(path);
While this is my Mongo Connection that I imported earlier:
import mongoose from "mongoose";
export const Connect = async () => {
try {
await mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false,
useCreateIndex: true,
});
} catch (err) {
console.log(`Something went wrong trying to connect to the database);
process.exit(1);
}
};
While this is my Apollo Client which is configured for Client and Server calls:
import merge from "deepmerge";
import { useMemo } from "react";
import { ApolloClient, HttpLink, InMemoryCache, from } from "#apollo/client";
import { onError } from "#apollo/client/link/error";
import { concatPagination } from "#apollo/client/utilities";
import { isEqual } from "lodash";
export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
let apolloClient;
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) graphQLErrors.forEach(({ message, locations, path }) => {
const msg = `[GraphQL error]: Message: ${message}`;
const lct = `Location: ${locations}`;
const pth = `Path: ${path}`;
console.log(`${msg}, ${lct}, ${pth}`);
});
if (networkError) {
const ntw = `[Network error]: ${networkError}`;
console.log(ntw);
}
});
const httpLink = new HttpLink({
uri: `http://localhost:9999/api`,
credentials: "same-origin",
});
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: from([errorLink, httpLink]),
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
allPosts: concatPagination(),
},
},
},
}),
});
}
export function initializeApollo(initialState = null) {
const _apolloClient = apolloClient ?? createApolloClient();
if (initialState) {
const existingCache = _apolloClient.extract();
const data = merge(existingCache, initialState, {
arrayMerge: (destinationArray, sourceArray) => [
...sourceArray,
...destinationArray.filter((d) =>
sourceArray.every((s) => !isEqual(d, s))
),
],
});
_apolloClient.cache.restore(data);
}
if (typeof window === "undefined") return _apolloClient;
if (!apolloClient) apolloClient = _apolloClient;
return _apolloClient;
}
export function addApolloState(client, pageProps) {
if (pageProps?.props) pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
return pageProps;
}
export function useApollo(pageProps) {
const state = pageProps[APOLLO_STATE_PROP_NAME];
const store = useMemo(() => initializeApollo(state), [state]);
return store;
}
And lately, this is my page that is SSR-ing:
import { Category } from "../../ui/pages";
import { addApolloState, initializeApollo } from "../../config/Apollo";
import { Description, Globals, Title } from "../../config/Metas";
import { CATEGORIES, CATEGORY } from "../../graphql/queries";
export async function getStaticPaths() {
let paths = [];
const Apollo = initializeApollo();
const config = { query: CATEGORIES };
const categories = await Apollo.query(config);
paths = categories.data.Categories.map((category) => {
return {
params: {
category: category.Name.toLowerCase(),
...category,
},
};
});
return {
paths,
fallback: false,
};
}
export async function getStaticProps(context) {
const Apollo = initializeApollo();
const slug = context.params.category;
const category = await Apollo.query({
query: CATEGORY,
variables: { slug },
});
if (category) {
const data = { props: { category } };
return addApolloState(Apollo, data);
}
else return {
notFound: true,
};
}
const Route = ({ category }) => {
const { data } = category;
const { Category: Meta } = data;
return (
<>
<Globals />
<Title title={Meta.Name} />
<Description description={Meta.Description} />
<Category />
</>
);
};
export default Route;
All those queries that I call are being tested on the Apollo client on front and they are working, but when I do this and start the server with npm run dev I get a weird error:
[Network error]: TypeError: fetch failed
Error [ApolloError]: fetch failed
at new ApolloError (/Users/bfzli/Code/landdding/node_modules/#apollo/client/errors/errors.cjs:34:28)
at /Users/bf/Code/landing/node_modules/#apollo/client/core/core.cjs:1800:19
at both (/Users/bf/Code/landing/node_modules/#apollo/client/utilities/utilities.cjs:997:53)
at /Users/bf/Code/landing/node_modules/#apollo/client/utilities/utilities.cjs:990:72
at new Promise (<anonymous>)
at Object.then (/Users/bf/Code/landing/node_modules/#apollo/client/utilities/utilities.cjs:990:24)
at Object.error (/Users/bf/Code/landing/node_modules/#apollo/client/utilities/utilities.cjs:998:49)
at notifySubscription (/Users/bf/Code/landing/node_modules/zen-observable/lib/Observable.js:140:18)
at onNotify (/Users/bf/Code/landing/node_modules/zen-observable/lib/Observable.js:179:3)
at SubscriptionObserver.error (/Users/bf/Code/landing/node_modules/zen-observable/lib/Observable.js:240:7) {
type: 'ApolloError',
graphQLErrors: [],
clientErrors: [],
networkError: {
cause: {
errno: -61,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 9999
}
}
}

DeepLinking with RN Firebase Messaging / React Navigation from quit state not working

Expected Behavior: User gets a notification via Firebase -> User Taps on notification -> app opens up and goes to correct page.
Actual Behavior: When the user taps on the notification (while App is in quit state), the app opens up normally
I've gotten this to work for when the app is in the background, but not when the app is in the quit state (user has swiped it away). I don't know why this isn't working.
I'm using RN Firebase for the notifications, React Navigation for navigating
to start off with, here are the packages used
// client Package.json
"dependencies": {
"#react-native-async-storage/async-storage": "^1.15.9",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-firebase/analytics": "^14.3.2",
"#react-native-firebase/app": "^14.3.2",
"#react-native-firebase/messaging": "^14.3.2",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#reduxjs/toolkit": "^1.8.5",
"#trpc/client": "^9.16.0",
"babel-plugin-inline-import": "^3.0.0",
"native-base": "^3.0.7",
"app-symlink-folder": "file:../common",
"react": "17.0.2",
"react-error-boundary": "^3.1.4",
"react-native": "0.66.1",
"react-native-async-storage": "^0.0.1",
"react-native-autogrow-textinput": "^5.4.0",
"react-native-confirmation-code-field": "^7.3.0",
"react-native-date-picker": "^4.0.0",
"react-native-drag-sort": "^2.4.4",
"react-native-geolocation-service": "^5.3.0-beta.4",
"react-native-gesture-handler": "^2.2.0",
"react-native-image-crop-picker": "^0.36.2",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-keychain": "^8.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-permissions": "^3.2.0",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^3.4.0",
"react-native-screens": "^3.12.0",
"react-native-size-matters": "^0.4.0",
"react-native-svg": "^12.1.1",
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "^11.15.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rn-swipe-button": "^1.3.7",
"styled-components": "^5.3.0",
"styled-system": "^5.1.5",
"zod": "3.19.0"
}
// backend package.json
"dependencies": {
"#googlemaps/google-maps-services-js": "^3.3.8",
"#trpc/client": "^9.16.0",
"#trpc/server": "^9.16.0",
"dotenv-safe": "^8.2.0",
"express": "^4.17.1",
"firebase-admin": "^11.0.1",
"firebase-tools": "^11.8.1",
"jsonwebtoken": "^8.5.1",
"morgan": "^1.10.0",
"multer": "^1.4.4",
"node-fetch": "^2.6.1",
"pg": "^8.6.0",
"pg-format": "^1.0.4",
"app-symlinked-folder": "link:../common",
"sharp": "^0.30.6",
"shuffle-array": "^1.0.1",
"twilio": "^3.71.1",
"zod": "3.19.0"
},
Here is the Notification Object being sent
// firebaseMessaging
const firebaseResults = await admin.messaging().sendToDevice(fcm, {
data: {
type: "MESSAGE",
url: 'myApp://app/screen1'
} as notification.NotificationData,
notification: {
title: 'title',
body: 'body'
},
},{
contentAvailable: true
});
Here's the app entry point
// index.js
import React, { useEffect } from 'react';
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import fcm from '#react-native-firebase/messaging';
import * as notificationTypes from 'app-symlink-folder/notification'
import { Linking } from 'react-native';
fcm().setBackgroundMessageHandler(async(message) => {
const parsedData = notificationTypes.notificationData.parse(message.data);
if (parsedData.url) {
// ** Note ** this openURL method isn't working. Some console logs have shown that it's being reached when the user opens the notification from the quit state
await Linking.openURL(parsedData.url)
}
})
const FakeApp = () => {
useEffect(()=> {
console.log('inside fake app')
},[])
return null
}
function HeadlessCheck({isHeadless}) {
fcm().getIsHeadless().then((fcmHeadless)=> {
console.log('headless status', isHeadless, fcmHeadless)
if (isHeadless || fcmHeadless) return <FakeApp />
})
return <App />
}
// Note: I've found some SO and git threads suggesting to do this. I don't think it's really made any difference since I've been working on IOS. I think this is for Android.
AppRegistry.registerComponent(appName, () => HeadlessCheck);
App.tsx is mostly just containers and providers
// App.tsx
export default function App() {
return (
<Providers and containers>
<RootNavigation />
</ ...>
)
}
Here is the root navigator, that handles directing everything
const RootNavigator = () => {
const config:LinkingOptions<RootStackParamList>['config'] = {
screens: {
CHAT: {
path: `chat/:otherUserId/:channelId/`,
parse: {
otherUserId: (otherUserId:string) => `${otherUserId}`,
channelId: (channelId:string) => `${channelId}`,
}
},
APP: {
path: 'app/',
screens: {
'SCREEN1': "screen1/",
'SCREEN2': "screen2/"
}
},
HOMEPAGE: HOMEPAGE,
NOTFOUND: '*'
}
}
// linking used for React Navigation deep linking
const linking:LinkingOptions<RootStackParamList> = {
// url scheme
prefixes: ['myApp://'],
config
}
useEffect(()=> {
const unsubscribe = fcm().onNotificationOpenedApp((message) => {
const parsedData = notificationTypes.notificationData.parse(message.data);
if (parsedData.url) {
Linking.openURL(parsedData.url)
}
})
return unsubscribe
},[])
// app navigator
const AppNavigator = () => {
useEffect(() => {
// cleanup function for fcm
const unsubscribeFCM = fcm().onMessage(async remoteMessage => {
const parsedData = notificationTypes.notificationData.parse(
remoteMessage.data,
);
// do stuff with parsedData
return unsubscribeFCM
});
// set up permissions for fcm
(async () => {
fcm()
.hasPermission()
.then(status => {
if (status !== fcm.AuthorizationStatus.AUTHORIZED) {
fcm()
.requestPermission()
.catch(e => {
// handle error
});
}
});
})();
return unsubscribeFCM;
}, []);
return (
<Tab.Navigator>
<Stack.Screen name={SCREEN1} component={Screen1} />
<Stack.Screen name={SCREEN2} component={Screen2} />
</Tab.Navigator>
)
}
return (
<NavigationContainer
linking={linking}
fallback={<FallBack />}
ref={navigationRef}
onReady={persistantLoginThunk()}
/>
<Stack.Navigator>
<Stack.Screen name={HOMEPAGE} component={HomePage} />
<Stack.Screen name={CHAT} component={Chat} />
<Stack.Screen name={APP} component={AppNavigator} />
</Stack.Navigator>
)
}
You should use:
getInitialNotification: When the application is opened from a quit state.
onNotificationOpenedApp: When the application is running, but in the background.
instead of setBackgroundMessageHandler
See https://rnfirebase.io/messaging/notifications#handling-interaction

Problem Using Stripe Payment In React Native App

I am using stripe in React Native App not expo and using .Net Core web api as a backend,
this is my backend code where, stripe customers creates and their ephemeral keys and setup_intent
public Customer create_customer()
{
StripeConfiguration.ApiKey =_appSettings.StripeApiSecret;
var options = new CustomerCreateOptions
{
Description = "My First Test Customer",
};
var service = new CustomerService();
return service.Create(options);
}
public EphemeralKey create_empherical_key(string customerId)
{
var options = new EphemeralKeyCreateOptions
{
StripeVersion = "2020-08-27",
Customer = customerId
};
var service = new EphemeralKeyService();
return service.Create(options);
}
public SetupIntent setup_intent(string customerId)
{
var options = new SetupIntentCreateOptions
{
Customer = customerId
};
var service = new SetupIntentService();
return service.Create(options);
}
my backend is working fine it creates all the values that stripe needs,
main problem is lying here in React Native app
function CheckoutScreen() {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [loading, setLoading] = useState(false);
const fetchPaymentSheetParams = async () => {
const response = await fetch(`${ environment.stripeurl +`create_customer`}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const { setupIntent, ephemeralKey, customer } = await response.json();
return {
setupIntent,
ephemeralKey,
customer,
};
};
const initializePaymentSheet = async () => {
const {
setupIntent,
ephemeralKey,
customer,
} = await fetchPaymentSheetParams();
const { error } = await initPaymentSheet({
customerId: customer.id,
customerEphemeralKeySecret: ephemeralKey.secret,
setupIntentClientSecret: setupIntent.clientSecret,
});
if (!error) {
setLoading(true);
}
};
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
if (error) {
Alert.alert(`Error code: ${error.code}`, error.message);
} else {
Alert.alert('Success', 'Your payment method is successfully set up for future payments!');
}
};
useEffect(() => {
initializePaymentSheet();
}, []);
return (
<View>
<Button
variant="primary"
disabled={!loading}
title="Set up"
onPress={openPaymentSheet}
/>
</View>
);
I receiving all the values of customer, setupintent and ephemeralkey in the front end, when it reach on the line
const { error } = await presentPaymentSheet();
the app crashes.
for refrence I am also providing link of the documentation.
https://stripe.com/docs/payments/save-and-reuse?platform=react-native&ui=payment-sheet
And these are the packages version that I am currently using in this react-native app.
{
"name": "Tookan_App",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#stripe/stripe-react-native": "^0.12.0",
"react": "17.0.2",
"react-native": "0.68.2"
},
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/runtime": "^7.18.3",
"#react-native-community/eslint-config": "^3.0.2",
"babel-jest": "^28.1.0",
"eslint": "^8.16.0",
"jest": "^28.1.0",
"metro-react-native-babel-preset": "^0.71.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}

Redirect function in Nuxt middleware is making state null

I have a Nuxt app in which everything works fine in middleware except when I use redirect.
When I comment the redirect('/admin') line it works fine even the state data is present when console logged. As soon as I uncomment the redirect line it makes the state null.
Please help if someone knows this issue. This exact code works in my other projects but not here.
This is my auth.js file in the middleware folder.
export default function ({ store, route, redirect }) {
const user = store.getters['user/user']
const blockRouteAdmin = /\/admin\/*/g
const blockRouteManager = /\/manager\/*/g
const path = ['/signup', '/login']
let value = path.includes(route.path)
if (user) {
if (user.isAdmin) {
if (!route.path.match(blockRouteAdmin)) {
redirect('/admin')
}
}
if (user.isManager) {
if (!route.path.match(blockRouteManager)) {
redirect('/manager')
}
}
if (user.isUser) {
if (
route.path.match(blockRouteAdmin) ||
route.path.match(blockRouteManager) ||
value
) {
console.log('isUser', user.isUser)
redirect('/')
}
}
}
if (!user) {
if (
route.path.match(blockRouteAdmin) ||
route.path.match(blockRouteManager)
) {
redirect('/')
} else {
redirect()
}
}
}
Here is my nuxt.config.js
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'aitl',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/firebaseConfig.js'],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/buefy
'nuxt-buefy',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
// https://go.nuxtjs.dev/content
'#nuxt/content',
],
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'en',
},
},
// Content module configuration: https://go.nuxtjs.dev/config-content
content: {},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
}
My index.js inside store.
import { vuexfireMutations } from 'vuexfire'
import { getUserFromCookie } from '../helper/index.js'
export const mutations = {
...vuexfireMutations,
}
export const actions = {
async nuxtServerInit({ dispatch, commit }, { req }) {
try {
const user = getUserFromCookie(req)
if (user) {
await dispatch('user/setUSER', {
email: user.email,
isAdmin: user.admin,
isManager: user.manager,
isUser: user.user,
uid: user.user_id,
name: user.name,
})
}
} catch (err) {
console.log(err)
}
},
}
User.js in store folder
import { auth } from '../plugins/firebaseConfig'
import Cookies from 'js-cookie'
export const state = () => ({
user: null,
})
export const getters = {
user(state) {
return state.user
},
}
export const actions = {
async userlogin({ dispatch }, user) {
try {
const token = await auth.currentUser.getIdToken(true)
const userInfo = {
email: user.email,
isAdmin: user.admin,
isManager: user.manager,
isUser: user.user,
uid: user.uid,
name: user.displayName,
}
Cookies.set('access_token', token)
await dispatch('setUSER', userInfo)
} catch (err) {
console.log(err)
}
},
setUSER({ commit }, user) {
commit('setUSER', user)
},
}
export const mutations = {
setUSER(state, user) {
state.user = user
},
}
The issue was solved by going from target: 'static' to target: 'server', aka mirroring the settings of another working project.

Resources