Cli: Error while updating property 'flex' in shadow node of type: RCTVIEW

Created on 15 Feb 2019 · 9Comments · Source: react-native-community/cli

Environment

  "dependencies": {
    "expo": "^31.0.2",
    "firebase": "^5.7.0",
    "native-base": "^2.8.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-elements": "^1.0.0-beta7",
    "react-navigation": "^3.0.8"
  }

Description

I have an error that pops up only on android and not ios, the error is

Error while updating property 'flex' in shadow node of type: RCTVIEW
Value for flex cannot be cast from String to Double

Reproducible Demo

export default class ShipmentSearchScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <View style={styles.searchForm}>
            <Input
              placeholder='Source'
              leftIcon={<Image source={require('../assets/images/icons/departure.png')}
              style={{width:24, height:24}}/>}
              inputContainerStyle={styles.inputStyle}
              placeholderTextColor='#28243c'
              inputStyle={{color: '#28243c',fontSize: 15}}
              blurOnSubmit={false}
              returnKeyType='next'
              onSubmitEditing={() => {this.focusNextField('two')}}
            />
            <Input
              placeholder='Destination'
              leftIcon={<Image source={require('../assets/images/icons/landing.png')} style={{width:24, height:24}}/>}
              inputContainerStyle={styles.inputStyle}
              placeholderTextColor='#28243c'
              inputStyle={{color: '#28243c',fontSize: 15}}
              blurOnSubmit={false}
              ref={input => {this.inputs['two'] = input}}
              returnKeyType='next'
              onSubmitEditing={() => {this.focusNextField('three')}}
            />
            <View style={styles.twoInputRow}>
              <Input
                placeholder='Date'
                leftIcon={<Image source={require('../assets/images/icons/appointment.png')}
                style={{width:24, height:24}}/>}
                inputContainerStyle={styles.halfWidthInput}
                placeholderTextColor='#28243c'
                inputStyle={{color: '#28243c',fontSize: 15}}
                ref={input => {this.inputs['three'] = input}}
                returnKeyType='next'
                onSubmitEditing={() => {this.focusNextField('four')}}
              />
              <Input
                placeholder='Weight'
                leftIcon={<Image source={require('../assets/images/icons/weight.png')} style={{width:24, height:24}}/>}
                inputContainerStyle={styles.halfWidthInput}
                placeholderTextColor='#28243c'
                inputStyle={{color: '#28243c',fontSize: 15}}
                keyboardType='number-pad'
                ref={input => {this.inputs['four'] = input}}
                returnKeyType='done'
              />
            </View>
          </View>
          <View style={styles.searchResultsContainer}>
            <View style={styles.buttonContainer}>
              <Button buttonStyle={styles.inlineButton} title="Search"
                linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                start: [1, 0], end: [0, 0.5]}} onPress={this.stop} loading={this.state.load}
                loadingStyle={{height:40}}/>
            </View>
            <Text style={styles.leftHeaderText}> 399 Trips found </Text>
            <ScrollView contentContainerStyle={styles.searchResults} scrollEnabled={true}>
              <View style={styles.ShipmentResult}>
                <View style={styles.shipmentInformation}>
                  <Image source={require('../assets/images/tshirt.jpg')} style={styles.shipmentImage}/>
                  <View style={{flex: 1, flexDirection: 'column', paddingLeft: 15}}>
                    <View style={{ flexDirection: 'row', paddingTop: 5}}>
                      <Text style={{fontFamily: 'SF-bold', fontSize: 20}}>Hollister Tshirt</Text>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14, marginLeft: 'auto', bottom: 5, backgroundColor: '#d9d9d9', padding:10, color: '#524f5e'}}>200 KG</Text>
                    </View>
                    <View style={{flexDirection: 'row'}}>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>United States</Text>
                      <Icon name='arrow-right' type='evilicon' color='#8e87be'/>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>United States</Text>
                    </View>
                    <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>Before 30 December 2019</Text>
                  </View>
                </View>
                <View style={styles.userInformation}>
                  <Image source={require('../assets/images/karem.jpeg')} style={{width: 40, height: 40, borderRadius: 20}}/>
                  <Text style={{fontFamily: 'SF-bold', alignSelf: 'center', paddingLeft: 5,fontSize: 16}}>Kareem Helal</Text>
                  <Rating style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={4.5}/>
                </View>
                <View style={styles.shipmentActions}>
                  <View style={styles.shipmentReward}>
                    <Image source={require('../assets/images/icons/reward.png')}
                      style={{width:26, height:26}}/>
                    <Text style={{fontFamily: 'SF-bold', alignSelf: 'center', paddingLeft: 5, fontSize: 20, color: 'white'}}>1000$</Text>
                  </View>
                  <View style={styles.shipmentRequest}>
                    <Button buttonStyle={{borderRadius: 0, height:'100%'}} title="SEND REQUEST"
                      linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                      start: [1, 0], end: [0, 0.5]}}/>
                  </View>
                </View>
              </View>
              <View style={styles.ShipmentResult}>
                <View style={styles.shipmentInformation}>
                  <Image source={require('../assets/images/tshirt.jpg')} style={styles.shipmentImage}/>
                  <View style={{flex: 1, flexDirection: 'column', paddingLeft: 15}}>
                    <View style={{ flexDirection: 'row', paddingTop: 5}}>
                      <Text style={{fontFamily: 'SF-bold', fontSize: 20}}>Hollister Tshirt</Text>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14, marginLeft: 'auto', bottom: 5, backgroundColor: '#d9d9d9', padding:10, color: '#524f5e'}}>200 KG</Text>
                    </View>
                    <View style={{ flexDirection: 'row'}}>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>United States</Text>
                      <Icon name='arrow-right' type='evilicon' color='#8e87be'/>
                      <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>United States</Text>
                    </View>
                    <Text style={{fontFamily: 'SF-medium',color:'#b1b1b1', fontSize: 14}}>Before 30 December 2019</Text>
                  </View>
                </View>
                <View style={styles.userInformation}>
                  <Image source={require('../assets/images/karem.jpeg')} style={{width: 40, height: 40, borderRadius: 20}}/>
                  <Text style={{fontFamily: 'SF-bold', alignSelf: 'center', paddingLeft: 5,fontSize: 16}}>Kareem Helal</Text>
                  <Rating style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={4.5}/>
                </View>
                <View style={styles.shipmentActions}>
                  <View style={styles.shipmentReward}>
                    <Image source={require('../assets/images/icons/reward.png')}
                      style={{width:26, height:26}}/>
                    <Text style={{fontFamily: 'SF-bold', alignSelf: 'center', paddingLeft: 5, fontSize: 20, color: 'white'}}>1000$</Text>
                  </View>
                  <View style={styles.shipmentRequest}>
                    <Button buttonStyle={{borderRadius: 0, height:'100%'}} title="SEND REQUEST"
                      linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                      start: [1, 0], end: [0, 0.5]}}/>
                  </View>
                </View>
              </View>
            </ScrollView>
          </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
    justifyContent: 'flex-start',
    flex:1,
    backgroundColor: '#28243c'
    },
  searchForm: {
    flex:0.27,
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop:15
  },
  inputStyle: {
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    padding:2,
    backgroundColor: 'white',
    height:40,
    width:'100%'
  },
  twoInputRow: {
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    width:'50%'
  },
  halfWidthInput: {
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    padding:2,
    backgroundColor: 'white',
    height:40
  },
  searchResultsContainer: {
    flex:0.73,
    backgroundColor: '#332e4c',
    justifyContent:'flex-start',
  },
  buttonContainer: {
    alignItems: 'center',
    width:'100%',
  },
  inlineButton : {
    width:'100%',
     borderRadius:30,
     position: 'relative',
     bottom:20,
     marginBottom: -20
  },
  leftHeaderText: {
    color: 'white',
    textAlign:'left',
    padding: 10
  },
  rightHeaderText: {
    color: 'white',
    textAlign:'right'
  },
  searchResults: {
    flex: 1,
    alignItems: 'center'
  },
  ShipmentResult: {
    width: '95%',
    height: '50%',
    backgroundColor: 'white',
    marginBottom: 15,
  },
  shipmentInformation: {
    flexDirection: 'row',
    flex: 0.5,
    padding: 10
  },
  shipmentImage: {
    width:80,
    height:80,
    resizeMode: 'cover',
    borderWidth: 2,
    borderColor:  '#e3e3e3',
  },
  userInformation: {
    flexDirection: 'row',
    flex:0.25,
    borderTopWidth: 1,
    borderColor: '#e3e3e3',
    paddingLeft: 10,
    paddingTop: 5,
    paddingBottom: 5
  },
  shipmentActions: {
    flexDirection: 'row',
    flex:0.25,
    borderTopWidth: 1,
    borderColor: '#e3e3e3',
  },
  shipmentReward: {
    flex: 0.5,
    flexDirection: 'row',
    backgroundColor: 'rgb(244, 168, 93)',
    paddingTop: 5,
    paddingBottom: 5,
    justifyContent: 'center',
    borderRightWidth: 0.5,
    borderColor: '#e3e3e3',
  },
  shipmentRequest: {
    flex: 0.5,
    justifyContent: 'center',

  },
});

bug

Source

KerimHelal

All 9 comments

I have that error too, which was the solution? Thanks

jjlorenzo on 12 May 2019

👍1

I have the same issue. Any information on the solution? Thanks

JamesFoley1 on 20 May 2019

This is not an error that comes from the cli. Look it up in the react-native core repo or start a new issue with a minimal reproducible example

thymikee on 20 May 2019

Any solution to this issue ?

Gardens18 on 18 Jul 2019

👍1

I have some issues when I run in Android Real Device. iOS wok well.
any solution?

rizaldirnm on 14 Sep 2019

I have the same issue on Android Real Device (OS 8) Sony. The screen loads fine when using debug mode. Other simpler screens work fine as well on real device.

Not sure why this issue is closed because it seems that there are a number of people having it.

waynemcfadden on 9 Oct 2019

If anyone stumbles across this, I had a very similar issue, though my error was:

Error while updating property 'justifyContent' in shadow node of type: RCTVIEW

It was only happening on a few pages, so I removed the justifyContent: 'left' that I had from the component and then it worked for me. So maybe if you're seeing this for flex or a different property, try a different value or removing that style on the relevant screen? I'm not sure, but maybe this will help someone.

drmohundro on 11 Oct 2019

Another developer on my team (running Windows) took over the code and essentially took what I had done copied and pasted it into his branch and it worked. He's on Windows and I'm on Mac.

I'm thinking that I may have messed up the installation process and am going to try reinstalling and pulling in his branch.

Other simpler screens work, I can do hello world etc.

So short answer, is no solution. I'm going to try everything again since it seems like something on my end.

waynemcfadden on 14 Oct 2019

I have the same issue but with alignItems property. Have confirmed and double confirmed all props are valid. Works perfectly on iOS, not on Android. Same behaviour when by different machines/OS/developers.

Really frustrating.