How to show top bar button with bottom tabs and side drawer - react-native

Question

Im new to react native and react native navigation (v2) and been struggling with implementing a top nav button i.e. getting the top nav to show.
I wish to add a top bar with a button that can trigger the side drawer but cannot work out how to get the top nav to show.
Here is my working config of the bottom tabs and side draw:
const mainTabs = async () => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'foo.SideDrawer',
},
},
center: {
id: 'MY_STACK',
bottomTabs: {
children: [
{
component: {
name: 'foo.HomeScreen',
options: {
bottomTab: {
fontSize: 12,
text: 'Home',
icon: await Icon.getImageSource("home", 30)
}
}
},
},
{
component: {
name: 'foo.ProfileScreen',
options: {
bottomTab: {
text: 'Profile',
fontSize: 12,
icon: await Icon.getImageSource("person", 30)
}
}
},
}
]
}
}
}
}
})
};
Can anyone advise where the top bar and button config should go?
--
EDIT 1 - Home screen component:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class HomeScreen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Home',
},
leftButtons: [
{
icon: require('../../assets/signin.png'),
text: 'Button one',
id: 'homeButton',
},
],
},
};
}
render () {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F0EFE8'
}
})
export default HomeScreen;

Answer 1

You add this static function in your component
export default class HomeScreen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Home',
},
leftButtons: [
{
icon: require('../../../assets/icons/icon.png'),
id: 'homeButton',
},
],
},
};
}
}
and here you find all needed configs https://wix.github.io/react-native-navigation/#/docs/topBar-buttons