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

Render error: Couldn't find a navigation context #52

Open
burnhc opened this issue Dec 26, 2021 · 9 comments
Open

Render error: Couldn't find a navigation context #52

burnhc opened this issue Dec 26, 2021 · 9 comments

Comments

@burnhc
Copy link

burnhc commented Dec 26, 2021

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

sicsol commented Dec 28, 2021

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

@rushabhOrdex
Copy link

rushabhOrdex commented Jan 1, 2022

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

Same Issue here but not using expo

@sicsol
Copy link

sicsol commented Jan 13, 2022

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

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

@SeanDunford
Copy link

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

GetStream/react-native-activity-feed#244 (comment)

Related issue in the actual repo.

@afestein
Copy link

Also mentioned in GetStream/react-native-activity-feed#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
Copy link

@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.

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

6 participants