Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] onForegroundEvent doesn't work with React-native 0.74.5 ( sdk target 34) #1082

Open
patphantuan251 opened this issue Aug 12, 2024 · 5 comments

Comments

@patphantuan251
Copy link

patphantuan251 commented Aug 12, 2024

"react-native": "0.74.5",
"@notifee/react-native": "^7.7.0",
"react-native-reanimated": "^3.12.1",
"react-native-gesture-handler": "^2.16.2",
"react-native-safe-area-context": "^4.10.1",

buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.22"
import React, {useEffect} from 'react';
import {Button, Platform, StyleSheet, Text, View} from 'react-native';
import notifee, {
  EventType,
  AuthorizationStatus,
  AndroidImportance,
  AndroidVisibility,
} from '@notifee/react-native';
import BootSplash from 'react-native-bootsplash';

function App() {
  const requestUserPermission = async () => {
    const settings = await notifee.requestPermission();
    await BootSplash.hide({fade: true});

    if (settings.authorizationStatus >= AuthorizationStatus.AUTHORIZED) {
      console.log('Permission settings:', settings);
    } else {
      console.log('User declined permissions');
    }
  };
  const checkChannelPermission = async () => {
    const channel = await notifee.getChannel('default');

    if (channel?.blocked) {
      console.log('Channel is disabled');
    } else {
      console.log('Channel is enabled:', channel);
    }
  };

  // Subscribe to events
  useEffect(() => {
    checkChannelPermission();
    return notifee.onForegroundEvent(async ({type, detail}) => {
      const {notification, pressAction} = detail;
      const pressActionLabel = pressAction
        ? `, press action: ${pressAction?.id}`
        : '';
      console.log(
        `[onForegroundEvent] notification id: ${notification?.id},  event type: ${EventType[type]}${pressActionLabel}`,
      );
    });
  }, []);

  useEffect(() => {
    (async () => {
      await requestUserPermission();
    })();
  }, []);

  const notification = {
    title: 'Basic',
    body: 'notification',
    android: {
      channelId: 'default',
      pressAction: {
        id: 'default',
      },
    },
    ios: {
      sound: 'default',
    },
  };

  const onDisplayNotificationPress = async () => {
    await notifee.deleteChannel(notification.android?.channelId || 'default');
    console.log('changelId:', notification.android?.channelId);
    // Create a channel
    await notifee.createChannel({
      id: notification.android?.channelId || 'default',
      name: notification.android?.channelId || 'default',
      importance: AndroidImportance.HIGH,
    });

    try {
      await notifee.displayNotification(notification);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <View style={styles.content}>
          <View style={styles.contentItem}>
            <View style={styles.contentItemText}>
              <Text>{`Notification: ${notification.title}`}</Text>
            </View>
            <View style={[styles.button]}>
              <Button
                color={(Platform.OS === 'ios' && '#fff') || '#44337A'}
                title={'Display Notification'}
                onPress={onDisplayNotificationPress}
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  content: {
    justifyContent: 'space-evenly',
    flex: 0.5,
  },
  contentItem: {
    margin: 20,
  },
  apiActionButton: {
    marginTop: 30,
  },
  contentItemText: {
    textAlign: 'left',
    marginBottom: 5,
  },
  button: {
    backgroundColor: '#44337A',
    color: 'white',
  },
});

displayNotification works in my project, however when I touch the notification the onForegroundEvent does not active ( console.log(
[onForegroundEvent] notification id: ${notification?.id}, event type: ${EventType[type]}${pressActionLabel},
); not shown in Android, shown in IOS).
Please help me

@patphantuan251
Copy link
Author

patphantuan251 commented Aug 14, 2024

i will try all version react native > 0.74.0 and it all facing this issue

@patphantuan251 patphantuan251 changed the title onForegroundEvent doesn't work with React-native 0.74.5 ( sdk target 34) [Android] onForegroundEvent doesn't work with React-native 0.74.5 ( sdk target 34) Aug 14, 2024
@patphantuan251
Copy link
Author

it work fine in React native <0.73.9

@Eclipses-Saros
Copy link

check #621 (comment)
look like reactContext is null.

Copy link

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

@mikehardy
Copy link
Contributor

This may be fixed in v9.1.2 here - there was definitely a problem with new architecture if it was in use, and it would not work until v9.1.2 just now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants