Using ContentLoader with flexbox

This issue has been tracked since 2021-10-09.

Hi folks. Love using this tool, but I couldn’t figure out a way to flexbox the elements within ContentLoader.

Let’s say you’re building a skeleton for an instant message. You’d have a static-sized avatar (circle), and you’d want the lines representing the message to fill up the remaining horizontal space and alternate between 100% and 80% like shown here:

33527DD5-10CC-4400-9BE2-32403A74EA5E

It’s very easy to do with flexbox but I couldn’t figure out the right way to build it using this library for React Native. I’d appreciate any help and examples 👍

danilowoz wrote this answer on 2021-11-14

Hey @alwye, thanks for raising this issue.
Unfortunately, there is no way to apply CSS styles into SVG tags, like rect and circle. As this package is pretty much an SVG component, you will not able to flex any of its children elements.

The only way I could figure out to make it work is using dynamic values, like a listener to measure the parent width and then pass this value to the children's width.

Hope it helps you.

More Details About Repo
Owner Name danilowoz
Repo Name create-content-loader
Full Name danilowoz/create-content-loader
Language JavaScript
Created Date 2017-11-15
Updated Date 2022-12-07
Star Count 1131
Watcher Count 11
Fork Count 261
Issue Count 10

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date