How to add Custom Sidemenu in Existing Home Page - reactjs

Question

In my React Native app Code, i used StackNavigator for Storing Splash Screen, Login Screen, and Home Screen. In that Home Screen i want to add a SideMenu whenever Click a Icon in the Top Right Corner of the Page.
I searched many Drawer Navigator examples. In that examples the side menu is added in Left/Right side of the default header.But in my case, I just create a top bar and in that bar I include Logo, SearchBar Input, Logout Icon,History Icon and Finally the SideMenu Icon.
// Index Page
//import App from './App';
import { name as appName } from './app.json';
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import Splash from './src/components/Splash'
import Login from './src/components/Login'
import Home from './src/components/Home'
const MainNavigator = createStackNavigator({
Splash: {
screen: Splash
},
Login: {
screen: Login
},
Home: {
screen: Home
}
},
{
navigationOptions: {
header: null
}
}
);
const Apps = createAppContainer(MainNavigator)
AppRegistry.registerComponent(appName, () => Apps);
HomePage render()
<View style={styles.backgroundcontainer}>
{/* Top Bar */}
<View style={styles.navBar}>
<View style={styles.leftNav}>
<Image source={require('../images/logo2.png')} style={{ width: 75, height: 55, borderRadius: 26 }} />
</View>
<View style={styles.middleNav}>
<TextInput style={styles.input}
placeholder='Enter Item to Search..'
//placeholderTextColor='rgba(255,255,255, 0.7)'
returnKeyType={"next"}
underlineColorAndroid='transparent'
value={this.state.search_keyword}
onChangeText={(search_keyword) => this.setState({ search_keyword })}
/>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => this.getSearchResult(this.state.search_keyword)}>
<Icon name="magnify" size={40} color={'#00bfff'} />
</TouchableOpacity>
</View>
<View style={styles.rightNav}>
{/* <TouchableOpacity style={{ borderBottomColor: 'black' }}>
<Text style={{ fontSize: 22, textAlign: 'center', fontWeight: 'bold' }}>Sign In</Text>
</TouchableOpacity> */}
<TouchableOpacity onPress={() => this.logout()}>
<Icon name="logout" size={25} style={styles.navItem} />
</TouchableOpacity>
<TouchableOpacity>
<Icon name="clipboard-outline" size={25} color={'#00bfff'} style={styles.navItem} />
</TouchableOpacity>
<TouchableOpacity>
<Icon name="menu" size={25} color={'#00bfff'} style={styles.navItem} />
</TouchableOpacity>
</View>
</View>
</View>
package.json
react": "16.9.0",
"react-native": "0.61.2",
"react-native-gesture-handler": "^1.4.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.4"
Expected behaviour is When I click the SideMenu Icon the Sidemenu will open. But I don't have any idea for creating such a Custom Side Menu.
[HomePage] https://imgur.com/oNbURU8
[Expected Image] https://imgur.com/LjBEyrf

Answer 1

Create a Drawer Route on top of your navigation routes like this
const MyDrawerNavigator = createDrawerNavigator({
Home: {
screen: MainNavigator,
},
});
const MyApp = createAppContainer(MyDrawerNavigator);
and pass your main navigator as a route.
const MainNavigator = createStackNavigator({
Splash: {
screen: Splash
},
Login: {
screen: Login
},
Home: {
screen: Home
}
},
{
navigationOptions: {
header: null
}
}
);

Answer 2

You will have to use react-navigation-drawer for it.
//import App from './App';
import { name as appName } from './app.json';
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import Splash from './src/components/Splash'
import Login from './src/components/Login'
import Home from './src/components/Home'
const HomeStack = createDrawerNavigator({
Home: {
screen: Home,
},
{
navigationOptions: {
header: null
}
}
});
const MainNavigator = createStackNavigator({
Splash: {
screen: Splash
},
Login: {
screen: Login
},
Home: HomeStack
},
{
navigationOptions: {
header: null
}
}
);
const Apps = createAppContainer(MainNavigator)
AppRegistry.registerComponent(appName, () => Apps);
Then update the menu button for opening the drawer like
<TouchableOpacity onPress={this.props.navigation.toggleDrawer)}>
<Icon name="menu" size={25} color={'#00bfff'} style={styles.navItem} />
</TouchableOpacity>
For more information https://reactnavigation.org/docs/en/drawer-navigator.html