javascriptruntime-errorexporeact-native

(React Native) Component Exception - Text Strings must be rendered within a <Text> component


I'm developing an app in React Native, and I have a bit of code that works on web and iOS, but not for android. I keep getting the error stated in the title and I'm not sure why... Basically the function takes an array of booleans, and returns a graphical representation of what those flags represent(A password policy). False flags return red text and true flags return green text. The app compiles and doesn't crash until the function is run. Please advise.

function displayPwPolicy(flags) {
    var policies = [
        "Be 8~256 characters long",
        "Have uppercase character(s)",
        "Have lowercase character(s)",
        "Have numerical character(s)",
        "Have special character(s)",
        "Have no invalid characters"
    ]
    
    return (
        <View>
            <Text style={styles.homePwPolicy}>*Your password must:</Text>
            {
                policies.map( (policy, i) => 
                    <Text key={'policy00' + i} style={{ color: flags[i] ? 'green' : 'red' }}>
                        {(flags[i] ? '✔':'✘') + '\t ' + policy}
                    </Text>
                )
            }
        </View>
    )
}

Call Stack: https://photos.app.goo.gl/1G2JKUiYJqsLVHoz5

Edit 1: This is the function call. The app works fine if the line is removed

<TextInput
    style        = {styles.homeInput}
    value        = {userLast}
    placeholder  = 'Last Name'
    onChangeText = {last => setUserLast(last)}
/>

{ pwPolicyShown && displayPwPolicy(pwPolicyFlags) }

<TouchableOpacity style={styles.homeButtons}>
    <Text style={styles.homeButtonText}>
        CREATE ACCOUNT
    </Text>
</TouchableOpacity>

Solution

  • Fixed the issue thanks to another post by dulmandakh on github. The issue was with the conditional rendering with the function call. Some platforms will apparently try to render the variable being evaluated if not paired with an comparison operator.

    Had to change pwPolicyShown to pwPolicyShown == true.