React Native - React Navigation fixed component on top

Question

I'm trying react navigation inside my react native project. I using TabNavigator for content switching and I would like to make a fixed top bar with my logo inside, each time i swipe to change the tab content, the logo are stick on the top and not moving.

Now i just put the topcontainer inside my HomeScreen

    class HomeScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <View style={styles.topcontainer}>
              <View style={styles.applogocontainer}>
                <Image 
                source={require('./resources/logo.png')}
                  style={styles.applogo}
                />
              </View>
            </View>
          </View>
        );
      }
    }

    class SecondScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <Text style={styles.whitetext}>Second</Text>
          </View>
        );
      }
    }

    class ThirdScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <Text style={styles.whitetext}>Third</Text>
          </View>
        );
      }
    }

    const TabNavs = TabNavigator({
      Home: { screen: HomeScreen },
      Second: { screen: SecondScreen },
      Third: { screen: ThirdScreen },
    },{
      tabBarPosition:'bottom',
      swipeEnabled:true,
      tabBarOptions:{
        tinColor: '#fff',
        activeTintColor: '#eee',
        inactiveTintColor: '#fff',
        style: {
          position: 'absolute',
          backgroundColor: 'transparent',
          left: 0,
          right: 0,
          bottom: 0,
        },
        indicatorStyle:{
          backgroundColor:'white'
        },
        showIcon:true
      }
    }
    );

Answer 1

Yes for topBar menu you can use navigationOptions, is best practise for it:

class MainScreen extends React.Component {
  static navigationOptions = () => ({
    header: (<YourComponentCustom />),
    // others options see you : https://reactnavigation.org/docs/en/headers.html
  });

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      // your code
    );
  }
}



export default MainScreen;

Answer 2

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}

class SecondScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Details Screen</Text>
            </View>
        );
    }
}

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        SecondScreen: {
            screen: SecondScreen,
        },
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            header: (
                <View style={styles.container}>
                    <View style={styles.topcontainer}>
                        <View style={styles.applogocontainer}>
                            <Image
                                source={require('./resources/logo.png')}
                                style={styles.applogo}
                            />
                        </View>
                    </View>
                </View>
            )
        },
    }
);

You can use custom header. See detail from this