@wasiquehaider/react-native-animated-scroll is a customizable and animated header component for React Native applications. It enhances user experience by providing a header that smoothly animates and hides as the user scrolls through the content. Leveraging react-native-reanimated for high-performance animations, this package includes features such as dynamic scaling, opacity transitions, and responsive design adjustments.

Features

• Smooth Animations: Fluid animations for header transitions based on scroll position.
• Customizable: Easily customize the header with different titles, buttons, and styles.
• Responsive: Compatible with various screen sizes and safe areas.
• Easy Integration: Simple API for integrating into existing React Native projects

Installation

Install the package using npm or yarn:

npm install @wasiquehaider/react-native-animated-scroll

or

yarn add @wasiquehaider/react-native-animated-scroll

Usage

import React from "react";
import { View } from "react-native";
import AnimatedScroll from "@wasiquehaider/react-native-animated-scroll/index";

const YourContentComponent = () => (
  <View>
    <Text>Your main content goes here...</Text>
  </View>
);

const LeftButton = () => <Text>Left</Text>;

const RightButton = () => <Text>Right</Text>;

const App = () => (
  <View style={{ flex: 1 }}>
    <AnimatedScroll
      title="Welcome"
      content={<YourContentComponent />}
      leftContent={<LeftButton />}
      rightContent={<RightButton />}
      onLeftPress={() => console.log("Left button pressed")}
      onRightPress={() => console.log("Right button pressed")}
      imageUri={{ uri: "https://example.com/image.jpg" }}
    />
  </View>
);

export default App;

Props

AnimatedScrollProps

| Key | Type | Description | | ---------------- | --------------- | ----------------------------------------------------------------- | | title | String | The title text displayed in the header. | | content | ReactNode | The main content to display in the ScrollView. | | leftContent | ReactNode | Custom content for the left side of the header (e.g., a button). | | rightContent | ReactNode | Custom content for the right side of the header (e.g., a button). | | leftBtnStyles | Object | Styles for the left button. | | rightBtnStyles | Object | Styles for the right button. | | onLeftPress | Function | Function to call when the left button is pressed. | | onRightPress | Function | Function to call when the right button is pressed. | | imageUri | string ? number | URI for an optional image displayed at the top of the ScrollView. |

Example

import React from "react";
import { View } from "react-native";
import AnimatedScroll from "@wasiquehaider/react-native-animated-scroll/index";

const YourContentComponent = () => (
  <View>
    <Text>Your main content goes here...</Text>
  </View>
);

const LeftButton = () => <Text>Left</Text>;

const RightButton = () => <Text>Right</Text>;

const App = () => (
  <View style={{ flex: 1 }}>
    <AnimatedScroll
      title="Welcome"
      content={<YourContentComponent />}
      leftContent={<LeftButton />}
      rightContent={<RightButton />}
      onLeftPress={() => console.log("Left button pressed")}
      onRightPress={() => console.log("Right button pressed")}
      imageUri={{ uri: "https://example.com/image.jpg" }}
    />
  </View>
);

export default App;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT