github-starred/proton-native

Fork 0

mirror of https://github.com/kusti8/proton-native.git synced 2026-05-15 14:15:50 -06:00

[GH-ISSUE #68] Newline in Text #38

New issue

Closed

opened 2026-05-05 11:30:43 -06:00 by gitea-mirror · 7 comments

gitea-mirror commented

2026-05-05 11:30:43 -06:00

Owner

Originally created by @mischnic on GitHub (Mar 23, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/68

libui correctly displays literal newline characters (\n) in labels.
This works:

<Text stretchy={false}>{"AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu \n AutoUpdate finden sie in der Hilfe."}</Text>

This doesn't:

<Text stretchy={false}>AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu {'\n'} AutoUpdate finden sie in der Hilfe.</Text>

Results in some extra commas and an error message: text , <line break>, text

$ npx babel-node app.js
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Text`, expected `string`.
$

So the children array needs to be properly joined when rendering.

Originally created by @mischnic on GitHub (Mar 23, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/68 libui correctly displays literal newline characters (`\n`) in labels. This works: ```jsx <Text stretchy={false}>{"AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu \n AutoUpdate finden sie in der Hilfe."}</Text> ``` This doesn't: ```jsx <Text stretchy={false}>AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu {'\n'} AutoUpdate finden sie in der Hilfe.</Text> ``` Results in some extra commas and an error message: `text , <line break>, text` ``` $ npx babel-node app.js Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Text`, expected `string`. $ ``` ![bildschirmfoto 2018-03-23 um 16 34 32](https://user-images.githubusercontent.com/4586894/37838443-29389376-2eb8-11e8-8905-ccc85b834401.png) So the children array needs to be properly joined when rendering.

gitea-mirror closed this issue

2026-05-05 11:30:45 -06:00

gitea-mirror commented

2026-05-05 11:30:50 -06:00

Author

Owner

@baoanhng commented on GitHub (Mar 27, 2018):

@mischnic You have to do it React way like this

<Text>{`
Line 1
Line 2
`}</Text>

@baoanhng commented on GitHub (Mar 27, 2018): @mischnic You have to do it React way like this ``` <Text>{` Line 1 Line 2 `}</Text> ```

gitea-mirror commented

2026-05-05 11:30:53 -06:00

Author

Owner

@mischnic commented on GitHub (Mar 27, 2018):

Yes, that works (see the first code snippet above).

First result for "react native newline":

<Text>
Hi~{"\n"}
this is a test message.
</Text>

In normal React, it would be <br/>.

@mischnic commented on GitHub (Mar 27, 2018): Yes, that works (see the first code snippet above). First result for "react native newline": ```jsx <Text> Hi~{"\n"} this is a test message. </Text> ``` In normal React, it would be `<br/>`.

gitea-mirror commented

2026-05-05 11:30:56 -06:00

Author

Owner

@kusti8 commented on GitHub (Mar 30, 2018):

I don't think I'm going to fix this. It's better in my opinion to do it as a simple multiline string, rather than that way.

@kusti8 commented on GitHub (Mar 30, 2018): I don't think I'm going to fix this. It's better in my opinion to do it as a simple multiline string, rather than that way.

gitea-mirror commented

2026-05-05 11:30:58 -06:00

Author

Owner

@parro-it commented on GitHub (Mar 30, 2018):

I don't think I'm going to fix this. It's better in my opinion to do it as a simple multiline string, rather than that way.

How do you plan to manage non-hard lines break and indentation?

@parro-it commented on GitHub (Mar 30, 2018): > I don't think I'm going to fix this. It's better in my opinion to do it as a simple multiline string, rather than that way. How do you plan to manage non-hard lines break and indentation?

gitea-mirror commented

2026-05-05 11:31:01 -06:00

Author

Owner

@kusti8 commented on GitHub (Mar 30, 2018):

In libui-node there isn't a way to wrap text right? And as for indenting the \t works fine.

<Text>{"123\t456"}</Text>

@kusti8 commented on GitHub (Mar 30, 2018): In libui-node there isn't a way to wrap text right? And as for indenting the \t works fine. ```jsx <Text>{"123\t456"}</Text> ```

gitea-mirror commented

2026-05-05 11:31:03 -06:00

Author

Owner

@parro-it commented on GitHub (Mar 30, 2018):

In libui-node there isn't a way to wrap text right?

Not at the moment, but there is an uiNewMultilineEntryfunction that should return a wrappable multine text entry (I'm currently using uiNewNonWrappingMultilineEntry).

I'll add binding for that.

@parro-it commented on GitHub (Mar 30, 2018): > In libui-node there isn't a way to wrap text right? Not at the moment, but there is an `uiNewMultilineEntry`function that should return a wrappable multine text entry (I'm currently using `uiNewNonWrappingMultilineEntry`). I'll add binding for that.

gitea-mirror commented

2026-05-05 11:31:08 -06:00

Author

Owner

@parro-it commented on GitHub (Apr 11, 2018):

see https://github.com/parro-it/libui-node/issues/85

@parro-it commented on GitHub (Apr 11, 2018): see https://github.com/parro-it/libui-node/issues/85

gitea-mirror referenced this issue

2026-05-05 11:56:30 -06:00

[PR #38] [MERGED] Refactor components props #235