React - родной не может прочитать свойство «навигация» неопределенного

Я создаю приложение в режиме реагирования и использую StackNavigator для навигации. Вот моя проблема:

У меня есть основная страница, на которой я импортирую два других компонента:

export default class RoomChoice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      create: this.props.navigation.state.params.create,
      join: this.props.navigation.state.params.join
    }
  }

  onCreatePress = () => {
    this.setState({ create: true })
    this.setState({ join: false })
  }

  onJoinPress = () => {
    this.setState({ join: true })
    this.setState({ create: false })
  }

  render() {
    return (
      <View style = {styles.container}>
        <BtnCreateJoinRoom
          create = {this.state.create}
          join = {this.state.join}
          onPressCreate = {() => {
            this.onCreatePress()
          }}
          onPressJoin = {() => {
            this.onJoinPress()
          }}
        />
        {this.state.create ? <CreateRoom /> : <JoinRoom />}
      </View>
    )
  }
}

Вот мой компонент CreateRoom, в котором я хочу использовать переход на другую страницу:

export default class CreateRoom extends Component {

  render() {
    return (
      <View style = {styles.container}>
          <BtnComponent title='Créer un code'
                        onPressBtn = {() => { this.props.navigation.navigate('CodeCreateRoom') }}/>
      </View>
    )
  }
}

Но когда я нажимаю, выдает ошибку: невозможно прочитать свойство «навигация» неопределенного

import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator
} from 'react-navigation'

import Home from '../screens/Home'
import RoomChoice from '../screens/Room/RoomChoice'
import CreateRoom from '../screens/Room/CreateRoom'
import CodeCreateRoom from '../screens/Room/CodeCreateRoom'

const AppStack = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
    RoomChoice: {
      screen: RoomChoice,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    },
    CreateRoom: {
      screen: CreateRoom,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    },
    CodeCreateRoom: {
      screen: CodeCreateRoom,
      navigationOptions: {
        headerStyle: {
          backgroundColor: BUTTON_SECONDARY_BACKGROUND_COLOR,
          borderBottomWidth: 0
        },
        headerTintColor: 'white'
      }
    }
  },
  {
    headerLayoutPreset: 'center',
    initialRouteName: 'Home'
  }
)

Я не понимаю, почему он не хочет перемещаться, у кого-нибудь есть идеи?