react-native-ui-components v0.5.0
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}
/>);
}