Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Render error: Couldn't find a navigation context

Abierto
#52 9 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, node.js, react-native
Área
mobile

Línea de trabajo

El punto de entrada reproducible es la App mínima con NavigationContainer, Tab.Navigator, Feed y StreamApp que se muestra en la issue. Ejecútala en Android con las versiones de Expo y Node indicadas y, a continuación, rastrea cómo FlatFeed y sus componentes hijos utilizan el contexto de navegación dentro del navegador de pestañas. Se considera terminado cuando el feed se renderiza en esa configuración de navegación sin el error indicado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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>
  );
};
Lenguaje dominante
JavaScript
Estrellas
339
Forks
193
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de GetStream/react-native-example

Todos los issues de GetStream/react-native-example

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.