react navigation tab navigator inside static layout

Question

Can I achieve this layout?

sketch of layout:

the header part is shared across all tabs. it's part of the layout in this screen. and each tab contains a scrollView.

btw, I have tried defining the tab navigator as a component and using that inside the render method, along with the static header component.

render() {
  return ( 
    <StaticHeaderComponent />
    <MyTabNavigator />
  ) 
}

that does not work. the tab navigator does not render at all.

Answer 1

Here is a simple working example:

MyTabNavigator.js

import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import { TabNavigator } from 'react-navigation'

class FirstTab extends Component {
    render() {
        return (
            <ScrollView>
                <Text>first tab</Text>
            </ScrollView>
        )
    }
}

class SecondTab extends Component {
    render() {
        return (
            <ScrollView>
                <Text>second tab</Text>
            </ScrollView>
        )
    }
}

const MyNavigator = TabNavigator({
    first: { screen: FirstTab },
    second: { screen: SecondTab }
},
{
    tabBarPosition: 'top'
})

export default MyNavigator

App.js

import React, { Component } from 'react'
import { View } from 'react-native'
import MyTabNavigator from './MyTabNavigator'

export default class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <View // place your StaticHeaderComponent here
                    style={{height: 100, backgroundColor: 'green'}}
                />
                <MyTabNavigator/>
            </View>
        )
    }
}