Please provide the following:
- SDK Version:46.0.9
- Platforms(Android/iOS/web/all):all
- Add the appropriate “Tag” based on what Expo library you have a question on.
Hi,
When I click the notification want to redirect the screen.
My code is working (it’s redirecting to “StackPatientVideoVisit”) but after a second it redirect to “stackStarting” as it is first screen of Stack Navigator.
When no notification “stackStarting” is my first screen.
Please give me solution what I need to do.
If you give soulation in code it helps me.
App.js
import ‘react-native-gesture-handler’;
import React, { useState, useEffect, useRef } from ‘react’;
import { NavigationContainer, useNavigationContainerRef } from “@react-navigation/native”;
import * as Notifications from ‘expo-notifications’;
import DrawerNavigator from “./src/navigator/DrawerNavigator”;
import * as ScreenOrientation from ‘expo-screen-orientation’;
export const navigationRef = React.createRef();
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: false,
}),
});
export default function App() {
let token;
const [inputs, setInputs] = useState({
expoPushToken: ‘’,
notification: false,
});
const notificationListener = useRef();
const responseListener = useRef();
//set input values
const handleOnChange = (text, inputs) => {
setInputs((prevState) => ({ …prevState, [inputs]: text }));
};
//Screen Orientation
async function changeScreenOrientation() {
if (orientationIsLandscape == true) {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
}
else if (orientationIsLandscape == false) {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
}
}
//notification redirect screen
const notificationResponseReceivedListenerRedirect = async (notificationType, recordId, navigationRef) => {
if (notificationType == Constant.NOTIFICATION_TYPE_APPOINTMENT) {
navigationRef.current?.navigate(‘StackPatientVideoVisit’, {
itemAppointmentId: recordId,
});
}
}
useEffect(() => {
//send device details and get refresh token
registerForPushNotificationsAsync().then(token => { handleOnChange(token, ‘expoPushToken’); });
// This listener is fired whenever a notification is received while the app is foregrounded
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
handleOnChange(notification, 'notification');
if (notification.request.content.data.notification_type != '' && notification.request.content.data.notification_type != null && notification.request.content.data.notification_type != undefined) {
notificationResponseReceivedListenerRedirect(notification.request.content.data.notification_type, notification.request.content.data.notification_screen_para_id, navigationRef);
}
});
// This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
if (response.notification.request.content.data.notification_type != '' && response.notification.request.content.data.notification_type != null && response.notification.request.content.data.notification_type != undefined) {
notificationResponseReceivedListenerRedirect(response.notification.request.content.data.notification_type, response.notification.request.content.data.notification_screen_para_id, navigationRef);
}
});
return () => {
Notifications.removeNotificationSubscription(notificationListener.current);
Notifications.removeNotificationSubscription(responseListener.current);
};
}, );
const registerForPushNotificationsAsync = async () => {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== ‘granted’) {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== ‘granted’) {
//alert(‘Failed to get push token for push notification!’);
//return;
}
//token = (await Notifications.getExpoPushTokenAsync()).data;
token = (await Notifications.getDevicePushTokenAsync()).data;
if (Platform.OS === 'android') {
Notifications.setNotificationChannelAsync('default', {
name: 'default',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#1f9eff',
});
}
return token;
}
registerForPushNotificationsAsync();
if (!loaded) {
return null;
}
return (
)
}
DrawerNavigator.js
import React from “react”;
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from “@react-navigation/drawer”;
import { MainStack } from “./StackNavigator”;
import { Colors } from “…/config/Colors”;
import { Constant } from “…/config/Constant”;
import { Image, Text, View } from “react-native”;
const styles = require(‘…/styles/styles’);
const Drawer = createDrawerNavigator();
const CustomDrawer = (props) => {
return (
<DrawerContentScrollView {…props} contentContainerStyle={styles.drawerCustomScrollView}>
<View style={styles.drawerCustomItemList}>
<DrawerItem style={styles.drawerCustomItem} icon={() => (<Image source={Constant.MENU_HOME_ICON} style={styles.drawerIcon} />)} label={() => (<Text style={styles.drawerCustomLinkTitle}>{Constant.DASHBOARD_HOME_LABEL}</Text>)} onPress={() => {props.navigation.navigate('stackLanding')}} />
</View>
</DrawerContentScrollView>
</View>
)
}
export default function DrawerNavigatorPublic() {
const screenOptionStyle = {
drawerLabelStyle: styles.drawerLabelStyle,
drawerActiveBackgroundColor: Colors.DRAWER_ACTIVE_BG,
drawerActiveTintColor: Colors.DRAWER_ACTIVE_TINT,
drawerInactiveTintColor: Colors.DRAWER_INACTIVE_TINT,
drawerStyle: {
backgroundColor: Colors.DRAWER_BG,
width: Constant.DRAWER_WIDTH,
},
drawerItemStyle: {
width: ‘100%’,
},
swipeEnabled: false,
};
return (
<Drawer.Navigator screenOptions={screenOptionStyle} drawerContent={(props) => <CustomDrawer {…props} />}>
<Drawer.Screen name={Constant.DASHBOARD_HOME_LABEL} component={MainStack} options={{ headerShown: false, drawerIcon: ({ }) => () }} />
</Drawer.Navigator>
);
};
StackNavigator.js
import React from “react”;
import { Image, TouchableOpacity, View } from “react-native”;
import { createStackNavigator } from “@react-navigation/stack”;
import StartingScreen from ‘…/screens/StartingScreen’;
import WhoAreYouScreen from ‘…/screens/WhoAreYouScreen’;
import PatientLandingScreen from ‘…/screens/patient/PatientLandingScreen’;
import PatientStatusIsDeleteScreen from ‘…/screens/patient/PatientStatusIsDeleteScreen’;
import PatientVideoVisitScreen from ‘…/screens/patient/PatientVideoVisitScreen’;
import DrawerHeaderCenter from ‘./DrawerHeaderCenter’;
import DrawerHeaderRight from “./DrawerHeaderRight”;
import DrawerHeaderRightPatient from “./DrawerHeaderRightPatient”;
import DrawerHeaderLeft from “./DrawerHeaderLeft”;
import { Colors } from “…/config/Colors”;
import { Constant } from “…/config/Constant”;
const styles = require(‘…/styles/styles’);
const Stack = createStackNavigator();
const screenOptionStyle = {
headerStyle: {
backgroundColor: Colors.SN_HEADER_STYLE_BG,
},
headerTintColor: Colors.SN_HEADER_TINT,
headerBackTitle: Colors.SN_HEADER_BACK_TITLE,
};
const NavigationDrawerStructure = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
};
return (
<View style={styles.drawerMenuBarIconMain}>
<TouchableOpacity onPress={toggleDrawer}>
<Image source={Constant.MENU_BAR_ICON} style={styles.drawerMenuBarIcon} />
</TouchableOpacity>
</View>
);
};
const NavigationCustomeBackStructure = (props) => {
const backScreen = () => {
props.navigation.navigate(props.backToScreen);
};
return (
<View style={styles.drawerBackIconMain}>
<TouchableOpacity onPress={backScreen}>
<Image source={Constant.HEADER_BACK_ICON} style={styles.drawerBackIcon} />
</TouchableOpacity>
</View>
);
};
const NavigationBackStructure = (props) => {
const backScreen = () => {
props.navigation.goBack();
};
return (
<View style={styles.drawerBackIconMain}>
<TouchableOpacity onPress={backScreen}>
<Image source={Constant.HEADER_BACK_ICON} style={styles.drawerBackIcon} />
</TouchableOpacity>
</View>
);
};
const MainStack = ({ navigation }) => {
return (
<Stack.Navigator screenOptions={{ screenOptionStyle }}>
<Stack.Screen name=“stackStarting” component={StartingScreen} options={{ headerShown: false }} />
<Stack.Screen name=“StackWhoAreYou” component={WhoAreYouScreen} options={{ headerTitle: () => null, headerLeft: () => (), headerRight: () => null, headerStyle: { backgroundColor: Colors.SN_HEADER_STYLE_BG, height: Constant.SN_HEADER_HEIGHT }, headerTintColor: Colors.SN_HEADER_TINT, }} />
<Stack.Screen name="StackPatientLanding" component={PatientLandingScreen} options={{ headerShown: false }} />
<Stack.Screen name="StackPatientStatusIsDelete" component={PatientStatusIsDeleteScreen} options={{ headerShown: false }} />
<Stack.Screen name="StackPatientVideoVisit" component={PatientVideoVisitScreen} options={{ headerTitle: () => <DrawerHeaderCenter header_title={Constant.VIDEO_VISIT_LABEL} />, headerLeft: () => (<NavigationBackStructure navigation={navigation} />), headerRight: () => <DrawerHeaderRightPatient />, headerStyle: { backgroundColor: Colors.SN_HEADER_STYLE_BG, height: Constant.SN_HEADER_HEIGHT }, headerTintColor: Colors.SN_HEADER_TINT, }} />
</Stack.Navigator>
);
}
export {
MainStack
}