React-Native navigation options gives error

Question

In my react-native application, it gives me an error, saying ": In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant" when I try to set this.props.navigation.setParams({});

What is the reason for this error?

 import React, { Component } from "react";
import { View, Text, ScrollView, StyleSheet } from "react-native";

import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import {
  Workout,
  WorkoutDetail,
  KeyValueText,
  DetailText
} from "../../components";
import { getWorkout } from "../../actions";

class WorkoutDetailScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentWorkout: {}
    };
  }

  componentDidMount() {
    const workoutId = this.props.navigation.state.params;
    this.props.getWorkout(workoutId);

    this.props.navigation.setParams({}); // If I remove this line, the error goes. But I want to set params here.
  }

  render() {
    let currentWorkout = this.props.currentWorkout;
    let tools =
      currentWorkout.tools && currentWorkout.tools.length > 0
        ? currentWorkout.tools.join(", ")
        : "Not Required";
    let muscles = currentWorkout.muscles
      ? currentWorkout.muscles.join(", ")
      : "";

    return (
      <ScrollView style={styles.container}>
        <WorkoutDetail
          workout={this.props.currentWorkout}
          workoutImage={currentWorkout.workoutImage}
          onPressWorkout={() => alert("CONTINUE WORKOUT")}
        />

        <View style={styles.workoutInfo}>
          <KeyValueText header="Time" value={currentWorkout.length} />
          <KeyValueText header="Difficulty" value={currentWorkout.difficulty} />
          <KeyValueText header="Tools" value={tools} />
          <KeyValueText header="Muscles" value={muscles} />
        </View>

        <View>
          <DetailText text={currentWorkout.description} />
        </View>
      </ScrollView>
    );
  }

  // navigation options
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
      headerTitle: "TITLE",
      headerTitleStyle: {
        width: "100%",
        alignItems: "center"
      },
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      }
    };
  };
}

// styles
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  workoutInfo: {
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "gray"
  }
});

const mapStateToProps = state => {
  return {
    currentWorkout: state.workouts.currentWorkout
  };
};

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

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

Answer 1

This is probably because you're using an empty object in your setParams call. React navigation then probably uses Object.assign to set your navigation parameters and it hits this error

Try reseting your navigation params by providing an object that represents the initial state and not an empty object.