Currently, I am utilizing React Native Push Notifications to schedule local notifications when my app is minimized on Android.
The issue arises when I implement the following code:
constructor(){
super();
this.handleAppStateChange = this.handleAppStateChange.bind(this);
this.state = {
seconds: 10
};
}
componentDidMount(){
AppState.addEventListener('change', this.handleAppStateChange);
this.getTitles();
}
componentWillUnmount(){
AppState.removeEventListener('change', this.handleAppStateChange);
}
handleAppStateChange(appState){
if(appState === 'background'){
PushNotification.localNotificationSchedule({
message: "SUMMER SALE IS ON!",
date: new Date(Date.now() + (this.state.seconds * 1000)) // in 60 secs
});
}
}
I have implemented this code in my home.js file, which serves as my homepage with a search bar. The problem occurs when I search for something and submit it from home.js to searchResult.js (passing data with react navigation), triggering the notification on the searchResult.js page.
The notification should only trigger when my app is minimized. How can I prevent the notification from triggering in searchResult.js?
EDIT: This is my current App.js file, and I'm unsure how to incorporate the notification functionality here:
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
import store from './store'; //Import the store
import Home from './components/home' //Import the component file
import Cart from './components/cart';
import SearchResults from './components/searchResults';
export default class App extends Component {
render() {
return (
<Provider store={store}>
<Root />
</Provider>
);
}
}
const homeStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions:{
title: "test",
headerStyle: {
backgroundColor: '#4050B5',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}
},
SearchResults: {
screen: SearchResults,
navigationOptions:{
title: "Search Results",
headerStyle: {
backgroundColor: '#4050B5',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}
}
})
const cartStack = createStackNavigator({
Cart: {
screen: Cart,
navigationOptions:{
title: "Shopping Cart",
headerStyle: {
backgroundColor: '#4050B5',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}
},
})
const Root = createBottomTabNavigator({
Home: homeStack,
Cart: cartStack
},
{
initialRouteName : "Home",
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `user${focused ? '' : '-outline'}`;
} else if (routeName === 'Cart') {
iconName = `cart${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
//return <EvilIcons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}
}
);