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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions