Display some placeholder stuff before rendering your text or media content in React Native.
Fully compatible with Expo and react-native-web.
Content
This is the content of the v2. If you're still using a version < 2, you should use this documentation instead.
Usage
Installation
$ yarn add rn-placeholderIn your code
This is a new API coming from v2. However, the v1 APIs are still available in components available
import Placeholder, { Line, Media } from "rn-placeholder"; const ComponentLoaded = () => <Text>I'm loaded!</Text>; const MyComponent = () => { const [isReady, setReady] = useState(false); // your logic return ( <Placeholder isReady={isReady} animation="fade" whenReadyRender={() => <ComponentLoaded />} renderLeft={() => <Media hasRadius />} renderRight={() => <Media />} > <Line width="70%" /> <Line /> <Line /> <Line width="30%" /> </Placeholder> ); };When the value of isReady changes to something truthy, the ComponentLoaded will be rendered.
