react-native-ui-components

Installation

npm install --save react-native-ui-components

Usage

Currently provides two reusable UI components for react native apps, a Button and a SearchBar. The intention for this repository is to collect similar widgets that can be used across various react native projects. If you are looking for a component that is not already here, see if it exists in the mobile repository, and if so extract it into this repository.

Button

A tappable component that looks like a button, allowing customised styling, label, and callback function.

| Prop Name | Type | Description | | ------------- | -------- | ---------------------------------------------------------------------- | | textStyle | style | Will override styling of the Text label within the button | | style | style | Will override styling of the TouchableHighlight enclosing the button | | onPress | function | The callback to execute when the button is pressed | | text | string | Label to display inside the button | | isDisabled | boolean | If true, the button is not pressable and appears in its disabled state | | disabledColor | string | Defines the button's background colour when it is disabled |

<Button
  style={styles.authFormButton}
  textStyle={styles.authFormButtonText}
  text={'Login'}
  onPress={this.onLogin}
  disabledColor={WARM_GREY}
  isDisabled={!this.canAttemptLogin}
/>

ProgressBar

Basic progress bar with the ability to set how far through some process is.

| Prop Name | Type | Description | | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------- | | progress | integer | The current number representing progress (compared to total, see below) | | total | integer | The total needed to finish | | isComplete | boolean | Will fill the progress bar to the end no matter what the progress. Useful for error states |

SearchBar

A text field with a search icon that appears as a search bar. Will not actually filter a dataset itself, it is a dumb component doing the display work only, and leaving the business logic for someone else.

| Prop Name | Type | Description | | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------- | | color | string | Defines the colour of the SearchBar's underline and icon | | style | style | Will override styling of the Text field | | onChange | function | The callback to execute when the text is changed, should take the search string as a parameter and filter some data |

onSearchChange(searchTerm) {
  this.setState({ searchTerm: searchTerm });
}

renderSearchBar() {
  const { pageStyles, searchBarColor } = this.props;
  return (
    <SearchBar
      onChange={this.onSearchChange}
      style={pageStyles.searchBar}
      color={searchBarColor}
    />);
}