How to resolve 'this navigator has both navigation and container props' error

Question

When using react-navigator, i am getting error stating

this navigator has both navigation and container props. so it is unclear if it should own its own state. Remove props :'completedOrders,isLoading,hasError,getCompletedOrders'. if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass navigation props

How to resolve this issue.? I want to pass completedOrders to Tabnavigator(AdminCompletedOrdersTab).

Below is my code

const AdminCompletedOrdersTab = TabNavigator({
    completedOrdersTab: { screen: CompletedOrders },
    rejectedOrdersTab: { screen: RejectedOrders },
    cancelledOrdersTab: { screen: CancelledOrders }
});

class CompletedOrdersScreen extends Component {
    static navigationOptions = {
        title: "Completed Orders"
    }

    componentDidMount() {
        this.props.getCompletedOrders(this.props.user);
    }
    render() {
        return(
            <AdminCompletedOrdersTab {...this.props}/>
        )

    }
}

const mapStateToProps = (state) => {
    return ({
        completedOrders: state.completedOrders.completedOrders,
        isLoading: state.completedOrders.isLoading,
        hasError: state.completedOrders.hasError
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        getCompletedOrders: bindActionCreators(getCompletedOrders, dispatch)
    })
}



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

Answer 1

Workaround for anyone who stuck with that: use mergeProps (3rd parameter of react-redux connect) and screenProps to avoid this error.

For example, this code will become:

const AdminCompletedOrdersTab = TabNavigator({
    completedOrdersTab: { screen: CompletedOrders },
    rejectedOrdersTab: { screen: RejectedOrders },
    cancelledOrdersTab: { screen: CancelledOrders }
});

class CompletedOrdersScreen extends Component {
    static navigationOptions = {
        title: "Completed Orders"
    }

    componentDidMount() {
        this.props.screenProps.getCompletedOrders(this.props.user);
    }
    render() {
        return(
            <AdminCompletedOrdersTab 
               {...this.props} 
               {...{/* anything you need from screenProps */}}
            />
        )

    }
}

const mapStateToProps = (state) => {
    return ({
        completedOrders: state.completedOrders.completedOrders,
        isLoading: state.completedOrders.isLoading,
        hasError: state.completedOrders.hasError
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        getCompletedOrders: bindActionCreators(getCompletedOrders, dispatch)
    })
}

const mergeProps = (state, dispatch, ownProps) => {
    return ({
        ...ownProps,
        screenProps: {
          ...ownProps.screenProps,
          ...state,
          ...dispatch,
        }
    })
}


export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(CompletedOrdersScreen);

P.S.: didn't check it with mapDispatchToProps, but think it should also work.