TECH NEWS

Bringing Flexbox Layouts to React Native Skia: Why I Built It

https://hackernoon.imgix.net/images/vq5qj19DT7eVQN9QPKhC47Odchk2-s5b270u.jpeg

Introducing react-native-skia-layout, powered by React Native's layout engine, Yoga.

React Native Skia has become one of my favorite tools for building high-performance graphics and custom interfaces in React Native. It gives developers access to a powerful rendering engine while maintaining a familiar React programming model.

However, after building increasingly complex Skia interfaces, I kept running into the same problem:

The Layout Problem

Positioning a few elements in Skia is straightforward.

<Circle cx={20} cy={20} r={10} color="red" /><Circle cx={80} cy={20} r={10} color="blue" /><Circle cx={140} cy={20} r={10} color="green" />

But things quickly become more complicated when the UI becomes dynamic.

What happens when:

  • Text content changes?
  • Images have unknown dimensions?
  • Screen sizes vary?
  • Components need spacing?
  • Elements need to wrap?
  • Content comes from an API?

Suddenly, every position becomes a calculation.

<Circle cx={20} cy={20} r={10} /><Text x={60} y={20}> Dynamic content</Text><Image x={200} y={20} />

Every new element affects the positioning of every other element.

...

Copyright of this story solely belongs to hackernoon.com. To see the full text click HERE

Read more