Skip to content

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

@sidjai09

Description

@sidjai09
  • 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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions