CODEWITHSUNDEEP
react-nativereact-navigation
Bikram Nath
Bikram Nath

Reputation: 483

Passing props to Route file from App.js in react native

I have to show logged in user in my app. I can get the user info in App.js need to pass the user data to the Route.js. I have set up Routes in a different file. I have set up my routes as

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/FontAwesome';
// screens
import Login from '../screens/login';
import Logout from '../screens/logout';
import activity from '../screens/activity';
import addActivity from '../screens/addActivity';
import AuthLoadingScreen from '../screens/authLoading';
import OrganizationScreen from '../screens/organization';
import ContactScreen from '../screens/contact';
import AllContact from '../screens/allcontact';
import ContactAdd from '../screens/contactAdd';
import OrganizationAdd from '../screens/organizationAdd';
import DealForm from '../screens/dealForm';
import MyDeals from '../screens/mydeals';
import Mis from '../screens/mis';
import Misgraph from '../screens/misgraph';
import Deals from '../screens/deals';
import Dashboard from '../screens/dashboard';
import AddTarget from '../screens/addTarget';
import AddDeal from '../screens/addDeal';
import { Container, Header, Body, Content, Text} from 'native-base';
export const AuthStack = createStackNavigator(
  {
    Register: {
      screen: Login,
    },
  },
  {
    headerMode: 'none',
  },
);
export const DashboardStack = createStackNavigator(
  {
    Dashboard: {
      screen: Dashboard,
    },
    AddTarget: {
      screen: AddTarget,
    },
    AddDeal: {
      screen: AddDeal,
    },
  },
  {
    initialRouteName: 'Dashboard',
    headerMode: 'none',
  },
);
const CustomDrawerContentComponent = (props) => (
  <Container>
    <Header style={{ backgroundColor: 'grey'}}>
      <Body>
        <Text> <Icon name="user" color="#fff" size={20} /></Text>
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
)
export const Drawer = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStack,
  },
  Deal: {
    screen: DealForm,
  },
  MyDeal: {
    screen: MyDealStack,
    navigationOptions: {
      drawerLabel: 'My Deals',
    },
  },
  Organization: {
    screen: OrganizationStack,
  },
  Contact: {
    screen: ContactStack,
  },
  Performance: {
    screen: MisStack,
  },
  Logout: {
    screen: Logout,
  },
},
  {
    initialRouteName: 'Dashboard',
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#075E54',
    }
  }
);
export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: Drawer,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    },
  ),
);

and App.js as

import AsyncStorage from '@react-native-community/async-storage';
import Splash from './app/screens/splash';
import { Root } from 'native-base';
import Route from './app/Route/Route';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isloggedIn: false,
      isLoading: true,
      user: {}
    };
  }
  loginStatusCheck = async () => {
    const userToken = await AsyncStorage.getItem('@accessToken');
    const user = await AsyncStorage.getItem('@userData');
    let userData = JSON.parse(user);
    if (userToken) {
      this.setState({ isloggedIn: true, isLoading: false, user: userData });
    } else {
      this.setState({ isloggedIn: false, isLoading: false });
    }
  };
  render() {
    return (
      <Root>
        <Route screenProps={{
          hello: "World"
        }}/>
      </Root>
    );
  }
}

How to pass the user data to the CustomDrawerContentComponent present in Route.js? used ScreenProps to send to Route file, but how to access it? It is not a class component.

Upvotes: 0

Views: 131

Answers (1)

amitpanday
amitpanday

Reputation: 96

Your are looking for this, For access user data in route

this.props.screenProps

For pass data to CustomDrawerContentComponent

<CustomDrawerContentComponent userData={this.props.screenProps}/>

Upvotes: 1

Related Questions