react-native-header-zoom-scroll

Easily create ScrollView with Animation zoom header, with lots of customization

Features

• Smooth animation
• Custom background header
• Custom small header
• Transparent small header

Setup

This library is available on npm, install it with: npm i react-native-header-zoom-scroll or yarn add react-native-header-zoom-scroll.

Usage

import React from 'react';
import type { Node } from 'react';
import {
  SafeAreaView,
  Text,
  Image
} from 'react-native';
import ScrollZoomHeader from 'react-native-header-zoom-scroll';
import { View } from 'react-native';

const App: () => Node = () => {


  return (
    <SafeAreaView >
      <ScrollZoomHeader
        showsVerticalScrollIndicator={false}
        smallHeaderHeight={
          60
        }
        contentSmallHeader={<View style={{
          flex: 1
        }}>
          <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 10 }}>CUSTOM SMALL HEADER</Text>
        </View>}
        headerComponent={
          <View>
            <Text style={{ color: '#fff', fontWeight: '600', marginLeft: 10 }}>CUSTOM  HEADER COMPONENT</Text>

          </View>
        }
        headerHeight={300}
        backgroundHeaderComponent={
          <Image
            source={{ uri: 'https://i.9mobi.vn/cf/images/2015/03/nkk/hinh-dep-12.jpg' }}
            style={{
              width: '100%',
              height: '100%'
            }}
          />
        }
      >
        <Text style={{ fontWeight: '600', marginLeft: 10 }}>CONTENT</Text>

        <View style={{
          height: 1000,
        }} />

      </ScrollZoomHeader>
    </SafeAreaView>
  );
};

export default App;

Available props

| Name | Type | Default | Description | | ------------------------------ | ---------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------- | | headerComponent | JSXAttribute | null | Component inside Header | | headerHeight | number | 0 | Height of big header | | backgroundHeaderComponent | JSXAttribute. | null | Background of header Image,View ... | | smallHeaderHeight | number | 0 | Height of small header | | contentSmallHeader | JSXAttribute | null | content of small header | | fadeSmallHeader | bool | false | animation fade smallHeader when scroll | | statusBarBackground | string | transparent | Background statusbar |