Registry / react-native-fade-loading

react-native-fade-loading

library1.0.1jsnpmunverified

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.

npm install react-native-fade-loading

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-FADE-

react-native-fade-loading

javascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FadeLoading

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

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

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

FadeLoadingProps

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

✗ import { 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')

✓ const { FadeLoading } = require('react-native-fade-loading')

✗ const FadeLoading = require('react-native-fade-loading')

CommonJS require must destructure the named export, not assign the whole module.

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;

Debug

Known issues

gotchaThe `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.

affects: >=0.1.0

deprecatedThe `duration` prop default changed from 3000 to 5000 in version 1.0.0.

fix

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

affects: >=1.0.0

gotchaThe `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.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: Cannot read property 'createAnimatedComponent' of undefined

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.

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

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/hasretozkan/react-native-fade-loading ↗

packagehttps://www.npmjs.com/package/react-native-fade-loading ↗