search

rafaelmotta / react-native-tag-select

🏷 A simple tag component to act as radio button / checkbox
156 stars 43 forks source link

How to center align tags in a ScrollView? #10

Closed xke closed 6 years ago

xke commented 6 years ago

Cool library! I'm making use of it to display a bunch of tags in a ScrollView.

By default, these 100+ tags are left aligned, and don't go past the right edge of the screen. However, the design looks a LOT better if the tags can be center aligned (while still wrapping to new rows).

I tried some ways of making this happened, but have not found a solution.

What solution do you suggest? I think it would be great to add this to the sample because other people probably also need this design.

xke commented 6 years ago

Ok, I figured this out after various experimentation. :)

I had to add a containerStyle with justifyContent: 'center'.

Here's the code in context:

<TagSelect data={arrayOfKeywords} ref={(tag) => { this.tagString = tag; }} containerStyle={{ justifyContent: 'center'}} itemStyle={styles.keywordButton} itemStyleSelected={styles.keywordButtonSelected} itemLabelStyle={styles.keywordButtonLabel} itemLabelStyleSelected={styles.keywordButtonLabelSelected} />