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.