Error in exporting AgoraView component in react native.

[ashmalvayani]

ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of AgoraIntegration.

This error is located at: in AgoraIntegration (created by App) in RCTView (created by View) in View (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in AgoraLiveStreamingApp(RootComponent), js engine: hermes

To Reproduce // AgoraIntegration.js import React, { useEffect } from 'react'; import { RtcEngine, AgoraView } from 'react-native-agora';

const AgoraIntegration = ({ isPerformer, onPerformanceEnd, secondsLeft }) => { useEffect(() => { const initializeAgora = async () => { const agoraAppId = 'baccf761e88b4d16adc966a5fd80dca6'; // Replace with your Agora App ID

  try {
    await RtcEngine.create(agoraAppId);
    await RtcEngine.enableVideo();

    if (isPerformer) {
      await RtcEngine.startPreview();
      await RtcEngine.enableAudio();
      await RtcEngine.joinChannel(null, 'channel_name', null, 0);
    }
  } catch (error) {
    console.error('Error initializing Agora:', error);
  }
};

initializeAgora();

const timer = setInterval(() => {
  // Perform actions with the secondsLeft prop
}, 1000);

return () => {
  clearInterval(timer);
  RtcEngine.destroy();
};

}, [isPerformer, secondsLeft]);

useEffect(() => { if (secondsLeft === 0) { onPerformanceEnd(); } }, [secondsLeft, onPerformanceEnd]);

return ( <AgoraView style={{ flex: 1 }} remoteUid={isPerformer ? 0 : 1} mode={1} /> ); };

export default AgoraIntegration;

---

// App.js import React, { useState, useEffect } from 'react'; import { View, Text, Alert } from 'react-native'; import PushNotification from 'react-native-push-notification'; import BackgroundTimer from 'react-native-background-timer'; import AgoraIntegration from './AgoraIntegration';

const App = () => { const [isPerformer, setIsPerformer] = useState(true); const [secondsLeft, setSecondsLeft] = useState(120); // Add this line

const notifyAudience = () => { // Notify audience with the name of the next performer PushNotification.localNotification({ title: 'Next Performer', message: 'Next performer will be Mr. John Doe', // Replace with the actual name }); };

const notifyPerformer = (secondsLeft) => { // Notify performer about the remaining time PushNotification.localNotification({ title: 'Performance Reminder', message: Your performance will end in ${secondsLeft} seconds, }); };

const switchRoles = () => { setIsPerformer((prev) => !prev); };

useEffect(() => { const timer = BackgroundTimer.setTimeout(() => { notifyAudience(); switchRoles(); }, 120000); // Switch roles every 2 minutes

return () => {
  BackgroundTimer.clearTimeout(timer);
};

}, [isPerformer]);

useEffect(() => { const notificationTimer = BackgroundTimer.setInterval(() => { notifyPerformer(secondsLeft); }, 1000);

return () => {
  BackgroundTimer.clearInterval(notificationTimer);
};

}, [secondsLeft]);

const onPerformanceEnd = () => { Alert.alert('Performance Ended', 'Switching to the next performer.'); notifyAudience(); switchRoles(); };

return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

</View>

); };

export default App;

Additional Information There are no version mismatches or dependency errors. The import also looks fine.

[guoxianzhe]

@ashmalvayani Sorry, could you please tell me which version of react-native-agora you are using?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.