Stream IO Feeds React Native with React Navigation

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>
      );
    };

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