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