react-native-offscreen-toolbar

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

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

• Example project bundled with this module, using a simple FlatList