Skip to content

NoticeBar component for React Native, works at iOS and Android.

License

Notifications You must be signed in to change notification settings

seymoe/react-native-noticebar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-noticebar

NoticeBar component for React Native, works at iOS and Android.

Install

npm install react-native-noticebar --save

Usage

import NoticeBar from 'react-native-noticebar'

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      noticeList: [
        {
          id: 1,
          title: 'This is Notice Bar!'
        },
        {
          id: 2,
          title: 'Notice Bar coming!!'
        }
      ]
    }
  }

  // noticebar change event
  handleChange = (index) => {
    console.log(`Current index is ${index}.` )
  }

  // noticebar press event
  handlePress = (item) => {
    console.log(item)
  }

  // render item
  renderBarItem = (item, index) => {
    return (
      <View>
        <Text numberOfLines={1}>{item.title}</Text>
      </View>
    )
  }

  render() {
    return (
      <View>
        <Text>NoticeBar Demo</Text>
        <NoticeBar
          data={ noticeList }
          renderBarItem={ this.renderBarItem }
          scrollHeight={ 40 }
          scrollBarStyle={ styles.barStyle }
          delay={ 3000 }
          duration={ 500 }
          easing='linear'
          onChange={ this.handleChange }
          onPress={ this.handlePress }></NoticeBar>
      </View>
    )
  }
}

Props

Prop name Description Type Default
data You know, the data PropTypes.string or PropTypes.element
scrollHeight Height of the single Bar PropTypes.number 36
renderBarItem PropTypes.func
scrollBarStyle Bar wrap's style PropTypes.object
delay PropTypes.number 3000
duration PropTypes.number 500
easing PropTypes.string, One of the ['step0','step1','linear','ease','quad','cubic','sin','circle','exp', 'bounce'] linear
onChange Callback when noticebar has changed PropTypes.func
onPress Press function PropTypes.func

About

NoticeBar component for React Native, works at iOS and Android.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published