npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-native-animated-header

1.0.7 • Public • Published

Version NPM

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 (< 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
parallax Use parallax effect Boolean Yes false

Warning

AnimatedHeader only accept 1 child, ScrollView or FlatList

Copyright and License

MIT License

Copyright (c) 2018 maphongba008

install

npm i react-native-animated-header

Downloadsweekly downloads

24

version

1.0.7

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability