How can I detect view overflow in a React Native app?

Question

I am wanting to implement a custom text wrap strategy for my application running 0.59.9. There are portions of the app where time ranges are used (ex. '9/12/2019 8:00 AM - 10:00 AM EST') and especially on smaller devices or users with larger font scaling none of the baked in textWrap / numberOfLines options can handle quite what I want.

I would like it to break at a specified location, specifically the '-' in the timestamp. Is there a way to do this? Maybe a listener exists for isViewOverflowed that a developer can hook into?

johnborges · Accepted Answer · 2019-09-12 20:51:55Z

1

One solution could be to break apart the string into two parts and just have a Text container which flows inline if there's enough space. Otherwise it will overflow.

<Text>
  <Text>9/12/2019 8:00 AM</Text>
  <Text>10:00 AM EST</Text>
</Text>

answered Sep 12, 2019 at 20:51

johnborges

2,56321 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I detect view overflow in a React Native app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related