Available components

There are only three components exposed by the library

• Placeholder
• PlaceholderLine
• PlaceholderMedia

Placeholder

It's the wrapper around all of the other components. Using alone will not produce anything interesting. You have put some line or media inside to make it powerful.

It accepts all the props of a React Native View plus:

• Animation: An optional animation component
• Left: An optional component to display on the left side
• Right: An optional component to display on the right side

PlaceholderLine

A PlaceholderLine is one of the two basic and visual components of a placeholder.

function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine
	style={{backgroundColor: 'green'}}
	/>
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}

PlaceholderMedia

A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following:

function App() {
  return (
    <Placeholder>
      <PlaceholderMedia />
    </Placeholder>
    )
}

But they become really cool components when associated with the Placeholder and the PlaceholderLine ones:

function App() {
  return (
    <Placeholder
      Left={PlaceholderMedia}
      Right={PlaceholderMedia}
    >
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}