GetStream / react-native-activity-feed

Official React Native SDK for Activity Feeds
https://getstream.io/
200 stars 88 forks source link

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? #243

Open sidjai09 opened 2 years ago

sidjai09 commented 2 years ago

Describe the bug Currently, we are using with StackNavigator When we add to App.js It Throw error as below

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? 
See https://reactnavigation.org/docs/getting-started for setup instructions.

If I remove NavigationContainer then FlatFeed loads in-app but I need it for routing.

To Reproduce Steps to reproduce the behavior:

With the new Expo app add Navigation then try to add expo-activity-feed

Expected behavior FlatFeed should work with react-navigation

Code App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import NavigationStack from './navigation/LoginStack';
import {StreamApp} from 'expo-activity-feed';
import {View} from 'react-native';

const App = () => {
  const apiKey = 'app_key';
  const appId = 'app_id';
  const token = 'token';

  return (
    <View style={{flex: 1}}>
      <StreamApp apiKey={apiKey} appId={appId} token={token}>
        <NavigationContainer>
          <NavigationStack />
        </NavigationContainer>
      </StreamApp>
    </View>
  );
};

export default App;

Code NavigationStack.js

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Feeds from '../screens/FeedsScreens/Feeds';

const Stack = createNativeStackNavigator();

const NavigationStack = () => {
  return (
    <Stack.Navigator initialRouteName={'Feeds'}>
      <Stack.Screen name={'Feeds'} component={Feeds} options={{headerShown: false}} />
    </Stack.Navigator>
  );
};

export default NavigationStack;

Code Feeds.js

import React from 'react';
import {Text, View} from 'react-native';
import {FlatFeed} from 'expo-activity-feed';

const Feeds = (props) => {
  console.log('🚀 ~ Feeds ~ props', props);
  return (
    <View style={{display: 'flex', flex: 1}}>
      <FlatFeed />
    </View>
  );
};

export default Feeds;
afestein commented 2 years ago

I also found this issue after upgrading from 1.1.0 to 1.1.1, downgrading resolved it.

zhani-tegeria commented 2 years ago

Found any solutions?

codecarveruk commented 2 years ago

I also have the issue on a new RN project (not using Expo) when installing react-native-activity-feed@latest, downgraded to 1.1.0 as mentioned above and navigation error no longer present.