CODEWITHSUNDEEP
react-native
user3489820
user3489820

Reputation: 1519

Grid with floating number of elements ( depending on their size ) in the row

Trying to implement a thingy with no luck. Any help would be highly appreciated.

As much elements as possible should be displayed per row, but only if they fit. Elements might be with different width ( depending on a text ). Everything should be centered.

A picture is worth a thousands words: How to implement?

Tried lots of things nothing worked.. Thanks in advance.

Upvotes: 1

Views: 356

Answers (1)

Sergey
Sergey

Reputation: 7682

These are two useful links in your case https://facebook.github.io/react-native/docs/flexbox.html and https://facebook.github.io/react-native/docs/layout-props.html#flexwrap

That code works for me successfully on iOS

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Hello</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Some app</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>TV&Internet</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Remarkable</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>It works</Text></TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  button: {
    marginBottom: 30,
    width: 'auto',
    marginLeft: 10,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
});

Upvotes: 2

Related Questions