Nativebase: Invariant Violation issue

[tejsfrank]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [x] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

A long time i have been trying to revive an old project, when i started the project ran on react-native version 0.49.5. I am finally able to compile it through native base now, without having it crash, but as soon as the project runs on a device i get the error down below.
I have tried googling it, but theres nothing regarding my error.
I assume the app crashes because of the NaN in fontSize. But unfortunately i have to admit defeat at this point.

Node version 12.8.0
npm version 6.10.3
react-native 0.60.5
native-base (current) 2.12.0, have tried with 2.13.5, same result.

Expected behaviour

App should render first action in mainactivity.

Actual behaviour

Crashes with the following error
`nvariant Violation: [15,"RCTText",11,{"fontSize":"< < NaN > >","fontFamily":"Roboto","color":-1,"backgroundColor":0,"padding":4,"textAlign":"center","accessible":true,"allowFontScaling":true,"ellipsizeMode":"tail"}] is not usable as a native method argument

This error is located at:
in RCTText (at Text.js:159)
in TouchableText (at Text.js:283)
in Text (at Text.js:26)
in Text (at connectStyle.js:392)
in Styled(Text) (at LoginScreen.js:186)
in RCTView (at View.js:35)
in View (at View.js:10)
in ViewNB (at connectStyle.js:392)
in Styled(ViewNB) (at LoginScreen.js:415)
in RCTView (at View.js:35)
in View (at ScrollView.js:1007)
in RCTScrollView (at ScrollView.js:1147)
in ScrollView (at KeyboardAwareHOC.js:508)
in KeyboardAwareScrollView (at Content.js:66)
in Content (at connectStyle.js:392)
in Styled(Content) (at LoginScreen.js:414)
in RCTView (at View.js:35)
in View (at ImageBackground.js:63)
in ImageBackground (at LoginScreen.js:237)
in RCTView (at View.js:35)
in View (at Container.js:12)
in Container (at connectStyle.js:392)
in Styled(Container) (at LoginScreen.js:236)
in LoginComponent (created by Connect(LoginComponent))
in Connect(LoginComponent) (at SceneView.js:17)
in SceneView (at CardStack.js:455)
in RCTView (at View.js:35)
in View (at CardStack.js:454)
in RCTView (at View.js:35)
in View (at CardStack.js:453)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.js:12)
in Card (at PointerEventsContainer.js:39)
in Container (at CardStack.js:498)
in RCTView (at View.js:35)
in View (at CardStack.js:414)
in RCTView (at View.js:35)
in View (at CardStack.js:413)
in CardStack (at CardStackTransitioner.js:67)
in RCTView (at View.js:35)
in View (at Transitioner.js:142)
in Transitioner (at CardStackTransitioner.js:19)
in CardStackTransitioner (at StackNavigator.js:41)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at App.js:61)
in Provider (at App.js:60)
in StyleProvider (at App.js:59)
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 AppContainer (at renderApplication.js:39)`

Steps to reproduce

Ran native-base android-run, the app runs just fine through the compiler. But then proceeds to throw out this error.

Is the bug present in both iOS and Android or in any one of them?

Android only, as we are only developing for android.
And havent tested it on iOS.

Any other additional info which would help us debug the issue quicker.

No additional info, ANY tips regarding this issue will be accepted with open arms. Also this is the first time i have ever created any form of official issue, so if i have made any mistakes at some point, please point them out, and i will do my best to correct myself.
Thank you for reading.

[Srishti-Sharma]

Please provide with reproducible code snippet.

[tejsfrank]

Please provide with reproducible code snippet.

I would love to do that, unfortunately i cant.
How can i provide you with a reproducible code snippet that causes the bug, when i am unclear what causes the bug in the first place.

[Balajipss]

@Srishti-Sharma Please find the links below for reference

https://github.com/GeekyAnts/NativeBase/issues/2649
https://github.com/GeekyAnts/NativeBase/issues/2534
https://github.com/GeekyAnts/NativeBase/issues/2720

[tejsfrank]

UPDATE
I had this piece of code in my login screen :
` const renderError = () => {
if (this.props.error.length > 0) {
return (
style={{
color: '#fff',
backgroundColor: theme.brandDanger,
padding: 4,
textAlign: 'center'
}}
>
{this.props.error}

);
}
return (
style={{
backgroundColor: 'transparent',
padding: 4,
textAlign: 'center'
}}

{' '}
);
};`

And by adding fontsize manually to the textstyle, like so 👍

` const renderError = () => {
if (this.props.error.length > 0) {
return (
style={{
fontSize: 20,
color: '#fff',
backgroundColor: theme.brandDanger,
padding: 4,
textAlign: 'center'
}}
>
{this.props.error}

);
}
return (
style={{
fontSize: 20,
backgroundColor: 'transparent',
padding: 4,
textAlign: 'center'
}}

{' '}
);
};`

I was able to get it to render the app.
Is there any way to fix this, without manually inserting the fontsize into the style?

[keshakishore]

I faced the same problem with cardItem and Header only when I'm using StyleProvider with custom theme (Created using Native Base customiser). Solved it by adding
cardItemPadding: null
platform: Platform.OS or just use the platform variable declared at the top.
in native-base-theme/variables/variables.js file

`export default {
//header fix
platformStyle: 'platform',
platform,
androidRipple: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
btnUppercaseAndroidText: true,

// card fix
cardItemPadding: null,
...
}
`

[IWTBCAdeveloper]

+1

[hanykumar]

Hi @tejsfrank , please update Native-Base v2.13.14 and let us know by providing info of using Native-Base that caused error, if the issues still persists.

[tejsfrank]

Unfortunately i am no longer part of the project i was working on then. So i am unable to give you an update!
Sorry.