the more cannot show, when the text is from state

[shidaying]

// the more cannot show and onReady function is not execute; , this.state.introduction data is from a fetch , I don't know how to fix it,

<ReadMore numberOfLines={2} renderTruncatedFooter={this._renderTruncatedFooter} renderRevealedFooter={this._renderRevealedFooter} onReady={this._handleTextReady}> <Text style={styles.introduce}> // the more cannot show and onReady function is not execute; , this.state.introduction data is from a fetch , I don't know how to fix it, {this.state.introduction} {/*{'wodasdkasdkasbdjabswoaoda我爱的那首搭上打瞌睡大街上大巴见死不救博大精深不对劲啊是djabsdjabsjdbasjdbasjbdjasbjshshhshshshshshhshshhshshshshshsh'}*/} // the more can show </Text> </ReadMore>

[eriveltonelias]

Hi @shilihuan
let me know if you still have some problems with that.

[HarshitMadhav]

Hi @eriveltonelias I faced this same issue today after receiving a string from a fetch I put it in a state and then I passed the state in the readmore component like this

      <ReadMore
             numberOfLines={5}
             renderTruncatedFooter={this._renderTruncatedFooter}
             renderRevealedFooter={this._renderRevealedFooter}
             >
             <Text style={{fontSize:12.5,fontFamily:'Nunito-Regular',color:'#ACAAAA',marginTop:hp(1), width:wp(80), textAlign:'center', marginBottom:hp(1.5)}}>
             {this.state.bio}
           </Text>
           </ReadMore>

It is not displaying read more and read less while I have correctly binded the methods for these in constructor while read more is displaying only when I am passing a hardcoded string like Lorem Ipsum

[eriveltonelias]

Hey @HarshitMadhav

Can you provide a runnable repro on https://snack.expo.io/ ?

[HarshitMadhav]

@eriveltonelias

    getData = () => {
      const url = "some_url";
      fetch(url, {
       method: "POST",
       headers: {
      "Content-Type": "application/json"
       },
       body: JSON.stringify({
         params: "one"
      })
     })
       .then(response => response.json())
      .then(responseJson => {
        this.hideLoading();
      if (responseJson.status == true) {
        this.setState({bio : responseJson.detail.bio})
        GLOBAL.expbio = responseJson.detail.bio;
      } else {
      }
      })
       .catch(error => {
       this.hideLoading();
       console.error(error);
      });
    };

then in render

<ReadMore
             numberOfLines={5}
             renderTruncatedFooter={this._renderTruncatedFooter}
             renderRevealedFooter={this._renderRevealedFooter}
             >
             <Text style={{fontSize:12.5,fontFamily:'Nunito-Regular',color:'#ACAAAA',marginTop:hp(1), 
         width:wp(80), textAlign:'center', marginBottom:hp(1.5)}}>
             {GLOBAL.expbio} **//or this.state.bio both results in read more not showing as the api is 
          called in componentDidMount**
           </Text>
           </ReadMore>

[eriveltonelias]

thanks for providing the repro! I'll investigate.

[HarshitMadhav]

@eriveltonelias Actually the problem is with the first render of component. The first render of read more text component does not show read more text.

[juancsaenz]

Any solution for that? I'm facing the same problem, when I receive the text from state the show more button is not displaying but if I put hardcoded text it works normally.

[wincjh]

+1

[taschik]

Hi,

Is there something we can provide that helps fixing this? I ran into the same issue and would love to help fixing the problem. Thanks for looking into this!

[SohailYaseenBhutto]

Hello,

Actually the problem is that, the component does not re-render itself when text updated. So i have fixed this by creating a method and called it when i have to update text. Like in shouldComponentUpdate of parent. or in callback of any request etc.

updateComponent = async () => {
this.setState({ measured: false, showAllText: false }, async () => {
await nextFrameAsync();
const fullHeight = await measureHeightAsync(this._text);
console.log("fullHeight", fullHeight);
this.setState({ measured: true }, async () => {
await nextFrameAsync();
const limitedHeight = await measureHeightAsync(this._text);
console.log("limitedHeight", limitedHeight);
if (fullHeight > limitedHeight) {
this.setState({ shouldShowReadMore: true }, () => {
this.props.onReady && this.props.onReady();
});
} else {
this.setState({ shouldShowReadMore: false }, () => {
this.props.onReady && this.props.onReady();
});
}
});
});
};

Actually i resets the state first and recalculated the values as in componentDidMount().

[eriveltonelias]

thanks guys! I'll send a fix this weekend.

[HarshitMadhav]

ALL I did was I did a extra setState() to re render.

[HarshitMadhav]

@eriveltonelias Thank you for considering this issue.