[Text] has superfluous lines

[yulodl]

text rendered on iphone 6 plus simulator or real device ,show superfluous lines, seems like text's border

[yulodl]

#947

[ssssssssssss]

This issue could be reproduced in 0.4.2 and 0.8.0-rc, seems no clean way to workaround.

[yulodl]

@a2 @vjeux This is pretty critical for daily use. Do you also experience the same issue?

[brentvatne]

@yulodl @ssssssssssss - can you please provide a sample project on Github with this?

[yulodl]

@brentvatne https://gist.github.com/yulodl/77cdce9a57e050b56fdf
Text with styles.bug will show the artifacts.

[brentvatne]

cc @nicklockwood

[ssssssssssss]

Maybe [Text] suffers the similar issue as [Image] do?

[Image] Resize mode contain produces glitches when dimension is float #1870

[ssssssssssss]

This issue has not been fixed in 0.9.0-RC. Any progress here? Thank you. @brentvatne @nicklockwood

[ssssssssssss]

It's not fixed in 0.10.0-rc yet.

[jawadrehman]

@brentvatne any update ?

[jawadrehman]

@brentvatne @nicklockwood @yulodl apparently it has something to do with font sizes. i had to change the font size by one or two places to get rid of the borders.try fontSize 16 with iphone 6 + and the borders show up. decrement to 15 and they are gone.

hope this helps :)

[vjeux]

Should be fixed by this: f5d68f6

Can you confirm?

[jawadrehman]

@vjeux i just tried it, didnt work .

[vjeux]

@jawadrehman hmm ok :( Need to continue digging then :x

[jawadrehman]

@vjeux p.s i have tried this on 0.8 stable, not the later versions. and thanks for looking into it

[ssssssssssss]

Disable the “launch screen” for the project will cause this issue.

[ssssssssssss]

@vjeux Tried latest 0.11.0-rc, doesn't work.

[brentvatne]

@ssssssssssss - can you post an example project? I cannot reproduce this on 0.11-rc using the gist provided above by @yulodl

[ssssssssssss]

@brentvatne Disable the “launch screen” for the project will cause this issue.

[list000001]

@brentvatne you can init a hello world project,and remove launch screen file,then reproduced.

[jawadrehman]

@vjeux @brentvatne i can confirm that @ssssssssssss is correct. i have the launch screen removed as well. ( i had to do this to start the app with a uiimageview - to get rid of the blank screen and make it consistent with the LaunchImage )

[brentvatne]

Thanks folks - @nicklockwood - any ideas here?

[brentvatne]

I believe this is fixed now, @jawadrehman please ping me if not and I will reopen and try to get some attention to it

[jawadrehman]

@brentvatne yeah its working, had to set the launch screen to make it work.

[jawadrehman]

(y)

[machard]

@brentvatne
rn 0.31.0, without launch screen, the problem is still present

[blockspeiser]

I'm seeing similar artifacts on rn 0.35.0.

They occur only on iPhone plus, on device, but not on the simulator.

They occur on every Text component which ends up rendered with a non-integer width or height. If the inspector shows it as having half pixel value height, the Text has a border on top, half pixel width gives it a border right.

@brentvatne this is a critical bug for us - any information on how to fix or work around?

[kesjien]

Any updates on this ?

[zsajjad]

Any update on this? We are integrated in some other app that is not using launch screen and we have to get it done asap...

[stiang]

I believe @blockspeiser is correct that this is about fractional widths/heights, and I was finally able to figure out why that happens. One clue was that it worked perfectly on my iPhone 6s, but not on my colleagues’ iPhone 7 Pluses.

Our app uses a launch image asset catalog source (actually a different one for every scheme), and it turned out that we had added images just for some of the sizes - notably not for Retina HD 5.5". Also, some of the launch images we had added were the wrong dimensions.

The solution for us was to add properly sized launch images to the asset catalog, for every type of screen resolution.

As to why this happens, I can only speculate that the launch image dimensions are somehow picked up by React Native as it tries to figure out what to translate the unitless dimensions to on a physical device. And if the launch image has dimensions that don’t match the physical screen, you end up with fractional sizes.

If that is the case, and this is even possible to fix, I think a separate issue should be opened. But it would be nice if someone more deeply familiar with RN can confirm first.

(Also, just in case it can help anyone, we had deleted the LaunchScreen.xib file, but I found that setting the Launch Screen File input field to some value anyway, say LaunchScreen would affect the resolution when the launch image was disabled)

[AlanFoster]

Running into this exact issue with 0.43.3 following the same repro steps of deleting the launch screen file.

Note: I don't currently have the cycles to confirm this on the latest 0.46 rc builds

Edit: As mentioned by @stiang I was able to fix this by additionally providing the splash screen image for Retina HD 5.5"

[sfm2222]

I've the same issue any suggested fix?

[estemilia]

https://stackoverflow.com/questions/46191522/how-to-add-iphonex-launch-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa