Render error: Couldn't find a navigation context

[burnhc]

I get this error: "Render Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"

I noticed that this issue appears whenever a Stream Flatfeed is inside a navigation container. When the feed is on its own (not part of any stack/tab navigation), it renders correctly. I am testing on Android using Node v16.13.1 and Expo v44.

Any tips on this?

I was able to reproduce this issue on a smaller app:

import React, { Fragment } from 'react';
import { Text, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { StreamApp, FlatFeed, Activity, LikeButton, StatusUpdateForm, ReactionIconBar} from 'expo-activity-feed';

const Tab = createMaterialTopTabNavigator();

function Feed() {
  return (
    <View style={{ flex: 1 }}>
      <StreamApp
        apiKey={apiKey}
        appId={appId}
        token={token}>
        <FlatFeed
          Activity={props => (
            <Fragment>
              <Activity
                {...props}
                Footer={
                    <ReactionIconBar>
                      <LikeButton {...props} />
                    </ReactionIconBar>
                }
              />
            </Fragment>)} notify/>
        <StatusUpdateForm feedGroup='timeline' />
      </StreamApp>
    </View>
  )
}

function Screen2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Screen 2</Text>
    </View>
  );
}

export default App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
          <NavigationContainer>
            <Tab.Navigator
              screenOptions={{
                tabBarLabelStyle: { fontSize: 12 },
                tabBarItemStyle: { width: 100 },
              }}>
              <Tab.Screen name="Feed" component={ Feed } />
              <Tab.Screen name="Screen2" component={ Screen2 } />
            </Tab.Navigator>
          </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

[sicsol]

I'm experiencing the same issue as well. I'm using the latest expo version 44

[rushabhOrdex]

When we use <StreamApp> and <FlatFeed> inside <NavigationContainer> this issue occurs. Is there anything that need to be added to wrap <FlatFeed> ? I am also facing this issue and it there is no proper documentation that how we can use <FlatFeed> with nested navigation container. Does anyone can help? I am using expo:- 43.0.2

[zhani-tegeria]

Same Issue here but not using expo

[sicsol]

Not the best solution but I started to write my own custom implementation using parts of the react-native-activity-feed-core package that get's installed with expo-activity-feed It helps bypass the issue but requires copying and restructuring the code.

[SeanDunford]

Experiencing similar issues, is this related to a new version? I didn't have these issues a few weeks ago.

[SeanDunford]

@burnhc @sicsol

I was able to resolve by pinning this dependency.

"react-native-activity-feed": "1.1.0",

I am not sure what actually broke as i don't have time to dig into code atm but after this launch i may try to push a fix. The activity feeds and javascript implementations do not seem to be as big a priority for GetStream and the examples, docs, and resources are not up to date or stable.

[SeanDunford]

https://github.com/GetStream/react-native-activity-feed/issues/244#issuecomment-1013567858

Related issue in the actual repo.

[afestein]

Also mentioned in https://github.com/GetStream/react-native-activity-feed/issues/243

No response from maintainers, this is pretty frustrating. With all Stream's development and newly raised funding seemingly going towards the Chat product, maintaining a project using Feeds is becoming increasingly difficult, littered with security vulnerabilities and bugs. We've had no choice but to treat React Native feeds as abandoned and change our whole product strategy.

[SeanDunford]

@afestein - At this point i'm just rolling all my own custom components and using the api directly. Hopefully they don't sunset the Feeds project.