CODEWITHSUNDEEP
javascriptreact-nativecomponentsjsx
sd_dewasurendra
sd_dewasurendra

Reputation: 393

What triggered first in react native?

I have a react native component which contains both WillFocus and componentDidMount functions. My Questions is, if I navigate to this component which function is getting triggered first? 'WillFocus' or 'componentDidMount' Sample code is showing below

class Notifications extends Component {
    static navigationOptions = {
    header: null
    }
    constructor(props) {
        super(props);
        const{navigation}=this.props
        this.state = {
          highlightHome : true,
          highlightNotifications: true,

        }
    }

    willFocus = [this.props.navigation.addListener(
        'willFocus',
         payload => {        
            console.log('willFocus')
         }             
    )]

    componentDidMount() {
       console.log('componentDidMount')
    }
}

Upvotes: 0

Views: 65

Answers (2)

huzaifamandviwala
huzaifamandviwala

Reputation: 435

React Navigation emits events to screen components that subscribe to them.

componentDidMount: This method is called once all our children Elements and our Component instances are mounted onto the Native UI. When this method is called we now have access to the Native UI (DOM, UIView, etc.), access to our children refs and the ability to potentially trigger a new render pass.

willFocus: the screen will focus.

By definition, willFocus will be called after ComponentDidMount because it mounted all the UI components.

Upvotes: 2

Idan
Idan

Reputation: 4023

componentDidMount call first, but in the next time (back or something...) just willFocus call

Upvotes: 0

Related Questions