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

    1

    Version

    1.0.10

    License

    MIT

    Last publish

    Collaborators

    • lopespm