indatastar-styled-animatedimagebackground

A lightweight, reusable animated background component for React Native.

indatastar-styled-animatedimagebackground creates a smooth, looping, diagonal scrolling background using Animated and ImageBackground. It supports repeating textures and works great for games, splash screens, menus, and dynamic UI backgrounds.

✨ Features

• Smooth infinite animation loop
• Diagonal scrolling effect (X + Y translation)
• Custom animation duration
• Configurable translation range
• Adjustable opacity
• Fully typed with TypeScript
• Supports children overlay content

📦 Installation

This component depends only on react-native.

No additional packages required.

Simply copy the component into your project:

🚀 Usage

import { StyleSheet, Text, View } from 'react-native';
import {AnimatedBackground} from 'indatastar-styled-animatedimagebackground';

export default function App() {
  return (
    <View style={styles.container}> 
    <AnimatedBackground 
image={require("./assets/Cup_pixels.png")}
duration={20000}
style={{ justifyContent: 'center',alignItems: 'center',flex: 1 }}
opacity={0.3} children={<></>}>
      <Text style={{fontFamily:'roboto',fontSize:40,color:'black',fontWeight:'bold'}}>Coffee Time</Text>
      </AnimatedBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  }, 
});

⚙️ Props

| Prop | Type | Default | Description | |-------------------|-----------------------|---------|--------------------------------------------------| | children | ReactNode | — | Content rendered above the animated background | | image | ImageSourcePropType | required| Background image source | | duration | number | 25000 | Animation duration in milliseconds | | outputRangeStart| number | -281 | Start translation value | | outputRangeEnd | number | 0 | End translation value | | style | ViewStyle | — | Additional container styling | | opacity | number | 0.2 | Background image opacity |

🎨 How It Works

Uses Animated.Value

Interpolates between outputRangeStart and outputRangeEnd

Applies both translateX and translateY

Restarts animation on completion for infinite loop

📱 Platform Support

✅ iOS

✅ Android

✅ React Native Web (with repeat support)

📄 License

MIT