react-native-animated-form

Collapsing toolbar for Android and iOS.

Installation

npm install --save react-native-animated-header
or
yarn add react-native-animated-header

Demo

Android

Android


iOS

iOS
iPhone X

![iPhoneX]
(https://raw.githubusercontent.com/maphongba008/react-native-animated-header/master/demo/ipx.gif)

Usage

import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import { Icon } from 'native-base';
import AnimatedHeader from 'react-native-animated-header';
import Bg from './assets/bg.jpg';

getListItems = count => {
  const items = [];
  let i = 0;

  while (i < count) {
    i++;
    items.push(
      <View key={i} style={{ backgroundColor: i % 2 === 0 ? '#eee5ff' : '#ceebfd', height: 64 }}>
        <Text style={{ color: '#999' }}>{`List Item ${i}`}</Text>
      </View>
    );
  }

  return items;
};

export default class App extends Component {

  render() {
    return (
      <AnimatedHeader 
        style={{flex: 1 }}
        backText='Back'
        title='Happy coding'
        renderLeft={() => (<Icon name='arrow-back' style={{ marginLeft: 20 }} />)}
        renderRight={() => (<Icon name='add' style={{ marginRight: 20 }} />)}
        backStyle={{ marginLeft: 10 }}
        backTextStyle={{fontSize: 14, color: '#000'}}
        titleStyle={{ fontSize: 22, left: 20, bottom: 20, color: '#000' }}
        headerMaxHeight={200}
        imageSource={Bg}
        toolbarColor='#FFF'
        disabled={false}
      >
        <ScrollView>
          {getListItems(20)}
        </ScrollView>
      </AnimatedHeader>
    );
  }
  }

Properties

name description type isOptional default
backText Back text, leave it empty to hide String Yes undefined
title Header title String Yes undefined
renderLeft To render icon on the left Function Yes undefined
renderRight To render icon on the right Function Yes undefined
backStyle Style of back container Object Yes { marginLeft: 10 }
backTextStyle Style of back text Object Yes { fontSize: 16 }
titleStyle Style of title, use left and bottom for positioning the text Object Yes { fontSize: 20, left: 40, bottom: 30 }
toolbarColor Toolbar background color String Yes #FFF
headerMaxHeight Height of header when expanded Number Yes 200
disabled Do not allow header to collapse Boolean Yes false
noBorder Hide header separator Boolean Yes false
imageSource Image background for header Image Yes undefined

Warning

AnimatedHeader only accept 1 child, ScrollView or FlatList

GitHub