React-native-tab-view: Update component when changing tab.

Created on 22 May 2017 · 7Comments · Source: satya164/react-native-tab-view

Hello,

In my use case I have a tab for settings and a tab for a recording button. In the settings tab i will update a language text input which will export some variable saying what the language has been changed to and then when i navigate back to the recorder view i will need to re initialise a websocket connection for the recorder with this edited language variable.

The problem for me is that, when I go back to the recorder view, it seems that it only re-renders and doesn't re update the whole component. Am I missing something in order to make this happen? any help would be appreciated.

Thanks.

Source

sno6

Most helpful comment

If you want to run something when the tab is in focus, pass focused as a prop:

renderScene = ({ route, focused }) => {
  ...
  return <MyScene focused={focused} />
  ...
};

Then in MyScene, check for the prop and do what you need

componentDidMount() {
  if (this.props.focused) {
    // do something
  }
}

componentDidUpdate(prevProps) {
  if (prevProps.focused !== this.props.focused && this.props.focused) {
    // do something
  }
}

satya164 on 22 May 2017

🎉8

All 7 comments

https://github.com/react-native-community/react-native-tab-view#caveats

satya164 on 22 May 2017

😕3 👎1

Have read the link but I am still confused as to how to do this. Could you give me any further advice please.

sno6 on 22 May 2017

I'm not sure what's the problem you are facing. Can you put a demo on https://snack.expo.io/ ?

satya164 on 22 May 2017

I have code in componentWillMount() (tried componentDidMount() as well) that sets up a recorder (runs objective c code). When I make a change in the settings tab, and then come back to the recorder tab, I want it to run this set up code before rendering again (like it would if i refreshed on that tab).

sno6 on 22 May 2017

https://snack.expo.io/H1rP361WZ So simply I would like that initialising code that is ran in setup to run again once that tab has been chosen (Recorder tab).

sno6 on 22 May 2017

If you want to run something when the tab is in focus, pass focused as a prop:

renderScene = ({ route, focused }) => {
  ...
  return <MyScene focused={focused} />
  ...
};

Then in MyScene, check for the prop and do what you need

componentDidMount() {
  if (this.props.focused) {
    // do something
  }
}

componentDidUpdate(prevProps) {
  if (prevProps.focused !== this.props.focused && this.props.focused) {
    // do something
  }
}

satya164 on 22 May 2017

🎉8

Not too sure how it works but it does. Thanks :)

sno6 on 22 May 2017

Was this page helpful?

0 / 5 - 0 ratings