Rendering React Native 'Tile' in a single row

Question

I am new at developing React Native application. I want to align multiple(maybe three) React Native Element 'Tile' in a single row, something like 2X3 matrix style. I am trying to use flexbox but is not able to achieve the result. Here's my code:

import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import { Tile } from 'react-native-elements';

export default class Tel extends Component {

  render() {
    return (
      <View style={styles.tileStyle}>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some Caption Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some"
              />
              </View>

              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some Caption Text"
              />
              </View>
              <View style={{width: 20, height: 20,}}>
              <Tile

                featured
                caption="Some"
              />
              </View>
            </View>
    );
  }
}

const styles = StyleSheet.create({
  tileStyle: {
    flex: 1,
    flexDirection: 'row',

    // alignItems: 'center',

    // justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

All I can get three tiles in column wise and no width or height of them. Please help out with the solution.

@AravindS yes something like this. But I tried working with the similar concept for Tiles, and it didn't work. — Jade

howtopythonpls howtopythonpls · Accepted Answer · 2018-07-28T19:43:07

Use flex-wrap. Get width of the window in the constructor and use it in width prop of the Tile to get the proportional width you want.

import {
  View,
  Dimensions,
  StyleSheet
} from "react-native";
import { Tile } from 'react-native-elements';

export class Screen extends Component {
  constructor() {
    super()

    this.state = {
      width: Dimensions.get('window').width
    }
  }

  render() {
  const { width } = this.state;
    return (
      <View style={{
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row',
        backgroundColor: '#ecf0f1'
      }}>
        <Tile
          width={width/3}
          featured
          caption="1"
        />
        <Tile
          width={width/3}
          featured
          caption="2"
        />
        <Tile
          width={width/3}
          featured
          caption="3"
        />
        <Tile
          width={width/3}
          featured  
          caption="4"
        />
      </View>
    );
  }
}

Rendering React Native 'Tile' in a single row

1 Answers