CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Mojtaba Hajishah
Mojtaba Hajishah

Reputation: 63

react navigation tab navigator inside static layout

Can I achieve this layout?

sketch of layout:

enter image description here

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.

Upvotes: 3

Views: 1499

Answers (2)

tudor
tudor

Reputation: 508

For react-navigation 3.+ the Common mistakes section of the documentation comes in handy. You can find the documentation and the example here.

Specifically, you need to expose the static router and pass navigation as a prop. You can further customise the tab styles as required.

const TabbyNavigator = createMaterialTopTabNavigator({   
  Tab: TabScreen,   
  AnotherTab: AnotherTabScreen
});

class SomeScreen extends React.Component {   
  static router = TabbyNavigator.router;

  render() {
    return (
      <TabbyNavigator navigation={this.props.navigation} />
    );   
  } 
}

Upvotes: 0

Rahul Bansal
Rahul Bansal

Reputation: 304

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>
        )
    }
}

Upvotes: 2

Related Questions