# Long text on iPhone

**URL:** <https://forums.fusetools.com/t/long-text-on-iphone/4847>\
**Category:** General\
**Created:** [February 28, 2018, 4:45pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847 "2018-02-28T16:45:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [February 28, 2018, 4:45pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/1 "2018-02-28T16:45:01Z")

</div>

Hello guys,

It was called to my attention an issue with iPhone X where large texts were shown as a black box:

 ![iPhone X Black Box](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/TMrWK781QmGE-image-1519835692224.jpg)

This only happens on iPhone X. I tried to investigate a little further, but I can’t find anything that justifies this behavior, such as character limitations.

So, out of curiosity, I tried to understand what that black box is, when selecting that said black box, the text behind it shown:

 ![iPhone X Black Box Selected](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/qQBrTnCIksSj-image-1519835764578.jpg)

It shows the actual text I was hoping to see instead of the black box.

This is a plain text field:

```auto
<ScrollView>
	<StackPanel>
		...
		 -- Component with StackPanel --
		...
	</StackPanel>	
</ScrollView>

```

The StackPanel component has:

```auto
<Text Value="{description}" TextWrapping="Wrap" Alignment="Left" />

```

This also happens when the field is a TextView:

```auto
<ScrollView>
	<StackPanel>
		...
		<TextView Value="{description}" TextWrapping="Wrap" Margin="0,0,0,0">
		...
	</StackPanel>	
</ScrollView>

```

 ![iPhone X Edit Black Box](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/QcAUJD4ihVMI-image-1519835812995.jpg)  
 ![iPhone X Edit Black Box Selected](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Q88IkJHtaVhz-image-1519835815987.jpg)

Also, as you might notice when I select the text, it kinda have a strange behavior, the Text and the TextView go all over the place.

So, I’ve done the same test on iPhone 6. It doesn’t show me the black box, but the Text and TextView have the same behaviour.

![iPhone 6](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/4ydlcvMoJ4U5-image-1519835974886.png)  
 ![iPhone 6 Selected](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/DD9uodx3Q2hA-image-1519835957960.png)  
 ![iPhone 6 Edit Selected](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/lmh40ak1Vz7J-image-1519836008268.png)

I have some questions about this.

- Does anyone ever noticed the black box in iPhone X when the fields have long text.
- Does anyone know why the Text and Text View has this behavior with long texts?
- Can all of these be fuse related?

I’m using:

- Fuse version 1.7.1 (build 15473)
- iPhone 6 iOS version 11.2.6
- iPhone X iOS version 11.2.5

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 1, 2018, 11:21am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/2 "2018-03-01T11:21:31Z")

</div>

Hi Ana,

this is a known limitation, and one that affects not only iPhone X, but practically all mobile devices. It’s only a question of how much text you need to trigger this issue on a particular device.

Please see [this forum post](https://www.fusetools.com/community/forums/howto_discussions/android_crash_when_long_text_in_text_class?page=1&highlight=94e0b0e1-136d-405f-8515-eb921777fa1f#post-94e0b0e1-136d-405f-8515-eb921777fa1f) for an explanation why that is, and what causes it (hint: it’s not just the text length). There’s of course a workaround, too.

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [March 1, 2018, 6:34pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/3 "2018-03-01T18:34:07Z")

</div>

Hello Uldis,

I saw that post too, but I was expecting that, with that amount of text, if it happens on iPhone X it also would happen on iPhone 6. Actually I tested it, and to see the black box on iPhone 6 the text I need is 4 ou 5 times more than the one I use in iPhone X. Anyway, the workaround doesn’t work for me, because that field has only one Text component, so I have to show the text all as one.

This answers the question about limitations, but what about the text overlaying everything else when selected, even if it’s not an input field? It also happens on Android but just with the input field (TextView), not with the plain text (I believe this is because, in Android you cannot select text and on iOS you can).

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 2, 2018, 6:54am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/4 "2018-03-02T06:54:03Z")

</div>

> I saw that post too, but I was expecting that, with that amount of text, if it happens on iPhone X it also would happen on iPhone 6. Actually I tested it, and to see the black box on iPhone 6 the text I need is 4 ou 5 times more than the one I use in iPhone X.

As it was explained in that forum post I linked, this depends on the device. Apparently, iPhone X implies some stricter limits on memory use than iPhone 6.

> Anyway, the workaround doesn’t work for me, because that field has only one Text component, so I have to show the text all as one.

Of course it could work for you. If you have the text content in JavaScript, you could totally split it into multiple parts, and then stitch it back together in UX by using `Each` inside of a `WrapPanel` or `StackPanel`.

> This answers the question about limitations, but what about the text overlaying everything else when selected, even if it’s not an input field? It also happens on Android but just with the input field (TextView), not with the plain text (I believe this is because, in Android you cannot select text and on iOS you can).

When you “select text” (whatever that means), or when it’s shown in a text editor, what actually happens is that a native text control is shown. Native text controls don’t imply the same limits that components rendered with GL do. The problem is rendering text with GL.

And that ^ made me think. What if you wrap the `Text` in a `NativeViewHost`, does that help?

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [March 8, 2018, 11:06am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/5 "2018-03-08T11:06:29Z")

</div>

> Of course it could work for you. If you have the text content in JavaScript, you could totally split it into multiple parts, and then stitch it back together in UX by using `Each` inside of a `WrapPanel` or `StackPanel`.

The `StackPanel` or the `Wrapanel` might work when I have a read only text, but when I want to edit said text I want to edit it as a whole, not some parts of it.

> When you “select text” (whatever that means), or when it’s shown in a text editor, what actually happens is that a native text control is shown. Native text controls don’t imply the same limits that components rendered with GL do. The problem is rendering text with GL.
> 
> And that ^ made me think. What if you wrap the `Text` in a `NativeViewHost`, does that help?

What I mean with “select text” is when you click on it for editing and the keyboard appears.  
If I wrap the `TextView` in a `NativeViewHost` this happens:

 ![Edit planning Booking](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/2X/6/6863898f7d12686c8bfeb70fdcb2a5bc951c731d.jpeg)

And the text is not even selected for edition.

I’ve also tried to wrap the `ScrollView`also in `NativeViewHost` but:

![bottom](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/2X/1/19fe70cc855779e04842bb41145d3afe31ed5301.png)

 ![file](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/2X/1/1c1574f80564fa859b528ec51e10a5cbf5427bbc.jpeg)

So unfortunately the `NativeViewHost` doesn’t work.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [March 9, 2018, 10:25am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/6 "2018-03-09T10:25:59Z")

</div>

I guess it would be best if you could provide a complete, minimal reproduction that we could test on our end. Perhaps we could even come up with a solution.

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [March 13, 2018, 11:57am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/7 "2018-03-13T11:57:35Z")

</div>

Uldis,

Can you please give me the link to upload the minimal reproduction?

Thanks

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [March 13, 2018, 12:16pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/8 "2018-03-13T12:16:20Z")

</div>

Hey Ana!

Here is the link to upload project - [https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK](https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK)

---

<div class="post-metadata">

**Author:** ![Ana\_Almeida](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ana\_Almeida](https://forums.fusetools.com/u/Ana_Almeida)\
**Post date:** [March 13, 2018, 12:29pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/9 "2018-03-13T12:29:47Z")

</div>

Thanks!

I’ve uploaded “TextTest.zip”.

Basically there are two pages, the main page with a long text and the second page that is an overlay.

- Without using `NativeViewHost` the text overlaps the other components.
- With `NativeViewHost` surrounding the ScrollView, I can’t edit all the text because I can’t see the bottom of it, and when opening the second page it shows me the long text along with the content of this page.
- With `NativeViewHost` in the TextView, it overlaps the other components and when opening the second page it shows me the long text along with the content of this page.

---

<div class="post-metadata">

**Author:** ![iDalhaug](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/idalhaug/32/108_2.png) [@iDalhaug](https://forums.fusetools.com/u/iDalhaug)\
**Post date:** [March 14, 2018, 12:15pm UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/10 "2018-03-14T12:15:28Z")

</div>

Hi, I’m having the same issue as below…

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/ZAUXsBeyFJWV-image-1521029688132.PNG)

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Ez6RhH2RuI8w-image-1521029698236.PNG)

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [March 19, 2018, 8:18am UTC](https://forums.fusetools.com/t/long-text-on-iphone/4847/11 "2018-03-19T08:18:18Z")

</div>

Hey!

I have created issue [ticket](https://github.com/fusetools/fuselibs-public/issues/1115) for long texts.
