How to catch the TabBarItem on clicked event?

[xiewei]

Hi, alinz.
How to catch the TabBarItem on clicked event? Is there a callback function?

[Ali Najafizadeh]

@jallens, you don't need one. you might be surprised but you just have to change your thinking. However you can be notify when the tab is activated. Probably I have to document this one. So here's the short version

instead of having onTabClick or similar functionality, I have use lifecycle events. These events are being called in both tab and content.

so when a tab is selected, the framework check whether your component implements these lifecycle methods. if you do it will call them in order.

for example

class About extend Component {
  constructor(props, context) {
    super(props, context)
  }

  tabWillFocus() {
    //it will be called once tab is plan to focus.
    //this is useful if you need to do something before your tab is show
  }

  tabDidFocus() {
    //it will be called once tab is show on screen.
  }

  tabWillBlur() {
    //it will called once another tab is selected and framework
    //is giving a chance to do some cleanup
  }

  tabDidBlur() {
    //it means that tab is now hide from user because another tab is shown
  }

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

and for your Icon that represents that content you can create another component

class AboutICon extend Component {
  constructor(props, context) {
    super(props, context)
  }

  tabDidActive() {
    //it will be called once tab is selected
  }

  tabDidInactive() {
    //it will be called once another tab is selected.
  }

  render() {
    return (
      <View>
        <Text>About me</Text>
      </View>
    );
  }
}

As you can see, the lifecycle in low level gives you more chance to do more work without to maintain the state by yourself.

We have been using this method in our app and so far we are very happy. It give us a clean way of defining what needs to be done on certain situation.

[xiewei]

think alinz.