React Native – How to use place holder?

Create a place holder view

import styled from 'styled-components'

const fills = {
  white: '#FFF',
  normal: '#BBBBBB',
  light: '#DEDEDE',
  dark: '#666666'
}

export const createTextPlaceholder = (StyledComponent, options) => {
  const fill = fills[(options.color || 'normal')] || options.color
  const style = options.style || ''
  const width = options.width ? `width: ${options.width}%;` : ''

  let randomWidth = ''
  if (options.randomWidth) {
    const [from, to] = options.randomWidth

    randomWidth = () => `
      width: ${from + Math.random() * (to - from)}%;
    `
  }

  return styled(StyledComponent)`
    color: ${fill};
    background: ${fill};
    ${style}
    ${width}
    ${randomWidth}
  `
}

Usage

Place holder for a tab bar

...
const TabBarPlaceholder = createViewPlaceholder(FlatButton, {
  randomWidth: [120, 120],
  color: 'light'
})
...
renderPlaceHolder = () => {
    const tabs = ['Place Holder', 'Place Holder', 'Place Holder']
    return <PlaceHolderTabs>
        {tabs.map((tab, index) => {
        return <TabBarPlaceholder key={index} />
        })}
    </PlaceHolderTabs>
}