react-native-auto-scroll

To implement auto-scrolling, wrap your target components (like Text or Image) inside the <AutoScroll> component. The component handles the animation logic automatically.

import * as React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import AutoScroll from '@homielab/react-native-auto-scroll';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        {/* Example with an Image */}
        <AutoScroll style={styles.scrolling1}>
          <Image
            style={styles.image}
            source={require('./assets/merry-christmas-png.png')}
          />
        </AutoScroll>

        {/* Example with Text and custom padding */}
        <AutoScroll style={styles.scrolling2} endPaddingWidth={50}>
          <Text style={styles.welcome}>MERRY CHRISTMAS AND HAPPY NEW YEAR</Text>
        </AutoScroll>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 200,
    height: 200,
  },
  scrolling1: {
    width: 400,
    padding: 10,
    marginBottom: 10,
  },
  scrolling2: {
    backgroundColor: 'red',
    width: 400,
    padding: 10,
    marginBottom: 10,
  },
  welcome: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    margin: 10,
  },
});

The AutoScroll component provides a smooth, looping horizontal auto-scroll effect for its children. It is designed to work with a single child element (typically a View containing text or images) and automatically handles the looping logic by cloning the child to create a seamless transition.

Usage Requirements

• The children prop must be a single React.ReactElement that can accept a ref and an onLayout prop (e.g., a View).
• The component uses Animated for performance, utilizing the native driver on non-web platforms.

Basic Example

import AutoScroll from '@homielab/react-native-auto-scroll';
import { View, Text } from 'react-native';

const MyScrollingContent = () => (
  <AutoScroll style={{ width: 300 }}>
    <View style={{ flexDirection: 'row' }}>
      <Text> This is a scrolling message! </Text>
      <Text> This is a scrolling message! </Text>
    </View>
  </AutoScroll>
);

The AutoScroll component accepts the following props to control its behavior and appearance: