не может получить доступ к this.props.navigation с предыдущего экрана (работает во всех других компонентах)

Question

У меня есть resourceScreen и resourceFormScreen, и я пытаюсь передать topic_id с экрана ресурсов на экран формы.

import React from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity,Button} from 'react-native';
import {connect} from 'react-redux';
import {fetchSchools} from '../actions';
import { SearchBar } from 'react-native-elements';

class ResourcesScreen extends React.Component {

  componentDidMount(){
    this.props.fetchSchools()
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "lightblue",
        }}
      />
    );
  }

  header = () => {
  return <Text style={styles.header}>{this.props.schoolName}</Text>
  }
 
  render(){
     return(
    <View>
      <FlatList style={styles.flatlist} keyExtractor={(item)=> item.id} data={this.props.navigation.state.params.resources} ItemSeparatorComponent = { this.FlatListItemSeparator } renderItem={({item}) => {
       return <TouchableOpacity><Text onPress={() => this.props.navigation.navigate('ResourceForm')} style={styles.listitem}>{item.name}</Text>
       <Button title="add resource" onPress={() => this.props.navigation.navigate('ResourceForm', {topicId: item.topic_id})} screenProps={{topicId: item.topic_id}}/></TouchableOpacity>
      }}/>
      </View>
     )
   }
}

  const styles = StyleSheet.create({
    flatlist: {
      flex:1
    },
    listitem: {
      flexGrow: 0,
      flex:1,
      minHeight: 109,
      paddingTop: 45,
      textAlign: 'center',
      justifyContent:"center",
      backgroundColor:"black",
      fontSize: 20,
      color: 'white'
      },
    header : {
      backgroundColor: 'lightblue',
      padding: 20,
      fontWeight: 'bold'
    }
  })

  

     const mapStateToProps = (state) => {
      return {
        resourceNames: state.resourceReducer.resources,
        schoolName: state.schoolReducer.schools
      }
    }

    const mapDispatchToProps = (dispatch) => {
      return {
        fetchResources: () => dispatch(fetchResources()),
        fetchSchools: () => dispatch(fetchSchools())
      }
    }


export default connect(mapStateToProps,mapDispatchToProps)(ResourcesScreen)

import React from 'react'
import {Picker, Text, StyleSheet, View, TextInput, Button} from 'react-native';
import { addResource } from '../actions'
import { connect } from 'react-redux'

class ResourceForm extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      name: '',
      description: '',
      link: '',
      topic_id: this.props.navigation.state.params.topidId
      }
  }


  handleName = (text) => {
    this.setState({ name: text })
 }
 handleDesc = (text) => {
    this.setState({ description: text })
 }
 handleLink = (text) => {
  this.setState({ link: text })
}

  handleSubmit = e => { 
    console.log(e)
      fetch('http://localhost:3000/resources', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              Accept: 'application/json'
          },
          body: JSON.stringify({
              name: this.state.name,
              description: this.state.description,
              link: this.state.link,
              topic_id: this.state.topic_id
          })
      })
          .then(res => res.json())
          .then(data => {
            debugger
              this.props.addResource(data)
          })
  }
 
render(){
  return (
    <View >
      <Text > Demo Form </Text>
      <View>
        <TextInput 
          placeholder="Resource Name" value={this.state.name} onChangeText={this.handleName}/>
        <TextInput
          placeholder="Description" value={this.state.description} onChangeText={this.handleDesc}/>
        <TextInput placeholder="Link" value={this.state.link} onChangeText={this.handleLink}/>
        <TextInput type='hidden'style={{ height: 0 }} value={this.state.topic_id}/>
        <Button title="Submit" onPress={this.handleSubmit}/>
      </View>
    </View>
  )
}}

const mapStateToProps = (state) => {
  return {
    schoolName: state.schoolReducer.schools
  }
}

const mapDispatchToProps = {
    addResource
}

export default connect(mapStateToProps,mapDispatchToProps)(ResourceForm)

Независимо от того, что я пытаюсь, я могу ' t получить доступ к this.props.navigation.state.params.topidId, когда я устанавливаю this.state. Однако он доступен в render (). Есть идеи, как еще я могу передать topic_id вниз? Я тоже пробовал screenProps, но он вернулся как undefined.