react native - Swipable tags component on two lines -
i trying implement that:
where user can swipe right , @ time rest of tags should continue on second line no more 2 lines. make component swipable tags goes on 1 line no matter how many of them have. here code:
render() { return ( <scrollview horizontal='true' style={styles.containerstyle} contentcontainerstyle={styles.list} > <tag /> <tag /> <tag /> <tag /> <tag /> </scrollview > ); } const styles = { containerstyle: { minheight: 40, marginleft: 8, marginright: 8, maxheight: 100, }, list: { flexdirection: 'row', flexwrap: 'wrap' } };
you can push tags
array
.that array should grouped.yo can use review following code.
render() { return ( <scrollview horizontal='true' style={styles.containerstyle} contentcontainerstyle={styles.list}> {this._rendertaggroups()} </scrollview>); } _rendertaggroups(){ let tags=["marketing","reports","sales","servers","today", "urgent","website"]; tags=this._chunk(tags, 5); return tags.map((item,index)=>{ return (<tag key={index}>{item}</tag>); }); } function chunk(arr, start, amount){ var result = [], i, start = start || 0, amount = amount || 500, len = arr.length; { //console.log('appending ', start, '-', start + amount, 'of ', len, '.'); result.push(arr.slice(start, start+amount)); start += amount; } while (start< len); return result; };
Comments
Post a Comment