react-bones

Dead simple loading components for React and React-Native.

? npm i react-bones

React

import { Bones } from "react-bones/lib";

React-Native

import { Bones } from "react-bones/native";

const Post = (props) =>
  props.loading ? (
    <View>
      <Bones />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
    </View>
  ) : (
    <View>
      <Image style={{ width: 50, height: 50 }} source={{ uri: props.image }} />
      <Text>{props.text}</Text>
    </View>
  );

Example

Clone the repo and run yarn run web for a CRA example.

A fully linked React-Native example is coming soon.

For now, cd packages/bones_react_native_app

yarn
yarn run ios

GitHub