CODEWITHSUNDEEP
javascriptreact-native
Wasteland
Wasteland

Reputation: 5389

React-Native - Create a grid

The following code generates a row of 10 squares with random numbers in them. I'm trying to somehow make it a grid of 10 rows by 10 columns but I'm stuck here. I'd like to limit the columns in a row to 10. So if the var limit is 40, it would create 4 rows by 10 columns. 60 would create 6 rows by 10 columns, etc.

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { Decrease, Increase, GetScore } from '../actions';
import { CardSection, Square } from './common';

class TableGenerator extends Component {
  clickable(sq) {
    this.props.Decrease(sq);
    console.log(this.props.score);
  }

  generateRandom() {
    // Random number generator
    function* rand() {
      while (true) {
        yield Math.floor(Math.random() * 100) + 1;
      }
    }
    const it = rand();
    const nums = [];
    const limit = 10;
    for (let i = 0; i < limit; i++) {
      nums.push(it.next().value);
    }
    return nums.map((sq, i) =>
      <TouchableOpacity
        key={i}
        onPress={() => this.clickable(sq)}
      >
        <Square style={{ height: 30, width: 30 }}>
          {nums[i]}
        </Square>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View>
        <CardSection style={{ justifyContent: 'center' }}>
          {this.generateRandom()}
        </CardSection>
        <CardSection>
          <Text>Current Score: </Text>
          <Text>{this.props.score}</Text>
        </CardSection>
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    score: state.scoreReducer
  };
};

export default connect(mapStateToProps, { Decrease, Increase, GetScore })(TableGenerator);

Upvotes: 0

Views: 1835

Answers (1)

Edmund Lee
Edmund Lee

Reputation: 2574

posting a quick answer for other people who stumble upon this thread.

You can simply use an outer container to limit the width, so that the children squares will be forced into the next row once they fill the entire row.

In outer container render function

<Container style={width: '300px'}>
  // iterate the and render the children squares
</Container>

In square component render function

<Square style={width: '30px', height: '30px', float: 'left', display: 'inline-block'}>
  // content
</Square>

I happened to have something similar in my pet project, you can see it in action here.

Upvotes: 1

Related Questions