const s = StyleSheet.create({
  content: {
    flex: 1,
  },
  screen: {
    backgroundColor: theme.bgColor2,
  },
})

@observer
export class MainScreen extends React.Component<IProps> {
  @observable
  private toolBarHeight: number = 0

  render() {
    return (
      <Screen style={s.screen}>
        <NavigationHeaderBase
          border
          centered
          leftElement={this.renderAvatar()}
          rightElement={<View />}
          title={this.props.headerTitle}
        />
        <View style={s.content}>{this.toolBarHeight > 0 ? this.props.children : null}</View>
        <ToolBar activeItem={this.props.tabActive} onLayout={this.onToolBarLayout} />
      </Screen>
    )
  }

  private onToolBarLayout = (layout: LayoutRectangle) => {
    if (layout.height !== this.toolBarHeight) {
      this.toolBarHeight = layout.height
    }
  }
}