Invariant Violation: Text strings must be rendered within a component

Question

I\'ve upgraded from RN 0.54 to 0.57 and my app has pretty much fallen over due to using React Native Elements.

I took use of their error functionality on TextI

Answer 1

In my case some part of the code was out side the text component for example:
<RadioForm style={styles.radiobutton} 
                      radio_props={hobbies}
                      initial={1}
                      onPress={(value) => {ToastAndroid.show(value.toString(), ToastAndroid.SHORT)}}
                      buttonSize={4.5}
                      buttonOuterSize={19}
                      selectedButtonColor={'green'}
                      selectedLabelColor={'green'}
                      labelStyle={{ fontSize: 14, }}
                      disabled={false}
                      formHorizontal={true}
             />
<RadioForm

this above line < RadioForm is left unclosed that is the reason

Answer 2

I had the same issue and the mistake was adding space between the children and the component such as {children}

Note: Remove any space close to {children}

 <Provider value={something}>{children}</BlogContext.Provider>

Answer 3

This error occurs when you have /*Commented code*/ in your return() function.

Spent a good chunk of the day doing completely unrelated tasks to try and fix this one.

Answer 4

There is an operator !! which converts a string type to boolean and makes it false when variable is an empty string:

{!!error &&
  <Text>
    Error message: {error}
</Text>}

Answer 5

I encountered the same error message in VSCode yet I didn't have /* Comments */ or any expressions. The solution was to remove the formatting in something like textedit or word and copy+paste the code back to vscode.

I do not know why or how it works (perhaps it specifically happens in VSCode), but the formatting issue is something I also have experienced with SDL in graphql...

Answer 6

Also occurs when you have /* Comments */ in your return() function.