React Navigation losing props that are passed down

Question

I have a container connected to redux which inherits the 'global state' as props thanks to the connect(mapStateToProps, mapDispatchToProps) line...

The container (Container.js) in turn passes down the props to the Table (Table.js), which receives them fine as expected.

My issue occurs when I try to make the Table a Navigation stack. Reason being I want to be able to click on each row which would navigate to the DetailPage which would be populated by the different props dependant on rows.

However when adding StackNavigator all my props passed down from the Container are gone and only the React Navigation ones are there (navigation: {actions:{goBack... ETC}}).

Note: This also happens if I connect the Component directly.

Below is a dummied down example of my code structure.

What am I doing wrong/How do I maintain the props passed down?

Container.js

class Container extends Component {
  render() {
    return (
      <View>
        <Table {...this.props} />
      </View>
    )
  }
}


const mapStateToProps = state => {
  return {
    data: state.data,
    propTwo: state.propTwo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    functionOne: () => dispatch(functionOne()),
    functionTwo: arg => dispatch(functionTwo(arg))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Market);

Table.js

const DetailPage = () => <View><Text>Just a mock page</Text></View>

class Table extends Component {
  keyExtractor = (item, index) => index;
  renderItem = (argOne, index) => {
    return (
      <ListItem
        onPress={() => this.props.navigate(argOne)}
        key={index} />
    )
  }
  render() {
    return (
      <View>
        <FlatList
          keyExtractor={this.keyExtractor}
          data={this.props.data}
          renderItem={this.renderItem}
          refreshControl={
            <RefreshControl
              onRefresh={this.props.functionTwo}
            />
          }
        />
      </View>
    ) 
  }
}
// react-navigation StackNavigator
export default Table = StackNavigator({
  Table: { screen: Table },
  DetailPage: { screen: DetailPage }
});

Answer 1

You can move the StackNavigator into Container.js:

export default StackNavigator({
  Table: { screen: connect(mapStateToProps, mapDispatchToProps)(Container) },
  DetailPage: { screen: DetailPage }
});

Also you can connect to Table directly instead of creating a Container wrapper class:

connect(mapStateToProps, mapDispatchToProps)(Table)