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}}/>
}
})
},
});