Squares with different background colors
The output of generateMaze always will be the same each time, except for one thing, which is the backgroundColor property value of the Square component.
In this case, you don't need a function/method, which output is a maze component; you can create a method to handle the maze colors, dependent on the given parameter, e.g.:
class MainMaze extends Component {
  handleMazeColor(mazeID) {
    if (mazeID === 2) return &quot;blue&quot;;
    else if (mazeID === 3) return &quot;red&quot;;

    return &quot;green&quot;;
  }

  render() {
    const { tiles } = this.props.grid;
    const { grid, position, status } = this.props;

    return (
      &lt;View&gt;
        &lt;CardSection&gt;
          &lt;Text&gt;{grid.cols}&lt;/Text&gt;
        &lt;/CardSection&gt;
        &lt;CardSection&gt;
          {tiles.map((sq, i) =&gt; (
            &lt;Square
              key={i}
              style={{ backgroundColor: this.handleMazeColor(sq) }}
            &gt;
              {sq}
            &lt;/Square&gt;
          ))}
        &lt;/CardSection&gt;
      &lt;/View&gt;
    );
  }
}