React Native: render code in array does not render

Question

My RN 0.62.2 app renders uploaded images on screen in 2 columns with each image in a square. When uploading 2 images, the following render code works fine:

           return (
                
                <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>  //<<==wrap in Grid
                    <Row style={{paddingTop:0}}>  //<<==2 images shown in one row
                        <Col style={{position:"absolute", marginTop:0}}> //<<==2 columns
                            {displayImg(pics[0].path, screen_width*half, screen_width*half, 0,  screen_width, pics[0].height*(screen_width/pics[0].width))}  //<<==method to display one image
                        </Col>
                        <Col style={{position:"absolute", left:Math.ceil((screen_width-20)/2), paddingTop:0}}>
                            {displayImg(pics[1].path, screen_width*half, screen_width*half, 1,  screen_width, pics[1].height*(screen_width/pics[1].width))}
                        </Col>
                    </Row>
                </Grid>
                
            );

The displayImg is the method displaying each individual image. Now I would like to use the same code to process between 2 and 4 images. It seems that it is natural to use array to hold the repeating render code. Here is the code after refactoring:

            var rows = [];
            for (let i=0;i<len;i+2) {  //<<==added for loop to push each row into `rows`
                if (pics[i+1]) {
                    rows.push(
                        <Row style={{paddingTop:0}}>
                            <Col style={{position:"absolute", marginTop:0}}>
                               {displayImg(pics[i].path, screen_width*half, screen_width*half, i,  screen_width, pics[i].height*(screen_width/pics[i].width))}
                            </Col>
                            <Col style={{position:"absolute", left:Math.ceil((screen_width-20)/2), paddingTop:0}}>
                               {displayImg(pics[i+1].path, screen_width*half, screen_width*half, i+1,  screen_width, pics[i+1].height*(screen_width/pics[i+1].width))}
                            </Col>
                        </Row>
                    );    
                } else {
                    rows.push(
                        <Row style={{paddingTop:0}}>
                            <Col style={{position:"absolute", marginTop:0}}>
                            {displayImg(pics[i].path, screen_width*half, screen_width*half, i,  screen_width, pics[i].height*(screen_width/pics[i].width))}
                            </Col>
                            <Col style={{position:"absolute", left:Math.ceil((screen_width-20)/2), paddingTop:0}}>

                            </Col>
                        </Row>
                    );

                };
                
            };
            
            return(
                <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>  //<<==wrap in grid
                    {rows}
                </Grid>
            );

Tested with uploading 2 images, there is nothing returned and the app hung. What's wrong with the refactoring?

Kishan Bharda · Accepted Answer · 2020-07-22 04:58:11Z

1

Your variable rows is array, so you have to map on it to display.

return(
  <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>  //<<==wrap in grid
      {rows.map((item) => (
        item
      ))}
  </Grid>
);

answered Jul 22, 2020 at 4:58

Kishan Bharda

5,7314 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user938363 Over a year ago

the map didn't help with the same problem.

user938363 · Accepted Answer · 2020-07-23 03:37:15Z

0

Solved the problem by doing:

           return (                   
                <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>
                    <Row style={styles.row}>   
                        {pics.map((item, index) => {
                           return (displayImg(item.path, screen_width*half, screen_width*half, index,  screen_width, item.height*(screen_width/item.width)))
                        })}                 
                    </Row>
                </Grid>
            );

answered Jul 23, 2020 at 3:37

user938363

10.3k42 gold badges160 silver badges331 bronze badges

Collectives™ on Stack Overflow

React Native: render code in array does not render

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related