search

hyrwork / react-native-row

A wrapper around the react-native View component enabling concise assignment of flexbox properties
MIT License
51 stars 5 forks source link

[iOS][v41.1] Invalid Layout setting width on View #5

Open ssomnoremac opened 7 years ago

ssomnoremac commented 7 years ago

Invalid layout for (27)<RCTView: 0x7fe4f2446300; reactTag: 27; frame = (0 0; 0 0); layer = <CALayer: 0x60800002f7e0>>. position: {nan, 111.25}. bounds: {{0, 0}, {nan, 222.5}}

For some reason setting the width on two or more View sibling components results in this error. Using the core RN View this isn't the case.

This and this. Real strange. Seems to affect >39.

To reproduce:

     <View flex>
        <Row flex>
          <View style={{backgroundColor: 'powderblue', width:20}}/>
          <View style={{backgroundColor: 'skyblue',  width:20}} />
          <View style={{backgroundColor: 'steelblue', width:20}}/>
        </Row>
        <View style={{backgroundColor: 'skyblue'}} flex/>
        <View style={{backgroundColor: 'steelblue'}} flex/>
      </View>
zeh commented 7 years ago

Also getting this a lot. Apparently when component views get recycled and have to be redrawn. In my case it's happening on what I'm assuming is the y/height properties (in your case it's x/width).

ssomnoremac commented 7 years ago

@zeh, are you getting this on both the simulator and device or have you checked that? My device is Android :(

zeh commented 7 years ago

@ssomnoremac iOS Simulator only (haven't tested anywhere else).

I have this on pure RN though. It seems to be a lower level issue.

ssomnoremac commented 7 years ago

@zeh that's interesting, because in my case if I use RN View it's fine, but Row throws the error. In any case, I fixed it using undefined instead of null as the flex ternary default. Does it make sense to swap out all the nulls? It seems this is just a flex issue though. I'll try to get a PR out tomorrow. Let me know if you can confirm it fixes your case.

ssomnoremac commented 7 years ago

So I'm just removing flex from this library because it works natively as a layout prop. Who'd a thought? That realization #6 there. As for this #7