A ReactNative Scrollable Stretchy Header Component

A ReactNative Scrollable Stretchy Header Component

A ReactNative scrollable stretchy header component.react-native-stretchy

A ReactNative scrollable stretchy header component.react-native-stretchy

react-native-stretchy

Installation

You can install this package via yarn:

yarn add react-native-stretchy

or npm

npm install react-native-stretchy --save

NOTE: Link react-native-linear-gradient to your project.

Basic Usage

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { StretchyHeader } from 'react-native-stretchy';

class MyStretchyHeader extends Component {
  render() {
    return (
      <StretchyHeader
          image={{uri: 'https://example.com/myImageAddress'}}
          gradientColors={["#000", "transparent", "#000"]}
          onScroll={(position, scrollReachesToBottomOfHeader) => console.log(position, scrollReachesToBottomOfHeader)}
      >
          <Text>Foo</Text>
          <Text>Bar</Text>
      </StretchyHeader>
    );
  }
}

Properties

These are default properties that is available for all stretchy components

Prop Default Description
backgroundColor #FFF Background color of the inner content
image null The image of the stretchy header (RN image source)
imageHeight null Height of the stretchy header image (keep ratio of image if not provided)
imageResizeMode 'cover' ResizeMode of the stretchy header image. You can use one of these values
gradientColors [] The array of string colors for gradient
foreground null A RN Component for foreground content of background
onScroll null A callback function with these arguments:
position: current position of scroll
scrollReachesToBottomOfHeader: boolean flag for detecting scroll reaches to bottom of header or not

Additional props of gradient are also available

Prop Default
gradientStart null
gradientEnd null
gradientLocations null

Components

StretchyHeader

Simple ScrollView with stretchy header support.

StretchyFlatList

If you want to use FlatList component with stretchy header support, you can use this component instead of StretchyHeader for better rendering and performance.

StretchySectionList

If you want to use SectionList component with stretchy header support, you can use this component instead of StretchyHeader for better rendering and performance.

_NOTE: In addition to default stretchy props, you can use all available default props of React-Native FlatList and SectionList for StretchyFlatList and StretchySectionList.

You can find all available components usage in example project._

Download Details:

Author: hamidhadi

GitHub: https://github.com/hamidhadi/react-native-stretchy

react-native programming

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics .Google Analytics for React Native! Compatible with react-native-ab.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.