react-native-fade-loading

1.0.1 verified Sat May 09 auth: no javascript

A minimal placeholder/loading component for React Native that provides a fade animation effect. Version 1.0.1 is the latest stable release. It is a lightweight library (24kB) that offers customizable primary/secondary colors, duration, and visibility. Unlike heavier skeleton libraries, it focuses solely on a simple fade loading animation. It has TypeScript type definitions and requires react and react-native as peer dependencies.

Common errors

error TypeError: Cannot read property 'createAnimatedComponent' of undefined ↓

cause This error occurs if react-native-reanimated is not properly installed or linked, as the library depends on it internally.

fix

Ensure react-native-reanimated is installed and linked: run 'npm install react-native-reanimated' and follow its setup instructions.

error Invariant Violation: View config getter callback for component 'RCTView' must be a function ↓

cause This may happen if the library version mismatch between react-native and the peer dependencies.

fix

Update react-native and react-native-fade-loading to compatible versions, or reinstall node_modules.

Warnings

gotcha The `visible` prop controls whether children are visible; if set to false, the children are hidden but the fade animation still plays. ↓

fix Set `visible` to true to show children, or use conditional rendering instead.

deprecated The `duration` prop default changed from 3000 to 5000 in version 1.0.0. ↓

fix If relying on the previous default, explicitly set `duration={3000}`.

gotcha The `FadeLoading` component has a default `style` prop of `{padding: 5, borderRadius: 4}` which may override parent styles if not careful. ↓

fix Provide an explicit `style` prop to override defaults, or use a wrapper View.

Install

npm install react-native-fade-loading

yarn add react-native-fade-loading

pnpm add react-native-fade-loading

Imports

FadeLoading

wrong

import FadeLoading from 'react-native-fade-loading'

correct

import { FadeLoading } from 'react-native-fade-loading'

The package exports a named export, not a default export. Use curly braces.

FadeLoadingProps

wrong

import { FadeLoadingProps } from 'react-native-fade-loading'

correct

import type { FadeLoadingProps } from 'react-native-fade-loading'

If you need the type for TypeScript, import it as a type only to avoid runtime inclusion.

require('react-native-fade-loading')
wrong
```
const FadeLoading = require('react-native-fade-loading')
```
correct
```
const { FadeLoading } = require('react-native-fade-loading')
```
CommonJS require must destructure the named export, not assign the whole module.

Quickstart

A complete React Native component that uses FadeLoading to wrap children with a fade loading animation.

import React from 'react';
import { View, Text } from 'react-native';
import { FadeLoading } from 'react-native-fade-loading';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <FadeLoading
        primaryColor="gray"
        secondaryColor="lightgray"
        duration={5000}
        visible={true}
        animated={true}
      >
        <Text>Loading...</Text>
      </FadeLoading>
    </View>
  );
};

export default App;