{"id":28132,"library":"react-native-fade-loading","title":"react-native-fade-loading","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/hasretozkan/react-native-fade-loading","tags":["javascript","react-native","ios","android","typescript"],"install":[{"cmd":"npm install react-native-fade-loading","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-fade-loading","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-fade-loading","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a named export, not a default export. Use curly braces.","wrong":"import FadeLoading from 'react-native-fade-loading'","symbol":"FadeLoading","correct":"import { FadeLoading } from 'react-native-fade-loading'"},{"note":"If you need the type for TypeScript, import it as a type only to avoid runtime inclusion.","wrong":"import { FadeLoadingProps } from 'react-native-fade-loading'","symbol":"FadeLoadingProps","correct":"import type { FadeLoadingProps } from 'react-native-fade-loading'"},{"note":"CommonJS require must destructure the named export, not assign the whole module.","wrong":"const FadeLoading = require('react-native-fade-loading')","symbol":"require('react-native-fade-loading')","correct":"const { FadeLoading } = require('react-native-fade-loading')"}],"quickstart":{"code":"import React from 'react';\nimport { View, Text } from 'react-native';\nimport { FadeLoading } from 'react-native-fade-loading';\n\nconst App = () => {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <FadeLoading\n        primaryColor=\"gray\"\n        secondaryColor=\"lightgray\"\n        duration={5000}\n        visible={true}\n        animated={true}\n      >\n        <Text>Loading...</Text>\n      </FadeLoading>\n    </View>\n  );\n};\n\nexport default App;","lang":"typescript","description":"A complete React Native component that uses FadeLoading to wrap children with a fade loading animation."},"warnings":[{"fix":"Set `visible` to true to show children, or use conditional rendering instead.","message":"The `visible` prop controls whether children are visible; if set to false, the children are hidden but the fade animation still plays.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If relying on the previous default, explicitly set `duration={3000}`.","message":"The `duration` prop default changed from 3000 to 5000 in version 1.0.0.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Provide an explicit `style` prop to override defaults, or use a wrapper View.","message":"The `FadeLoading` component has a default `style` prop of `{padding: 5, borderRadius: 4}` which may override parent styles if not careful.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Ensure react-native-reanimated is installed and linked: run 'npm install react-native-reanimated' and follow its setup instructions.","cause":"This error occurs if react-native-reanimated is not properly installed or linked, as the library depends on it internally.","error":"TypeError: Cannot read property 'createAnimatedComponent' of undefined"},{"fix":"Update react-native and react-native-fade-loading to compatible versions, or reinstall node_modules.","cause":"This may happen if the library version mismatch between react-native and the peer dependencies.","error":"Invariant Violation: View config getter callback for component 'RCTView' must be a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}