Render error: Couldn't find a navigation context

Điểm vào có thể tái hiện là App tối thiểu với NavigationContainer, Tab.Navigator, Feed và StreamApp được hiển thị trong issue. Chạy nó trên Android với các phiên bản Expo và Node đã nêu, sau đó theo dõi cách FlatFeed và các component con của nó sử dụng ngữ cảnh điều hướng bên trong tab navigator. Công việc được xem là hoàn tất khi feed render trong thiết lập điều hướng đó mà không gặp lỗi đã báo cáo.

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