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

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

Open
sidjai09 opened this issue Dec 31, 2021 · 3 comments

Comments

@sidjai09
Copy link

sidjai09 commented Dec 31, 2021

  • iOS or Android? => Both
  • Expo or regular React Native? => Expo
  • React Native Version => 0.64.3
  • expo-activity-feed Version => 1.1.1
  • getstream Version =>7.2.11
  • @react-navigation/native Version => 6.0.6
  • @react-navigation/native-stack Version => 6.2.5

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
Copy link

afestein commented Jan 6, 2022

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

@zhani-tegeria
Copy link

Found any solutions?

@codecarveruk
Copy link

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.

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

4 participants