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

Question

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>

the code that you provided runs as expected: snack.expo.io/@notbrent/65913183 — brentvatne
– brentvatne, Commented Jan 27, 2021 at 5:17
How strange, maybe the problem is with the function call? My app works fine without this line: { pwPolicyShown && displayPwPolicy(pwPolicyFlags) } — James Vogenthaler
– James Vogenthaler, Commented Jan 27, 2021 at 5:24

James Vogenthaler · Accepted Answer · 2024-05-29 17:42:53Z

2

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.

edited May 29, 2024 at 17:42

answered Jan 27, 2021 at 7:20

James Vogenthaler

431 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related