Material Bread
v0.2.10
Home
Getting Started
React Native
Web
Electron
MacOS
Windows
NextJs
Expo
Vue Native
Style
Font
Icons
Theme
Components
Appbar
Searchbar
Appbar Bottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Bottom Navigation Item
Button
Card
CardActions
CardContent
CardHeader
CardMedia
Checkbox
Chip
DataTable
DataTableCell
DataTableHeader
DataTablePagination
DataTableRow
Dialog
Divider
Drawer
DrawerHeader
DrawerItem
DrawerSection
DrawerBottom
Fab
Speed dial
Icon
IconButton
List
ListExpand
ListItem
ListSection
Menu
MenuItem
Paper
Progress Bar
Progress Circle
Radio Button
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
Tab
Textfield
Searchfield
ToggleButton
ToggleButtonGroup
Tooltip
Typography
Utils
Anchor
Color
Hoverable
Shadow
Storybook
Showcase
Contributing
Library
Docs
About

SwipeNav

SwipeNav shows and hides headers and footer on scroll

import { SwipeNav } from 'material-bread';

Component #

SwipeNav wraps your content with a ScrollView and hides the header or footer. The header hides on scroll down and shows on scroll up while the footer hides on scroll up and shows on scroll down. You can also pass in a custom scroll componnt like a FlatList for more control.
News
2 hours ago
Woman Opens Two Chrome Tabs
After downloading 128GB of RAM on her custom desktop, Karen was able to open two Chrome tabs at the same time which experts have called "Revolutionary"
3 hours ago
Local developer wastes time
A local develop wastes his Sunday writing placeholder text for a demo instead of going outside
4 hours ago
Bitcoin dead again
Bitcoin has died yet again after falling .2% in 1 hour says leading economist.
6 hours ago
Bitcoin going to the moon
Bitcoin has risen 11.4% in the last 5 minutes which has some experts predicating the start of the next bull run
8 hours ago
U.S Tech Startups rebound
Favorable Business Conditions have allowed startups to secure more fundraising deals compared to last year.
9 hours ago
Asia's clean energy initiatives
China Plans to invest billions of dollars for the development of over 300 clean energy projects in SouthEast Asia
10 hours ago
Copper on the rise
Copper prices soar admid global market optimism and increasing demand
11 hours ago
Poverty to Empowerment in Chicago
How one woman is transforming the lives of underpriveledged children.
Live Editing
class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {

    return (
      <View style={{ height: '100%', maxWidth: 500, overflowY: 'hidden' }}>
        <SwipeNav
          header={
            <Appbar
              barType={'normal'}
              color={'#009688'}
              navigation={'menu'}
              title={'News'}
              actionItems={[{ name: 'more-vert' }]}
            />
          }
          scrollViewStyle={{ height: 500 }}>
          <BodyContent />
        </SwipeNav>
      </View>
    );
  }
}

Usage #

import React from 'react';
import { View, Text } from 'react-native';
import { SwipeNav, Appbar, Button } from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View>
        <SwipeNav
          header={
            <Appbar
              barType={'normal'}
              color={'#009688'}
              navigation={'menu'}
              title={'News'}
              actionItems={[{ name: 'more-vert' }]}
            />
          }>
          <View>
            <Text>Content</Text>
          </View>
        </SwipeNav>
      </View>
    );
  }
}

Props #

Name
Description
Type
Default
header
Header component that renders above the content
node
headerContainerStyle
Styles container around header
object
footer
Footer component that renders below the content
node
footerContainerStyle
Styles container around footer
object
scrollComponent
Custom scroll component
node
scrollViewProps
Props spread onto the scrollview
object
scrollViewStyle
Styles scrollview
object
style
Styles root element
object

Demos #

You can see even more examples in the Storybook environment.