Search code examples
reactjsreact-nativereact-animated

Place component on specific coordinates of a parent component in React Native

I'm trying to create a 'canvas' of some sorts with componenets (people images) spread on various coordinates of the canvas.

Using onLayout I got exact coordinates of the 'canvas' and can calculate from that the desired position for child components.

Is there a way to place children components on those specific coordinates somehow? Maybe important to mention is that the child components are Animated.Views and they are draggable, but that's all good and working. Thanks!

Solution

  • One way of achieving this is setting position property of child components to absolute. Then you can use top, left, right and bottom properties to put children to specific coordinates.

    Also, you need to set position property of the parent component to relative.