Designing a star pattern in React Native

Question

I was trying to draw the star patter in react native where instead of stars, there are suppose to be square boxes.

Star pattern would look like this

****
****
****
****
****

In Vanila JS, it would look like

let rows=5;
 for(let i=1; i <= 5; i++) {
  for(let j=1; j<=5; j++){   
   document.write('*');
  }
  document.write('<br />');
}

But that's vanila JS and I want to make the same in React-native functional component and then display it in JSX

Consider this my functional component in react native

let numberOfBoxesRequired = 4; 
let array = []

const gridBoxes  = (props) => {

    for (let i=0; i<numberOfBoxesRequired; i++) {
        for (let j=0; j<numberOfBoxesRequired; j++) {

        }
    }
    return (
        <View style={mainGridBox}>  

        </View>
    )
}

Question: How can I do it?

Answer 1

It is the same in vanilla JavaScript and React:

const starLines = Array(4).fill('*'.repeat(4));

Once there's data, it can be output in a way that is specific to current application.

In plain JavaScript:

document.write(starLines.join('<br />'));

In React Native:

<View style={mainGridBox}>{starLines.map(line => <Text>{line}</Text>)}</View>

Answer 2

First you need to render your boxes:

let numberOfBoxesRequired = 4; 

const gridBoxes  = (props) => {
    let boxes = [];
    for (let i=0; i<numberOfBoxesRequired; i++) {    
        for (let j=0; j<numberOfBoxesRequired; j++) {
            boxes.push(<Box />); // assume Box is your box component
        }

    }
    return (
        <View style={mainGridBox}>  
            {boxes} // render the boxes
        </View>
    )
}

Then you will have to style your gridBox:

.mainGridBox {
  flex: 1,
  flexWrap: "wrap";
}

.box {
  flexBasis: 0.25; // this will make a box fill 25% of the container width
  width: 30;  // example width
  height: 30; // example height
}

This is the closest to your implementation, but I suggest you use Array.map() like estus pointed out in his answer.