React-navigation contentComponent is not working

Question

I am trying to customize drawer navigator in my app. I am using react-navigation. When first time I've inserted this code it showed just white screen and even navigation links were disappeared after making few things it showed this error screen.

Before that it showed just white screen inside drawer without my links. Here is the code.

App.js

import React from 'react';

import {StyleSheet, Text, View } from 'react-native';

import WelcomeScreen from './screens/WelcomeScreen';

import SigninScreen from './screens/SigninScreen';

import SignupScreen from './screens/SignupScreen';

import HomeScreen from './screens/HomeScreen';

import FoodScreen from './screens/FoodScreen';

import RestaurantsScreen from './screens/RestaurantsScreen';

import ProfileScreen from './screens/ProfileScreen';

import FavoritesScreen from './screens/FavoritesScreen';

import SettingsScreen from './screens/SettingsScreen';


import { TabNavigator, DrawerNavigator, StackNavigator,contentComponent } from 'react-navigation';

import {DrawerContent} from './components/DrawerContent'


export default class App extends React.Component {

render() {

const MainNavigator = TabNavigator({

  welcome: { screen: WelcomeScreen },

  signin: { screen: SigninScreen },

  signup: { screen: SignupScreen },

  main: {

       screen: DrawerNavigator({

         home: { screen: HomeScreen },

         food: { screen: FoodScreen },

         restaurants: { screen: RestaurantsScreen },

         profile: {

           screen: StackNavigator({

             profilw: { screen: ProfileScreen },

             settings: { screen: SettingsScreen }

           })

         }

       },

       {


  contentComponent: props => <DrawerContent {...props} />,
}

        )
     }
   },

   );


return (

  <MainNavigator />



);


}
}

DrawerContent.js

import React, { Component } from "react";

import { View, ScrollView,Button,Text } from "react-native";

class DrawerContent extends Component {
render() {

return (

  <ScrollView style={styles.container}>

    <View style={{ flex: 1 }}>

      <Button transparent info onPress={() => { this.handlechange(); }}>

        <Text style={{ fontSize: 16 }}>Change Email</Text>

      </Button>

    </View>

  </ScrollView>
);

} }

const styles = {

container: {

flex: 1,

padding: 20,

backgroundColor: 'Green',

}, };

export default DrawerContent;

Try updating the Button onPress event(in DrawerContent component) to — Rohan Kangale, Jul 27 '17 at 11:41
There is no such function called "this.handlechange" defined. Also, you need to navigate/route. For that, you have to use the navigation object. — Rohan Kangale, Jul 27 '17 at 12:11
Possible duplicate of [Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object](https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string) — btzr, Jul 28 '17 at 17:49
you are using default export: `export default DrawerContent;` — btzr, Jul 28 '17 at 18:20

score 0 · Answer 1 · answered Jul 28 '17 at 13:32

0

The button you are using is the button that should be imported from the native base , as you are using the style property for that , or simply used this instead of that button code , replace it with below one

<Button onPress={() => { this.handlechange(); }} title="Learn More" color="#841584" />

Using this will help you with that

answered Jul 28 '17 at 13:32

HpDev

2,789
1
15
20

this don't resolve the main issue: `Element type is invalid` – btzr Jul 28 '17 at 17:52
1

try removing the { } in import {DrawerContent} from './components/DrawerContent' Because i have used the same code i dont have to import like that i have just the import DrawerContent form './components/DrawerContent' – HpDev Jul 28 '17 at 18:46
that's because it's using default export: `export default DrawerContent;` – btzr Jul 28 '17 at 18:49
BTW it's not my problem / question :) – btzr Jul 28 '17 at 18:55

score 0 · Answer 2 · answered Oct 18 '20 at 06:01

0

I think it's because contentComponent expects a class component, instead of using react-navigation, use react-navigation-drawer to import createDrawerNavigaor and DrawerNavigatorItems

answered Oct 18 '20 at 06:01

Pearel Nazareth

1
1

React-navigation contentComponent is not working

2 Answers2

Linked