react native - Swipable tags component on two lines -


i trying implement that:

enter image description here

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

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -