Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

react-native-offscreen-toolbar

1.0.10 • Public • Published

react-native-offscreen-toolbar npm version

Component generalization of Janic Duplessis' solution to animate the toolbar off-screen while scrolling, a common material design pattern

simple list demo spacer search demo

Library usage in both the example bundled with the library and in the search screen of a to be released application

Installation

$ npm install react-native-offscreen-toolbar --save

Usage

import OffscreenToolbar from 'react-native-offscreen-toolbar';
 
export default class YourComponent extends React.Component {
    render() {
        const toolbar = () => (<ToolbarAndroid title={'Title'} />);
        const listItem = ({item}) => <Text>{item.key}</Text>;
        const scrollable = () => (<FlatList data={DUMMY_DATA} renderItem={listItem}/>);
        return (
            <View style={styles.container}>
                <OffscreenToolbar
                    toolbar={toolbar}
                    scrollable={scrollable} />
            </View>
        );
    }
}

Properties

Prop Description Default
toolbar Component for the toolbar/navbar. None
scrollable Component for the scrollable, a FlatList or ScrollView for example. None
scrollableOverlay Optional component for the scrollable overlay. None
toolbarHeight Toolbar height used when calculating the animations. 56
scrollablePaddingTop Since the scrollable is placed behind the toolbar, this padding is typically used to make the scrollable content appear below the toolbar. 64

Example

Install

npm i react-native-offscreen-toolbar

DownloadsWeekly Downloads

3

Version

1.0.10

License

MIT

Last publish

Collaborators

  • avatar