Views rendering Views as children

[JohnPaulHarold]

I'm seeing an oddity when rendering something like this

const s = StyleSheet.create({
  container: {
    backgroundColor: 'aliceblue',
    height: 300,
    width: 200,
  },
  child: {
    height: 100,
    width: 100,
  }
})
<View style={s.container}>
  {["bisque", "cadetblue", "darkseagreen"].map((c, i) => (
    <View style={{...s.child, backgroundColor: c}}>
      <Text content={`Child ${i+1}`} />
    </View>
  ))}
</View>

I'd expect to see this, more or less:

instead, it's positioning the parent <View/> after the children. Like this

You can also see similar drawing setting the container to something like, {position: 'absolute', left: 100, top: 100}

I think the issue is around here, https://github.com/raphamorim/react-ape/blob/master/packages/react-ape/renderer/elements/View.js#L52-L56

Also, it seems as though the views are rendered in order of child to parent. With that in mind, I'm not sure how you can render such a list without recomputing the child positions when you finally know the position of the parent. Although, I could be wrong. That happens often.

[JohnPaulHarold]

Small update:

I've got it rendering like so. it shows 1 parent view, and 2 child views. Inside each child view are three more child views. Inside those, text. Will test it some more as it ended up touching the renderer and the View element code.

What isn't happening, is the container <View/> using a height that is the sum of the children. You can see that with the root node which is still using the default size values of a <View/>

[raphamorim]

Hey @JohnPaulHarold , sorry for the late reply. I wasn't working on this project much last year. I have made changes on the View rendering logic lately, could check if it's still valid?

[JohnPaulHarold]

Hello @raphamorim Sorry for the delay. I'm still seeing the same issue. Just in case I've done something silly, I did:

• fresh clone of react-ape with package.json reporting, "version": "0.0.9-alpha.4",
• npm i and the cd to packages/app
• inside App.js I replaced the return of render() with my simple example, and also modified the stylesheet.
• still seeing the same

[raphamorim]

I see, thank you @JohnPaulHarold for the reply. Will try to fix it along with the #124