BottomTabNavigator + header bar

#1

Hi,

I used “react-navigation”: “^1.0.0-beta.13” last year. Everything worked perfectly. Today I would like to upgrade my expo react app to 30. I use “react-navigation”: “^2.13.0”.

My navigatation is still there buy my tabBarIcon+header bar disapeared. I would like display both.

I tryed several thing. I don’t know how to correct this problem:

Thank by advance for your help !

Here an exemple :

App.js

import React from 'react';
import {View} from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';

import myScreen1 from './screens/myScreen1.js';
import myScreen2 from './screens/myScreen2.js';

class HomeScreen extends React.Component {
    render() {
        return (
            <View></View>
        );
    }
}

export default createBottomTabNavigator(
    {
        myScreen1: {screen: myScreen1},
        myScreen2: {screen: myScreen2}
    },
    {
        tabBarOptions: {
            showIcon: true,
            showLabel: true,
            indicatorStyle: {
                height: 2,
                backgroundColor: "#fff"
            },
            style: {
                backgroundColor: '#d7322c',
                borderColor: "#000",
                borderTopWidth: 3,
                borderTopColor: "#ab050c"
            }
        }
    }
);

./screens/myScreen1.js (tabBarIcon OK ; “Title1” not OK )

import React from 'react'
import {Text, ScrollView, Image, View} from 'react-native'

export default class myScreen1 extends React.Component {

    static navigationOptions = ({navigation}) => {
        return {
            title: 'Title1',
            tabBarIcon: () => {
                return <Image source={require('./images/boutons/bouton4.png')} style={{width: 25, height: 25}}/>
            }
        };
    }

    render() {
        return (
            <ScrollView>
                <View>
                    <View><Text>Lorem1</Text><Text>Lorem1</Text><Text>Lorem1</Text></View>
                </View>
            </ScrollView>
        );
    }
}

./screens/myScreen2.js ( “title” OK, tabBarIcon not OK )

import React from 'react'
import {Text, ScrollView, Image, View} from 'react-native'
import {createStackNavigator} from "react-navigation";
import LouerVelo from "../pages/LouerVelo";

class myScreen2 extends React.Component {
    render() {
        return (
            <ScrollView>
                <View>
                    <View><Text>Lorem2</Text><Text>Lorem2</Text><Text>Lorem2</Text></View>
                </View>
            </ScrollView>
        );
    }
}


export default createStackNavigator({
    myScreen2: {
        screen: myScreen2,
        navigationOptions: () => ({
            title: 'Title1',
            tabBarIcon: () => {
                return <Image source={require('./images/boutons/bouton3.png')} style={{width: 25, height: 25}}/>
            }
        })
    },
});
0 Likes

closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

0 Likes