2

I am using tabs in my react native project. I wanted to update Header text and show/hide left, right button on tab click in react native.

I am using this code for Tabs Navigation and StackNavigator for Tabs Screens:

const TabScreen = createMaterialTopTabNavigator(
  {
    AllChallenges: {
      screen: AllChallenges,
      navigationOptions: {
        title: 'All CHALLENGES',
        fontFamily: Fonts.medium,
        header: null,
      }
    },
    YourProgress: {
      screen: YourProgress,
      navigationOptions: {
        title: 'YOUR PROGRESS',
        fontFamily: Fonts.medium,
        header: null,
      }
    },
  },
  {
    tabBarPosition: 'top',
    header: null,
    swipeEnabled: false,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: 'rgb(94,94,95)',
      inactiveTintColor: 'rgb(221,221,221)',
      style: {
        backgroundColor: '#ffffff',
        height: 40,
      },
      labelStyle: {
        marginTop: 5,
        textAlign: 'center',
        fontFamily: Fonts.medium,
        fontSize: 12,
      },
      indicatorStyle: {
        borderBottomColor: 'rgb(32,186,113)',
        borderBottomWidth: 2,
      },
    },
  }
);

//making a StackNavigator to export as default
const Challenges = createStackNavigator({
  TabScreen: {
    screen: TabScreen,
    header: null,
    navigationOptions: ({ navigation }) => {
      // ListAisle.headerList()
      return {
        title: "CHALLENGES",
        headerTintColor: 'white',
        headerTitleStyle: {
          textAlign: 'center',
          flexGrow: 2,
          alignSelf: 'center',
          marginLeft: 12,
          fontFamily: Fonts.summerNormal,
          fontSize: 25,
        },
        headerStyle: {
          backgroundColor: '#ff6500'
        },
        tabBarOnPress: () => Alert.alert('hello')
      }
    },
  },
});

In below screenshot on tapped checkbox button, I want to show delete button in the header

Any idea how to update the title and show hide header buttons?

enter image description here

Mumtaz Hussain
  • 925
  • 9
  • 23
Danish Hassan
  • 155
  • 7

1 Answers1

0

I have spend a lot of time solving this issue...

Finally I found a solution to change a header text and get header response in Tabs Stack.

Added this line in YourProgress class constructor:

this.props.navigation.navigate('AllChallenges', { title: 'Challenge',isEditClick: 0})

In Challenge class you have to add this code in NavigationOptions to check the parameters and then use these parameters to set in :

const titles =navigation.state.routes[navigation.state.index].params != null ? navigation.state.routes[navigation.state.index].params.title : 'Challenge'

In case you want to get value in YourProgress Stack on clicking YourProgress Tabs Header then add this code on Edit Button press:

this.props.navigation.navigate('AllChallenges', { title: 'Challenge',isEditClick: 1)

You can get isEditClick value 1 in YourProgress screen in componentDidUpdatefunction:

  componentDidUpdate() {
    const { navigation } = this.props;
    var isEditValue = this.props.navigation.state.params != null ? this.props.navigation.state.params.isEditClick : ''
})
  }
Danish Hassan
  • 155
  • 7