react-native-smart-image-background

A smart React Native ImageBackground component with fallback support and smooth fade-in animations.

Features

• 🎨 Fallback Image Support: Automatically displays a fallback image while loading or on error
• ✨ Smooth Animations: Fade-in animation when the image loads successfully
• 🔄 Error Handling: Gracefully handles image loading errors
• 📱 TypeScript Support: Fully typed with TypeScript
• 🎯 Flexible Styling: Customizable container and image styles
• 🌫️ Blur Effect: Optional blur radius support

Installation

npm install react-native-smart-image-background
# or
yarn add react-native-smart-image-background

Usage

import React from 'react';
import SmartImageBackground from 'react-native-smart-image-background';

const App = () => {
  return (
    <SmartImageBackground
      source={{
        uri: 'https://example.com/image.jpg',
      }}
      fallbackSource={require('./assets/fallback.png')}
      blurRadius={0}
      resizeMode="cover"
      imageStyle={{
        width: 300,
        height: 200,
      }}
      fallbackImageStyle={{
        width: 300,
        height: 200,
      }}
      containerStyle={{
        borderRadius: 10,
      }}
    />
  );
};

Props

| Prop | Type | Required | Default | Description | | -------------------- | ----------------------------------------------------------- | -------- | --------- | -------------------------------------------------------------- | | source | ImageSourcePropType | Yes | - | The image source (URI or require) | | fallbackSource | ImageSourcePropType | Yes | - | The fallback image source to display while loading or on error | | blurRadius | number | No | 0 | Blur radius for the image | | resizeMode | 'cover' \| 'contain' \| 'stretch' \| 'repeat' \| 'center' | No | 'cover' | How to resize the image | | imageStyle | StyleProp<ImageStyle> | Yes | - | Style for the main image | | fallbackImageStyle | StyleProp<ImageStyle> | No | - | Style for the fallback image | | containerStyle | StyleProp<ViewStyle> | No | - | Style for the container view |

Example

import React from 'react';
import { View } from 'react-native';
import SmartImageBackground from 'react-native-smart-image-background';

const ProfileScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <SmartImageBackground
        source={{
          uri: 'https://picsum.photos/400/300',
        }}
        fallbackSource={require('./assets/default-avatar.png')}
        resizeMode="cover"
        blurRadius={5}
        imageStyle={{
          width: '100%',
          height: 200,
        }}
        containerStyle={{
          borderRadius: 10,
          overflow: 'hidden',
        }}
      />
    </View>
  );
};

TypeScript

The component is fully typed. You can import the props interface:

import SmartImageBackground, {
  SmartImageBackgroundProps,
} from 'react-native-smart-image-background';

Requirements

• React Native >= 0.60.0
• React >= 16.8.0

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

react-native-smart-image-background