Rendering React Native 'Tile' in a single row - react-native

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.

Answer 1

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>
);
}
}