Error when using fbt() React Native components' properties

[dalmendray]

🐛 Bug Report

After adding fbt to my react native app I'm getting an exception when trying to use fbt() in RN component's properties.

To Reproduce

The following triggers an exception:
<TextInput
placeholder={fbt('test', 'test')}
/>

Expected behavior

The placeholder value should be set to "test".

Link to repo (highly encouraged) or paste

Exception:

Invariant Violation: [97,Android Text input",71, "placeholder":"text"allowFontScaling":true" underlineColorAndroid":0,"autoCapitalize": 16384 most Recent EventCount": 0;on Selection Change":true,"text":","onScroll":true}] is not usable as a native method argument This error is located at: in Android Textinput (at Textinput.js:1197) in Touchable Without Feedback (at Text Input.js: 1215) in Text Input (at App.js:71) in RCTView (at View.js:35) in View (at App.js:66) in RCTView (at View.js:35) in View (at App.js:44) in RCTView (at View.js:35) in View (at ScrollView.js:1007) in RCTScrollView (at ScrollView.js:1147) in ScrollView (at App.js:35) in RCTView (at View.js:35) in View (at SafeAreaView.js:40) in SafeAreaView (at App.js:34) in App (at renderApplication.js:40) in RCTView (at View.js:35) in View (at AppContainer.js:98) in RCTView (at View.js:35) in View (at AppContainer.js:115) in App Container (at renderApplication.js:39)
fn
NativeModules.js:133:10
renderRoot
[native code]
run Route Callback
[native code]
renderApplication
renderApplication.js:67:52
run
AppRegistry.js:114:10
runApplication
AppRegistry.js:213:26
callFunctionReturnFlushedQueue
[native code]

envinfo

react-native-cli: 2.0.1
react-native: 0.59.3
fbt: 0.10.0
fbt-rn-android-native: 0.0.2
babel-plugin-fbt-runtime: 0.9.9
babel-plugin-fbt: 0.9.16

[compojoom]

Can you try to cast this to string?

[kayhadrin]

Casting to string is the current workaround.

Having said that, this doesn't remove the problem that may contain nested RN elements that cannot be serialized to a string properly.

See this explanation:

https://github.com/facebookincubator/fbt/blob/ac547cba0f14ba878b1706526ff007d22cdceb85/flow-types/libdef/fbt.js#L103-L125

For a RN element that requires a plain text attribute, developers should use the fbs() / API (FbtPureStringResult) - which isn't yet documented.
fbs() would return an FbtPureStringResult object that will only contain plain text, and then we can run toString() on it safely.

But the real solution would be to convince the React Native team to update their API so that low-level components that need a text attribute could accept an object with a dedicated method.

E.g. string | { toLocalizedText: () => string }

Basically, if RN components accepted an object that had a toLocalizedText() method, then we'd be sure it's meant to be used as such rather than the general/vague scenario implied by toString().

[retyui]

I usually use toString:

<TextInput
  placeholder={fbt('test', 'test').toString()}
/>