react native - ListView RenderSectionHeader Will not properly render with a json get or less than 9 -

i new react-native , building small app. have run odd problem. if json length, greater 9 section header not work properly. doing show , hide. have floating button, when pressed hides , in it's place shows input box. when exceed length of 9 section header, not force rendering. manipulate data, feel cheat myself out of learning experience. hopefully, have explained myself clearly.

my json data looks this:

[{     "id": "0",     "service": "haircut" }, {     "id": "1",     "service": "brian" }, {     "id": "2",     "service": "cut&shave" }, {     "id": "3",     "service": "beard trim" }, {     "id": "4",     "service": "senior citizen haircut" }, {     "id": "5",     "service": "crew cut" }, {     "id": "6",     "service": "fade" }, {     "id": "7",     "service": "line up" }, {     "id": "8",     "service": "kids cut" }, {     "id": "9",     "service": "long hair cut" }] 

i setup constructor this:

constructor(props) {     super(props);      this.state = {       damping: 1 - 0.6,       tension: 400,       datablob: [],     datasource: new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2}),      showinput:false     };    } 

my api call here:

componentdidmount() {      fetch('http://54.152.253.14/barbershop/appointmenthelper.php')     .then((response) => response.json())     .then((responsedata) => {       this.state.datablob = this.state.datablob.concat(responsedata);       console.log(responsedata);       this.setstate({           datasource:this.state.datasource.clonewithrows(this.state.datablob),           isloading: false,         });     })     .done();   }    rendersectionheader is:    rendersectionheader(){     console.log('render section called');   if(this.state.showinput){     return (       <view style={styles.section}>        <header headertext='wills barbershop'/>        <input onsubmitediting={(event)=>this.editservices(event)}       placeholder={'enter new service'}         />       </view>       )     }     return (       <view style={styles.section}>        <header headertext='wills barbershop'/>       <floatingbutton onpress={() => this.showinput()}>       </floatingbutton>       </view>     )    } 

here set state , except new rendering:

  showinput(){  console.log('show input');   this.setstate({     showinput:!this.state.showinput,   }) } 

my listview here:

renderlist = (dataobj,sectionid,rowid) => {      return (       <view style={styles.container}>         <row damping={this.state.damping} tension={this.state.tension} onpress={()=>this.deleteitem(rowid)}>           <view style={styles.rowcontent}>             <view style={styles.rowicon} />             <view>               <text style={styles.rowtitle}>{dataobj.service}</text>               <text style={styles.rowsubtitle}>drag row left , right</text>             </view>           </view>         </row>          </view>     );   };    render() {     return (            <listview            rendersectionheader={() => this.rendersectionheader()}             key={this.state.datablob}             datasource={this.state.datasource}             renderrow={(data, sectionid, rowid) => this.renderlist(data, sectionid, rowid)}             style={styles.listview}             renderseparator={(sectionid, rowid) => <view key={rowid} style={styles.separator} />}             />            );   } } 

any appreciated.

i think reason you're running issue here because you're not using rendersectionheader correctly. data isn't broken sections, it's single large piece of data (which totally fine). think better off adjusting render logic typical render logic can run in react native (rather checking inside of listview).

doing leave following - may have make appropriate style changes concept same.

render() {   return (     <view>       {this.rendersectionheader()}       <listview         key={this.state.datablob}         datasource={this.state.datasource}         renderrow={(data, sectionid, rowid) => this.renderlist(data, sectionid, rowid)}         style={styles.listview}         renderseparator={(sectionid, rowid) => <view key={rowid} style={styles.separator} />}       />     </view>   ); } 

hope works you!