React Native навигация возвращается при первом нажатии, но работает во второй раз

Question

У меня есть несколько динамических кнопок на первом экране, которые при нажатии должны перейти на другой экран с некоторыми параметрами.

Проблема в том, что после добавления другой кнопки навигация не работает в первый развместо этого он переводит меня к целевому компоненту, запускает прослушиватель навигации willFocus, запускает componentDidUpdate (), но вместо рендеринга целевого компонента я просто перенаправляюсь на исходный компонент, который перерисовывается.

После этого, если янажмите эту же кнопку, навигация работает нормально, и целевой компонент отображается со всеми параметрами навигации.

Вот мой код:

// component with the buttons that should navigate to another component
// in render
...
<Button primary onPress={() => {
    this.onNewJobPress(item.template_id);
}}>
// event handler
onNewJobPress(template_id) {
    console.log( 'inside' ); // both console.logs are triggered
    console.log( template_id ); // id is correct
    this.props.navigation.navigate('CreateJobScreen', {
        template_id: template_id,
        new_template: false
    });
}


// targeted component
componentWillMount() {
    ...
    // adding focus listener
    this.props.navigation.addListener('willFocus', () => {
         // I can see both of these logs in the console before I'm
         // redirected back to the original component
         console.log('focused'); 
         console.log(this.props.navigation.getParam('template_id'));
    }
  }
  componentDidUpdate(prevProps, prevState) {
     // I can also see this before being redirected back
     console.log('did update');
  }

Нет this.props.navigation.navigateметоды в целевом компоненте, которые возвращаются к первому компоненту.