jottenlips / react-bones

💀 Dead simple content loading components for React and React-Native 💀

react-bones

Dead simple loading components for React and React-Native.

NPM GitHub

💀 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>
  );

Storybook Demo

Homepage

Demo

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

Thanks

Shoutout to everyone that works on react-native-web It is a great library!

react-bones's Issues

Any interest in adding gradient animations?

This can easily be achieved via react-native-linear-gradient and react-native-web-linear-gradient

Website not loading

Could not connect to the homepage or the docs of the repo

Move off lerna

🐉⚰️