Failed Prop Type supplied to View/RCT View when using element inspector

Viewed 95

When using the element inspector, occasionally when I click on certain elements I get this error: screenshot. I am using extended stylesheet, (and redux form, but I don't think the bug is related to redux form, it just exhibits a symptom of it) which I believe may be related to this bug. All the pieces of the form are as follows:

loginform.js (imports styles from loginFormStyles)

<View style={styles.container}>
    <View style={styles.fieldContainer}>
        <Field
            component={TextInputWithValidations}
            type="text"
            inputStyle={styles.fieldText}
            name="username"
            placeholder="Username"
            placeholderTextColor="#d8d8d8"
            autoCapitalize="none"
            containerStyle={styles.item}
        />
        <Field
            component={TextInputWithValidations}
            type="hidden"
            name="password"
            inputStyle={styles.fieldPassword}
            placeholder="Password"
            placeholderTextColor="#d8d8d8"
            autoCapitalize="none"
            containerStyle={styles.item}
        />
</View>

loginFormStyles.js

import EStyleSheet from 'react-native-extended-stylesheet';

export default styles = EStyleSheet.create({
    container: {
    flex: 1,
    },
    fieldContainer: {
        flex: .5,
        flexDirection: 'column',
        width: '90%',
        left: '5%',
    },
    item: {
        marginVertical: '4%',
        justifyContent: 'center',
        alignItems: 'center',
    },
        fieldText: {
        color: '#d8d8d8',
        fontSize: 18,
    },
    fieldPassword: {
        width: '80%',
        color: '#d8d8d8',
        fontSize: 18, 
    },

Maybe I don't understand extended stylesheet, or redux form, but it seems that either A. extended stylesheet is having some issue with supplying the styles and is why I get that issue when inspecting elements B. redux form has two separate attributes, one (or both) of which do not behave to the parent component's style (namely, flexbox): the input field, and the form container field. Misbehaving example

code of example^:

form.js

<View style={styles.createCommentContainer}>
        <View style={styles.newCommentContainer}>
            <Field
            component={TextInputWithValidations}
            type="text"
            inputStyle={styles.fieldText}
            name="comment"
            placeholder="comment"
            placeholderTextColor="#d8d8d8"
            containerStyle={styles.item}
            />
        </View>
            <TouchableOpacity onPress={handleSubmit(submitComment)}>
                <Text> Submit </Text>
            </TouchableOpacity>
    </View>

Style of code in above example: style.js

createCommentContainer: {
        flex: .2,
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row',

    },
    newCommentContainer: {
        alignItems: 'center',
        width: '70%',
        backgroundColor: 'white',
    },
    fieldText: {
        color: '#000',
        fontSize: 18,
        NOTE: FOLLOWING LINE IS COMMENTED OUT TO SHOW YOU HOW IT MISBEHAVES
        SEE IMAGE BELOW CODE BLOCK FOR HOW IT LOOKS WITH WIDTH 99%
        //width: '99%'
    },
    item: {
        justifyContent: 'center',
        alignItems: 'center',
        left: '5%',
    },

What it looks like if width:'99%' is uncommented. What am I doing wrong? I realize this is a multi-part question but I believe that the misbehaving of the redux form is a symptom of a larger problem with stylesheet.

0 Answers
Related