react-native-skeleton-simpler

React Native Skeleton Simpler

React Native Skeleton Simpler, a simple yet fully customizable component made to achieve loading animation in a Skeleton-style. Works in both iOS and Android.

• React Native Skeleton Simpler
  • Installation
  • Usage
  • Props
  • Examples

Installation

npm install react-native-skeleton-simpler

or

yarn add react-native-skeleton-simpler

Usage

• Import react-native-skeleton-content:

import {SkeletonSimpler} from 'react-native-skeleton-simpler';

• Once you create the SkeletonSimpler, you have three options:

• Custom Layout : You provide a prop layout to the component specifying the size of the bones (see the Examples section below). Below is an example with a custom layout.

• Custom Layout : You provide a prop SkeletonComponent recommended for complex layouts.

• Child Layout (in Development): The component will figure out the layout of its bones with the dimensions of its direct children. :construction:

export default function Placeholder() {
  return (
    <SkeletonSimpler
      containerStyle={{ flex: 1, width: 300 }}
      isLoading={true}
      layout={[
        { width: 220, height: 20, marginBottom: 6 },
        {  width: 180, height: 20, marginBottom: 6 }
      ]}
    >
      <Text>Your content</Text>
      <Text>Other content</Text>
    </SkeletonSimpler>
  );
}

• Then simply sync the prop isLoading to your state to show/hide the SkeletonSimpler when the assets/data are available to the user.

export default function Placeholder () {
  const [loading, setLoading] = useState(true);
  return (
    <SkeletonSimpler
       containerStyle={{flex: 1, width: 300}}
        isLoading={isLoading}>
        {...otherProps}
    />
  )
}

Props

Name	Type	Default	Description
isLoading	bool	required	Shows the Skeleton bones when true
layout	array of objects	[]	A custom layout for the Skeleton bones
duration	number	1000 ms	Duration of one cycle of animation
containerStyle	object	flex: 1	The style applied to the View containing the bones
SkeletonComponent	React.JSX.Element	not required	Custom Componente of skeleton, recommended for complex layouts.
theme	string (light or dark)	light	Theme of SkeletonSimpler and SkeletonItem
animatedConfig	object of Animated.TimingAnimationConfig	{toValue: 1, duration: 1000, seNativeDriver: false, delay: 800}	Configs of Animated.timing

Examples

1 - Customizing the layout of the bones (layout prop) :

export default function Placeholder () {
  return (
    <SkeletonContent
        layout={[
        // long line
        { width: 220, height: 20, marginBottom: 6 },
        // short line
        { width: 180, height: 20, marginBottom: 6 },
        ...
        ]}
        isLoading={true}>
        ...
    />
  )
}

2 - Customizing the layout with props SkeletonComponent :

2.1 import SkeletonSimpler and SkeletonItem

import {SkeletonSimpler, SkeletonItem} from 'react-native-skeleton-simpler';

2.2 Create your custom SKeleton component using SkeletonItem

const SkeletonComponent = () => (

      <View style={{ flexDirection: 'row',
                    alignItems: 'center',
                    marginTop: 10,
                    justifyContent: 'space-between',
                }}>
                <View>
                    <SkeletonItem
                        style={[
                            styles.common,
                            {
                                width: 150,
                                height: 15,
                                borderRadius: 10,
                                marginTop: 10,
                            },
                        ]}
                    />
                    <SkeletonItem
                        style={[
                            styles.common,
                            {
                                width: 200,
                                height: 15,
                                borderRadius: 10,
                                marginTop: 10,
                            },
                        ]}
                    />
                </View>
                <View
                    style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                    }}>
                    <SkeletonItem
                        style={[
                            styles.circle,
                            {marginLeft: 10, width: 40, height: 40},
                        ]}
                    />
                </View>
            </View>
) 

2.3 Pass your custom component in SkeletonComponent prop

    
  export const SkeletonSimplerExample = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000);
  }, []);

  return (
    <SkeletonSimpler loading={loading} SkeletonComponent={SkeletonLoader}>
      <View>
        <Text>Your children</Text>
      </View>
    </SkeletonSimpler>
  );
};

You can find this complete example here