A Searchable ListView which supports Chinese PinYin

React Native Search List A searchable ListView which supports Chinese PinYin and alphabetical index.

Installation

$ npm install @unpourtous/react-native-search-list --save

Usage

To Use SearchList, need a array of object as data source,and each object has searchStr property, eample code are put in example/entry.js.

export default class example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      dataSource: demoList
    }
  }

  // custom render row
  renderRow (item, sectionID, rowID, highlightRowFunc, isSearching) {
    return (
      <Touchable onPress={() => {
        Alert.alert('Clicked!', `sectionID: ${sectionID}; item: ${item.searchStr}`,
          [
            {text: 'OK', onPress: () => console.log('OK Pressed')},
          ],
          {cancelable: true})
      }}>
        <View key={rowID} style={{flex: 1, marginLeft: 20, height: rowHeight, justifyContent: 'center'}}>
          {/*use `HighlightableText` to highlight the search result*/}
          <HighlightableText
            matcher={item.matcher}
            text={item.searchStr}
            textColor={'#000'}
            hightlightTextColor={'#0069c0'}
          />
        </View>
      </Touchable>
    )
  }

  // render empty view when datasource is empty
  renderEmpty () {
    return (
      <View style={styles.emptyDataSource}>
        <Text style={{color: '#979797', fontSize: 18, paddingTop: 20}}> No Content </Text>
      </View>
    )
  }

  // render empty result view when search result is empty
  renderEmptyResult (searchStr) {
    return (
      <View style={styles.emptySearchResult}>
        <Text style={{color: '#979797', fontSize: 18, paddingTop: 20}}> No Result For <Text
          style={{color: '#171a23', fontSize: 18}}>{searchStr}</Text></Text>
        <Text style={{color: '#979797', fontSize: 18, alignItems: 'center', paddingTop: 10}}>Please search again</Text>
      </View>
    )
  }

  render () {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor='#F00' barStyle='light-content' />
        <SearchList
          data={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          renderEmptyResult={this.renderEmptyResult.bind(this)}
          renderBackButton={() => null}
          renderEmpty={this.renderEmpty.bind(this)}

          rowHeight={rowHeight}

          toolbarBackgroundColor={'#2196f3'}
          title='Search List Demo'
          cancelTitle='取消'
          onClickBack={() => {}}

          searchListBackgroundColor={'#2196f3'}

          searchBarToggleDuration={300}

          searchInputBackgroundColor={'#0069c0'}
          searchInputBackgroundColorActive={'#6ec6ff'}
          searchInputPlaceholderColor={'#FFF'}
          searchInputTextColor={'#FFF'}
          searchInputTextColorActive={'#000'}
          searchInputPlaceholder='Search'
          sectionIndexTextColor={'#6ec6ff'}
          searchBarBackgroundColor={'#2196f3'}
        />
      </View>
    )
  }
}

APIs

prop name	type	description	default value
data	array	The rows of list view.each object should contain searchStr, it will be used for search source. If you have custom row id,you should set searchKey for each object.
renderRow	number	Render your custom row content.
rowHeight	number	The height of the default row content, it will be used for scroll calculate.	40
sectionHeaderHeight	number	The height of section header content.	24
searchListBackgroundColor	string	BackgroundColor for searchList.	#171a23
toolbarBackgroundColor	string	Toolbar background color.	#171a23
searchBarToggleDuration	number	Custom search bar animation duration.	300
searchBarBackgroundColor	string	Custom search bar background color.	#171a23
searchInputBackgroundColor	string	Custom search input default state background color.
searchInputBackgroundColorActive	string	Custom search input searching state background color.
searchInputPlaceholder	string	Custom search input placeholder text.
searchInputPlaceholderColor	string	Custom search input placeholder text color.
searchInputTextColor	string	Custom search input default state text color.
searchInputTextColorActive	string	Custom search input searching state text color.
searchBarBackgroundColor	string	Custom search bar background color.
title	string	Toolbar title.
titleTextColor	string	Toolbar title text color.
cancelTextColor	string	Search bar cancel text color.
cancelTitle	string	Search bar cancel text color.
sectionIndexTextColor	string	Section index text color.
hideSectionList	bool	Whether to hide the alphabetical section listing view or not.
renderSectionIndexItem	func	Custom render SectionIndexItem.
sortFunc	func	The sort function for the list view data source,sorting alphabetical by default
resultSortFunc	func	The sort function for the search result,sorting first match position by default
onScrollToSection	func	The callback of alphabetical section view be clicked or touch.
renderBackButton	func	Render a custom back buttom on Toolbar.
renderEmpty	func	Render a view when data is empty.
renderEmptyResult	func	Render a view when search result is empty.
renderSeparator	func	Render row separator.
renderSectionHeader	func	renderSectionHeader for the internal ListView
renderHeader	func	renderHeader for the internal ListView
renderFooter	func	renderFooter for the internal ListView
renderRow	func	renderRow for the internal ListView
onSearchStart	func	Callback when searching start.
onSearchEnd	func	Callback when searching end.

Download Details:

Author: UnPourTous

GitHub: https://github.com/UnPourTous/react-native-search-list

#react-native #programming

What is GEEK

Buddha Community

Maintain your Magento web app for better Performance

Magento is the best cross-platform framework that helps you to develop the best eCommerce web apps. It is important to maintain your Magento eCommerce web app to increase the performance of your web application.

Magento maintenance and support services play a vital role in maintaining the website because if the website or web app is not maintained properly it can create bugs in the future and many more problems can occur through which there is a chance that customers get frustrated and won’t visit your website again.

Nevina Infotech is the best choice for Magento maintenance and service of your web apps. We have a hardworking team of developers that will help you to increase the performance of your web apps.

#magento maintenance and support services #magento support services #magento support and maintenance #magento support #magento maintenance support #magento technical support

Get the latest Features in your current eCommerce App

Are you tired of outdated features in your eCommerce app and do you want some latest and trending features in your eCommerce app? Then you need to update your app regularly to stay updated with the latest and trending features to add to your app. For updating it you need to update to the latest version of the Magento so that whatever update occurs in the latest version can also occur in your eCommerce app.

You can hire Nevina Infotech that can help you to provide Magento support and maintenance and will also guide you to update your eCommerce app for adding the latest features to your app. Our team is great and enthusiastic about their work. You can easily rely on us to get the latest features in your eCommerce app.

#magento maintenance and support services #magento support services #magento support and maintenance #magento support #magento maintenance support #magento technical support

Get the best Magento maintenance service for your e-commerce store

Magento is the most demanded technology for developing online eCommerce stores and Magento service is important for better working of the online store. Nevina Infotech provides you with Magento maintenance and services.

Magento maintenance is the process of checking the performance of the website and checking the regular updates, backups, online store management, and much more.

You can choose Nevina Infotech for Magento maintenance service for your eCommerce store. We provide the best Magento support and maintenance for eCommerce stores.

#magento maintenance and support services #magento support services #magento support and maintenance #magento support #magento maintenance support #magento technical support

Maintain your Magento app for a smoother and faster user Experience

Magento is the best open-source eCommerce platform for website development. We all know the importance of a website in every sector; whether it is about business or anything else, it can represent the look and feel of your company. So to maintain these websites, it is essential to do Magento support and maintenance so that you can also maintain your website.

Nevina Infotech is the best Magento app development company that can guide you to maintain and support your Magento app. We have a dedicated team of developers who will help you with the maintenance and support of your app.

#magento maintenance and support services #magento support services #magento support and maintenance #magento support #magento maintenance support #magento technical support

Epson printer support

If you face an Epson printer malfunction, you first go for technical assistance directly from the official tech support center. They would only supply you with an internet service, which will take a lot of time and will also provide very little or no support. With the aid of Epson Printer technical assistance, the errors in Epson printers are quickly handled. We provide our customers with the best Epson customer support. To overcome the challenges, we have a team of well-experienced and qualified experts.
Get More info: https://epsonprintersupports.com/

#epson printers support #epson printer support #epson printer support number #epson printer technical support number #epson printer technical support #epson printer customer service