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;

Answer 1

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