Drawer can be seen when swiping back - react-native

Question

I'm developing mobile application with the below technologies.
- react-native
- native-base (Especially, Drawer component)
- react-native-router-flux
And I have a problem with mine.
My application has Drawer on the left side, and it can be shown from the left side on the screen when clicking the icon on the header.
However, when swiping back, the Drawer component can be seen but not as Drawer, it is like a screen that attaches on the left side.
This link is the GIF animation that reproduces my problem.
https://gyazo.com/a9109844199bae04f898431edbeaddbc
These are my code.
DrawerComponent
import React, { Component } from 'react';
import { Drawer, Hdeader, Left, Icon } from 'native-base';
import SidebarContainer from '../component/SidebarConmponent';
:
export default class DrawerComponent extends Component {
:
render() {
return (
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<SidebarComponent navigator={this._navigator} userId={this.props.userId} firebase={this.props.firebase}/>}
openDrawerOffset={0.4}
tapToClose={true}
onClose={() => this.closeDrawer}
onOpen={() => this.openDrawer}
styles={{ height: 100 }}
side={'left'}
type={'overlay'}
>
<Header style={{ backgroundColor: 'transparent' }}>
<Left style={{ flexDirection: 'row'}}>
<Icon onPress={this.openDrawer.bind(this)} type='MaterialIcons' name='menu' style={{ color: 'white', justifyContent: 'center' }} />
</Left>
{this.props.children}
</Drawer>
:
SiderbarComponent
:
import React, { Component } from 'react';
import { Container, Content, Header, Left, Icon, List, ListItem } from 'native-base';
export default class SidebarContainer extends Component {
:
render() {
return (
<Container>
<View style={{ height: height }}>
<Content>
<List>
<ListItem button>
<Icon type='Ionicons' name='md-home' />
<Text style={{ paddingLeft: 10 }}Home</Text>
</ListItem>
</List>
</Content>
</View>
</Container>
)
}
}
HomeComponent
import React, { Component } from 'react';
import { Text } from 'react-native';
import DrawerComponent from '../component/DrawerComponent';
export default class HomeComponent extends Component {
render(
return (
<DrawerComponent>
<Text>Home</Text>
</DrawerComponent>
)
)
}

Answer 1

Home component extends from wrong.need to extends from Component import
try this like this
import React from 'react'
import { Text } from 'react-native';
import DrawerComponent from '../component/DrawerComponent';
export default class Home extends React.Component {
render(){
return (
<DrawerComponent>
<Text>Home</Text>
</DrawerComponent>
)
}
}