CODEWITHSUNDEEP
javascripttypescriptreact-nativeexpo
Dr oscar
Dr oscar

Reputation: 415

Pass props from App class to const function React Typescript

Im trying to create an React Native App with Expo. I have a logical error passing props from App class to my Component "Navigator" type const function. Im not sure how i must to pass the props or how i must to access to them without passing from App:

App.tsx

import React, {useState} from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import Navigator from './Components/Navigator';

export default class App extends React.Component {
  render(){
   return (
     <NavigationContainer>
       <Navigator props={this.props}/>
     </NavigationContainer>
   );
  }
}

Navigator.tsx

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'

const Stack = createStackNavigator();

function Navigator({props}){
  return (
           <Stack.Navigator>
              <Stack.Screen name="Login" options={{title:'Login.'}}>
                {(props) => <Login {...props} />}
              </Stack.Screen>
              <Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
           </Stack.Navigator>
  );
}

export default Navigator;

I have error undefined is not an object (props)

Upvotes: 2

Views: 748

Answers (1)

Yoel
Yoel

Reputation: 7985

This happens because you are make destructuring

Then when you call props it's like doing props.props

function Navigator(props){// remove {  } from this line

Upvotes: 1

Related Questions