CODEWITHSUNDEEP
react-nativereact-navigation
oblinez
oblinez

Reputation: 37

React native navigation not initialized yet

I'm learning react native but I'm having difficulty with navigation, it's returning the error that navigation has not been initialized yet.
I looked for some tutorials, I tried some other ways, I went to the react native navigation documentation and, incredible as it may seem, it's the same as in the documentation... not even the GPT chat haha ​​it didn't help me.

Can someone with experience in react native give me a light?

app.tsx:

import { NavigationContainer } from '@react-navigation/native';
import { createAppContainer } from 'react-navigation';
import StackNavigator from './app/index/navigator';

const AppContainer = createAppContainer(StackNavigator);

const App = () => {
  return (
    <NavigationContainer>
      <AppContainer />
    </NavigationContainer>
  );
}

export default App;

navigator.tsx?

import { createStackNavigator } from 'react-navigation-stack';
import Index from '.';
import AddNewGrocery from '../components/addNewGrocery'

const StackNavigator = createStackNavigator({
  home: { screen: Index, navigationOptions: { headerShown: false } },
  addNewGrocery: { screen: AddNewGrocery, navigationOptions: { headerShown: false } },
});

export default StackNavigator;

index.tsx:

const Index = () => {
  return (
      
    <View style={styles.container}>

      <Text style={styles.title}>Gestão de Compras</Text>

      <LastFiveGrocery />

      <MonthAverageSpend />

      <TotalSpend />

      <AddButton />

      <StatusBar
        translucent={false}
        backgroundColor={'rgba(43, 43, 43, 1)'}
        barStyle='light-content' />
    </View>
  );
}

AddButton.tsx:

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';

const AddButton = () => {

  const navigation = useNavigation();

  const handleAddButtonPress = () => {
    navigation.navigate('addNewGrocery' as never);
  }

  return (
    <TouchableOpacity style={styles.addButtonContainer} onPress={handleAddButtonPress}>
      <View style={styles.addButton}>
        <Ionicons name="ios-add" size={36} color="white" />
      </View>
    </TouchableOpacity>
  );
}

I already tried to use it this way:
AddButton:

  const { navigate } = useNavigation<StackNavigationProp<ParamListBase>>();

  const handleAddButtonPress = () => {
    navigate('addNewGrocery');
  }

I've also tried using it this way:
navigator:

const StackNavigator = createAppContainer(createStackNavigator({
  Home: { screen: Index },
  addNewGrocery: AddNewGrocery,
}));

app.tsx:

import StackNavigator from './app/index/navigator';

const App = () => {
  return (
      <StackNavigator />
  );
}

export default App;

Upvotes: 1

Views: 1453

Answers (1)

Fiston Emmanuel
Fiston Emmanuel

Reputation: 4849

You are using 2 different navigation library in simultaneously:

  1. @react-navigation
  2. react-navigation

Remove react-navigation and refactor the App.js file as below:

import { NavigationContainer } from '@react-navigation/native';

import StackNavigator from './app/index/navigator';



const App = () => {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

export default App

StackNavigator should be implemented as per documentation -

https://reactnavigation.org/docs/stack-navigator/#api-definition

Upvotes: 2

Related Questions