Stream IO Feeds React Native with React Navigation - react-native

Question

I am using the Stream IO Feeds API for React Native. I was trying to follow this example but ended up getting this error when trying to run the app:
Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.
This error is located at:
in FeedInner
in StreamAppConsumer (created by Feed)
in Feed (created by FlatFeed)
in FlatFeed (created by HomeFeed)
in StreamApp (created by HomeFeed)
in RCTView (created by View)
in View (created by HomeFeed)
in HomeFeed (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in SceneView (created by PagerViewAdapter)
in RNCViewPager (created by PagerView)
in PagerView (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PagerViewAdapter)
in PagerViewAdapter (created by TabView)
in RCTView (created by View)
in View (created by TabView)
in TabView (created by MaterialTopTabView)
in MaterialTopTabView (created by MaterialTopTabNavigator)
in Unknown (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by SafeAreaView)
in SafeAreaView (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
I noticed that this issue appears whenever I am using a Stream Flatfeed with a React navigation container. When the feed is on its own (not part of any stack/tab navigation), it renders correctly. I am testing the app on Android using Node v16.13.1. Any tips on this?
I was able to reproduce this issue on a smaller app:
Import statements:
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();
First tab (with Stream feed):
function Feed() {
return (
<StreamApp
apiKey={apiKey}
appId={appId}
token={token}>
<FlatFeed
Activity={props => (
<Fragment>
<Activity
{...props}
notify
Footer={
<ReactionIconBar>
<LikeButton {...props} />
</ReactionIconBar>
}
/>
</Fragment>)}/>
<StatusUpdateForm feedGroup='timeline' />
</StreamApp>
)
}
Second tab:
function Screen2() {
return (
<View style={{ flex: 1 }}>
<Text>Screen 2</Text>
</View>
);
}
Export (all of the code including the previous code is in App.js):
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>
);
};

Answer 1

We asked a similar question on the GitHub repo for GetStream and found that we needed to upgrade to Expo 44 and downgrade expo-activity-feed to version 1.0.0 and ensure it does not have the ^ at the end of 1.0.0.
I hope this helps you as well.
Link to the GitHub Issue discussion https://github.com/GetStream/react-native-activity-feed/issues/244#issuecomment-1013567858