Навигация между компонентами в React Native

Мне нужно переключаться между двумя представлениями в React Native. Но проблема в моем компоненте, где кнопка для навигации находится на другом компоненте. Я использую реагирующую навигацию.

Позволь мне показать тебе :

У меня есть компонент MainPage здесь

class MainPage extends Component {
  render() {
    return <View style = {styles.container}>
              <ComponentWithButton /> 
          </View>
  }
}

Итак, в моем компоненте ComponentWithButton:

class ComponentWithButton extends Component {
      goToComponent(){
         this.props.navigation.push('Next')
      }
      render() {
        return <View style = {styles.container}>
                  <Button onPress = {this.goToComponent.bind(this)}/> 
              </View>
      }
    }

Мой следующий компонент называется NextComponent.

У меня ошибка undefined не является объектом (оценка "this.props.navigation.push")

Мой навигатор по стеку таков:

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainPage
    },
    Next: {
      screen: NextComponent
    }
  },
  {
    initialRouteName: "Main"
  },
  {
    navigationOptions: {
      header: { visible: false }
    }
  }
);

Я пытаюсь запустить свой код только с одним компонентом, который отлично работает. Я думаю, что проблема в том, что ComponentWithButton не вызывается в моем RootStack или что-то в этом роде. Я не знаю я новичок