Custom React Drawer Navigation

Question

i'm currently trying to implement custom component to show the icon i've. i got no error when rendering it , but 2 of list of screen didn't shows up. am i need to do something with styling or there's a problem with my code

if anyone could inspect my code that would be awesome

this is my error

here are my code

App.js

import React from 'react';
import { 
    StyleSheet,
    View,
    SafeAreaView,
    ScrollView,
    Dimensions,
    Image,
    Text
 } from 'react-native';
import {
     createDrawerNavigator,
     DrawerItems
    } from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import SettingsScreen from './screen/SettingsScreen';


export default class App extends React.Component {
    render () { 
        return (
            <AppDrawerNavigator />
        );
    }
}

const CustomDrawerComponent = ( props ) => (
    <SafeAreaView style={{flex: 1}}>
        <ScrollView>
             <View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}>
                 <Image 
                 source={require('./img/cs.png')} 
                 style={{height:120, width:120, borderRadius: 20}}
                 />
             </View>
        </ScrollView>
    </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator ({
    Home: HomeScreen,
    Settings: SettingsScreen
},{  
    contentComponent: CustomDrawerComponent

})

const styles = StyleSheet.create({
    container: {
        flex: 0,
        color: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Homescreen.js

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

class HomeScreen extends Component {
    render () {
        return (
            <View style={styles.container}>
            <Text>Home</Text> 
        </View>
        );
    }
}

export default HomeScreen ;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        color: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Answer 1

According to the official doc, your Drawer Navigator has to be defined like:

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Settings: {
    screen: SettingsScreen,
  }
});

You're not assigning an object with a prop screen to each custom screen. For more details take a look at doc .

Answer 2

as I understand, you need to add DrawerItems to your drawer.

 import { DrawerItems, SafeAreaView } from 'react-navigation'; const CustomDrawerComponent = ( props ) => ( <SafeAreaView style={{flex: 1}}> <ScrollView> <View style={{height:150,backgroundColor:'white',alignItems: 'center', justifyContent: 'center' }}> <Image source={require('./img/cs.png')} style={{height:120, width:120, borderRadius: 20}} /> </View> <DrawerItems {...props} /> </ScrollView> </SafeAreaView> )