diff --git a/website/i18n/en.json b/website/i18n/en.json index 55ef291bf6..4124ca67e8 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -304,6 +304,54 @@ }, "version-1.2.0/version-1.2.0-web_usage": { "title": "Usage on the Web" + }, + "version-2.0.0/version-2.0.0-avatar": { + "title": "Avatar" + }, + "version-2.0.0/version-2.0.0-button_group": { + "title": "ButtonGroup" + }, + "version-2.0.0/version-2.0.0-checkbox": { + "title": "CheckBox" + }, + "version-2.0.0/version-2.0.0-contributing": { + "title": "Contributing" + }, + "version-2.0.0/version-2.0.0-customization": { + "title": "Customization" + }, + "version-2.0.0/version-2.0.0-divider": { + "title": "Divider" + }, + "version-2.0.0/version-2.0.0-icon": { + "title": "Icon" + }, + "version-2.0.0/version-2.0.0-image": { + "title": "Image" + }, + "version-2.0.0/version-2.0.0-input": { + "title": "Input" + }, + "version-2.0.0/version-2.0.0-listitem": { + "title": "ListItem" + }, + "version-2.0.0/version-2.0.0-overlay": { + "title": "Overlay" + }, + "version-2.0.0/version-2.0.0-rating": { + "title": "Rating" + }, + "version-2.0.0/version-2.0.0-social_icon": { + "title": "SocialIcon" + }, + "version-2.0.0/version-2.0.0-text": { + "title": "Text" + }, + "version-2.0.0/version-2.0.0-tooltip": { + "title": "Tooltip" + }, + "version-2.0.0/version-2.0.0-web_usage": { + "title": "Usage on the Web" } }, "links": { diff --git a/website/versioned_docs/version-2.0.0/avatar.md b/website/versioned_docs/version-2.0.0/avatar.md new file mode 100644 index 0000000000..ce20a19a25 --- /dev/null +++ b/website/versioned_docs/version-2.0.0/avatar.md @@ -0,0 +1,407 @@ +--- +id: version-2.0.0-avatar +title: Avatar +original_id: avatar +--- + +Avatars are found all over ui design from lists to profile screens. They are +commonly used to represent a user and can contain photos, icons, or even text. + +
+
+ Standard Avatar +
Standard
+
+
+ Avatar with Title +
Title
+
+
+ Avatar with Icon +
Icon
+
+
+ Standard Avatar with accessory +
Standard with accessory
+
+
+ +## Usage + +```js +import { Avatar } from 'react-native-elements'; + +// Standard Avatar + + +// Avatar with Title + + +// Avatar with Icon + + +// Standard Avatar with accessory + +``` + +#### Avatar with initials + + + +```js +import { Avatar } from "react-native-elements"; + + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> + console.log("Works!")} + activeOpacity={0.7} +/> +``` + +#### Avatar with icons + + + +```js +import { Avatar } from "react-native-elements"; + + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 3, marginTop: 100}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 4, marginTop: 75}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 5, marginRight: 60}} +/> + console.log("Works!")} + activeOpacity={0.7} + containerStyle={{flex: 2, marginLeft: 20, marginTop: 115}} +/> +``` + +#### Avatar with title placeholder + + + +```js +import { ListItem } from 'react-native-elements'; + +; +``` + +--- + +## Props + +- [`accessory`](#accessory) +- [`activeOpacity`](#activeopacity) +- [`avatarStyle`](#avatarstyle) +- [`containerStyle`](#containerstyle) +- [`icon`](#icon) +- [`iconStyle`](#iconstyle) +- [`imageProps`](#imageprops) +- [`onAccessoryPress`](#onaccessorypress) +- [`onLongPress`](#onlongpress) +- [`onPress`](#onpress) +- [`overlayContainerStyle`](#overlaycontainerstyle) +- [`placeholderStyle`](#placeholderstyle) +- [`rounded`](#rounded) +- [`showAccessory`](#showaccessory) +- [`size`](#size) +- [`source`](#source) +- [`title`](#title) +- [`titleStyle`](#titlestyle) +- [`renderPlaceholderContent`](#renderplaceholdercontent) +- [`Component`](#Component) +- [`ImageComponent`](#imagecomponent) + +--- + +## Reference + +### `accessory` + +Icon or Image used as small overlay. +If a `source` key is used in the object, then an Image will be used. + +| Type | Default | +| :--------------------------------------------------------------------: | :---------------------------------------------------------------------------: | +| {[...Icon props](icon.md#props)} or {[...Image props](image.md#props)} | { name: 'mode-edit', type: 'material', color: '#fff', underlayColor: '#000' } | + +--- + +### `activeOpacity` + +Opacity when pressed + +| Type | Default | +| :----: | :-----: | +| number | 0.2 | + +--- + +### `avatarStyle` + +Style for avatar image + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `containerStyle` + +Styling for outer container + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `icon` + +Displays an icon as the main content of the Avatar. **Cannot be used alongside +title**. When used with the `source` prop it will be used as the placeholder. + +| Type | Default | +| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | +| object {name: string, color: string, size: number, type: string (default is material, or choose from [supported icon sets](icon.md#available-icon-sets)), iconStyle: object(style)} | none | + +--- + +### `iconStyle` + +Extra styling for icon component (optional) + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `imageProps` + +Optional properties to pass to the avatar e.g "resizeMode" + +| Type | Default | +| :--------------------------------: | :-----: | +| {[...Image props](image.md#props)} | none | + +--- + +### `onAccessoryPress` + +Callback function when pressing on the accessory + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onLongPress` + +Callback function when long pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onPress` + +Callback function when pressing component + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `overlayContainerStyle` + +Style for the view outside image or icon + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `placeholderStyle` + +Adds style to the placeholder wrapper + +| Type | Default | +| :------------: | :------------------------------: | +| object (style) | `{ backgroundColor: '#BDBDBD' }` | + +--- + +### `rounded` + +Makes the avatar circular + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `showAccessory` + +Shows an accessory over the avatar (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `size` + +Size of the avatar + +| Type | Default | +| :----------------------------------------------------: | :-----: | +| string(`small`, `medium`, `large`, `xlarge`) or number | `small` | + +--- + +### `source` + +Image source + +| Type | Default | +| :----------------------------------------------------------------: | :-----: | +| [ImageSource](https://facebook.github.io/react-native/docs/images) | none | + +--- + +### `title` + +Renders title in the placeholder + +| Type | Default | +| :----: | :-----: | +| string | none | + +--- + +### `titleStyle` + +Style for the title + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `renderPlaceholderContent` + +Custom placeholder element (by default, it's the title) + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | none | + +--- + +### `Component` + +Component for enclosing element (eg: TouchableHighlight, View, etc) + +| Type | Default | +| :------: | :----------------: | +| function | TouchableHighlight | + +--- + +### `ImageComponent` + +Custom ImageComponent for Avatar + +| Type | Default | +| :------------------------: | :-----: | +| React component or element | Image | diff --git a/website/versioned_docs/version-2.0.0/button_group.md b/website/versioned_docs/version-2.0.0/button_group.md new file mode 100644 index 0000000000..866c7d649b --- /dev/null +++ b/website/versioned_docs/version-2.0.0/button_group.md @@ -0,0 +1,296 @@ +--- +id: version-2.0.0-button_group +title: ButtonGroup +original_id: button_group +--- + +ButtonGroup is a linear set of segments, each of which function as a button that +can display a different view. Use a ButtonGroup to offer choices that are +closely related but mutually exclusive. + +![ButtonGroup](/react-native-elements/img/button_group.png) + +## Usage + +### Using strings + +```js +constructor () { + super() + this.state = { + selectedIndex: 2 + } + this.updateIndex = this.updateIndex.bind(this) +} + +updateIndex (selectedIndex) { + this.setState({selectedIndex}) +} + +render () { + const buttons = ['Hello', 'World', 'Buttons'] + const { selectedIndex } = this.state + + return ( + + ) +} +``` + +### Using components + +```js +constructor () { + super() + this.state = { + selectedIndex: 2 + } + this.updateIndex = this.updateIndex.bind(this) +} +updateIndex (selectedIndex) { + this.setState({selectedIndex}) +} + +const component1 = () => Hello +const component2 = () => World +const component3 = () => ButtonGroup + +render () { + const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }] + const { selectedIndex } = this.state + return ( + + ) +} +``` + +--- + +## Props + +> This component inherits +> [all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements](https://facebook.github.io/react-native/docs/touchablehighlight.html), +> along with the following: + +- [`buttonStyle`](#buttonstyle) +- [`buttons`](#buttons) +- [`Component`](#Component) +- [`containerStyle`](#containerstyle) +- [`disabled`](#disabled) +- [`disabledStyle`](#disabledstyle) +- [`disabledTextStyle`](#disabledtextstyle) +- [`disabledSelectedStyle`](#disabledselectedstyle) +- [`disabledSelectedTextStyle`](#disabledselectedtextstyle) +- [`innerBorderStyle`](#innerborderstyle) +- [`onPress`](#onpress) +- [`selectMultiple`](#selectmultiple) +- [`selectedButtonStyle`](#selectedbuttonstyle) +- [`selectedIndex`](#selectedindex) +- [`selectedIndexes`](#selectedindexes) +- [`selectedTextStyle`](#selectedtextstyle) +- [`textStyle`](#textstyle) +- [`underlayColor`](#underlaycolor) +- [`vertical`](#vertical) + +--- + +## Reference + +### `buttonStyle` + +specify styling for button (optional) + +| Type | Default | +| :------------: | :---------------: | +| object (style) | inherited styling | + +--- + +### `buttons` + +array of buttons for component (required), if returning a component, must be an +object with { element: componentName } + +| Type | Default | +| :---: | :-----: | +| array | none | + +--- + +### `Component` + +Choose other button component such as TouchableOpacity (optional) + +| Type | Default | +| :--------------------: | :----------------: | +| React Native Component | TouchableHighlight | + +--- + +### `containerStyle` + +specify styling for main button container (optional) + +| Type | Default | +| :------------: | :---------------: | +| object (style) | inherited styling | + +--- + +### `disabled` + +Controls if buttons are disabled. Setting `true` makes all of them disabled, +while using an array only makes those indices disabled. + +| Type | Default | +| :---------------------: | :-----: | +| boolean **OR** number[] | false | + +--- + +### `disabledStyle` + +Styling for each button when disabled. + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `disabledTextStyle` + +Styling for the text of each button when disabled. + +| Type | Default | +| :-----------------: | :------------: | +| Text style (object) | Internal Style | + +--- + +### `disabledSelectedStyle` + +Styling for each selected button when disabled. + +| Type | Default | +| :-----------------: | :------------: | +| View style (object) | Internal Style | + +--- + +### `disabledSelectedTextStyle` + +Styling for the text of each selected button when disabled. + +| Type | Default | +| :-----------------: | :------------: | +| Text style (object) | Internal Style | + +--- + +### `innerBorderStyle` + +update the styling of the interior border of the list of buttons (optional) + +| Type | Default | +| :---------------------: | :---------------: | +| object { width, color } | inherited styling | + +--- + +### `onPress` + +method to update Button Group Index (required) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `selectMultiple` + +allows the user to select multiple buttons + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `selectedButtonStyle` + +specify styling for selected button (optional) + +| Type | Default | +| :------------: | :---------------: | +| object (style) | inherited styling | + +--- + +### `selectedIndex` + +current selected index of array of buttons (required) + +| Type | Default | +| :----: | :-----: | +| number | none | + +--- + +### `selectedIndexes` + +current selected indexes from the array of buttons + +| Type | Default | +| :------------: | :-----: | +| array (number) | [] | + +--- + +### `selectedTextStyle` + +specify specific styling for text in the selected state (optional) + +| Type | Default | +| :------------: | :---------------: | +| object (style) | inherited styling | + +--- + +### `textStyle` + +specify specific styling for text (optional) + +| Type | Default | +| :------------: | :---------------: | +| object (style) | inherited styling | + +--- + +### `underlayColor` + +specify underlayColor for TouchableHighlight (optional) + +| Type | Default | +| :----: | :-----: | +| string | white | + +--- + +### `vertical` + +Display the ButtonGroup vertically + +| Type | Default | +| :-----: | :-----: | +| boolean | false | diff --git a/website/versioned_docs/version-2.0.0/checkbox.md b/website/versioned_docs/version-2.0.0/checkbox.md new file mode 100644 index 0000000000..e623d08f4e --- /dev/null +++ b/website/versioned_docs/version-2.0.0/checkbox.md @@ -0,0 +1,294 @@ +--- +id: version-2.0.0-checkbox +title: CheckBox +original_id: checkbox +--- + +CheckBoxes allow users to complete tasks that involve making choices such as +selecting options, or switching settings on or off. It provides a clear visual +of either a true or false choice. + +![Checkboxes](/react-native-elements/img/checkbox.png) + +## Usage + +```js +import { CheckBox } from 'react-native-elements' + + + + + + + + + +} + uncheckedIcon={} + checked={this.state.checked} + onPress={() => this.setState({checked: !this.state.checked})} +/> +``` + +--- + +## Props + +- [`iconType`](#icontype) +- [`Component`](#Component) +- [`checked`](#checked) +- [`size`](#size) +- [`iconRight`](#iconright) +- [`right`](#right) +- [`center`](#center) +- [`title`](#title) +- [`titleProps`](#titleprops) +- [`containerStyle`](#containerstyle) +- [`textStyle`](#textstyle) +- [`onLongPress`](#onlongpress) +- [`onLongIconPress`](#onlongiconpress) +- [`onPress`](#onpress) +- [`onIconPress`](#oniconpress) +- [`checkedIcon`](#checkedicon) +- [`uncheckedIcon`](#uncheckedicon) +- [`checkedColor`](#checkedcolor) +- [`uncheckedColor`](#uncheckedcolor) +- [`checkedTitle`](#checkedtitle) +- [`fontFamily`](#fontfamily) + +--- + +## Reference + +### `iconType` + +type of icon set. [Supported sets here](icon.md#available-icon-sets). + +| Type | Default | +| :----: | :----------: | +| string | font-awesome | + +--- + +### `Component` + +Specify React Native component for main button (optional) + +| Type | Default | +| :--------------------: | :--------------: | +| React Native Component | TouchableOpacity | + +--- + +### `checked` + +Flag for checking the icon (required) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `size` + +Size of the checkbox + +| Type | Default | +| :----: | :-----: | +| number | 24 | + +--- + +### `iconRight` + +Moves icon to right of text (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `right` + +Aligns checkbox to right (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `center` + +Aligns checkbox to center (optional) + +| Type | Default | +| :-----: | :-----: | +| boolean | false | + +--- + +### `title` + +Title of checkbox + +| Type | Default | +| :------------------------------: | :-----: | +| string OR React Native Component | none | + +--- + +### `titleProps` + +Additional props for the title Text component (optional) + +| Type | Default | +| :--------------------------------------------------------------------------: | :-----: | +| {[...Text props](https://facebook.github.io/react-native/docs/text#props-1)} | none | + +--- + +### `containerStyle` + +Style of main container (optional) + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `textStyle` + +Style of text (optional) + +| Type | Default | +| :------------: | :-----: | +| object (style) | none | + +--- + +### `onLongPress` + +onLongPress function for checkbox (optional) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onLongIconPress` + +onLongPress function for checkbox (optional) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onPress` + +onPress function for container (optional) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `onIconPress` + +onPress function for checkbox (required) + +| Type | Default | +| :------: | :-----: | +| function | none | + +--- + +### `checkedIcon` + +Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) +(optional) + +| Type | Default | +| :------------------------------: | :------------: | +| string OR React Native Component | check-square-o | + +--- + +### `uncheckedIcon` + +Default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) +(optional) + +| Type | Default | +| :------------------------------: | :------: | +| string OR React Native Component | square-o | + +--- + +### `checkedColor` + +Default checked color (optional) + +| Type | Default | +| :----: | :-----: | +| string | green | + +--- + +### `uncheckedColor` + +Default unchecked color (optional) + +| Type | Default | +| :----: | :-----: | +| string | #bfbfbf | + +--- + +### `checkedTitle` + +Specify a custom checked message (optional) + +| Type | Default | +| :----: | :-----: | +| string | none | + +--- + +### `fontFamily` + +Specify different font family + +| Type | Default | +| :----: | :-----------------------------------------------: | +| string | System font bold (iOS), Sans Serif Bold (android) | diff --git a/website/versioned_docs/version-2.0.0/contributing.md b/website/versioned_docs/version-2.0.0/contributing.md new file mode 100644 index 0000000000..5ca45a9524 --- /dev/null +++ b/website/versioned_docs/version-2.0.0/contributing.md @@ -0,0 +1,192 @@ +--- +id: version-2.0.0-contributing +title: Contributing +original_id: contributing +--- + +Thanks for taking the time to checkout this project and being willing to +contribute! + +Here are some of some of ways you can help: + +- [Reporting Bugs](#reporting-bugs) +- [Suggesting a Feature](#suggesting-a-feature) +- [Responding to Issues](#responding-to-issues) +- [Improving the Documentation](#improving-the-documentation) +- [Implementing Bug Fixes and Improvements](#implementing-bug-fixes-and-improvements) + +## Reporting Bugs + +React Native Elements is used by many people, in fact they're over 9000 persons +using it in their projects. With that many use cases, bugs are sure to come up +from time to time. We release almost every two weeks, so sometimes we may +accidentally miss something along the way. When you think you've found a bug +here's what to do: + +1. Check your version. Most of the time, a fix has been made and released in new + a new version. However, you may still be on an old version. The easiest way + to validate this, it to update your version of react-native-elements to the + latest. + +2. Search the existing + [issues](https://github.com/react-native-elements/react-native-elements/issues) + and + [pull requests](https://github.com/react-native-elements/react-native-elements/pulls) + for one like what you're seeing. If you see one, add a đź‘Ť reaction (please no + +1 comments). Read through the comments and see if you can provide anymore + valuable information to the thread. The more use cases we have, the easier it + is to solve the issue. + +3. If there are no other issues like yours then create a new one. New issues + come with a issue template, so make sure to fill out as much information as + possible. + +If this is your first open source contribution, please take a look at +[this](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) +guide. + +## Suggesting a feature + +Have a cool idea for a component? Think you can implement an existing feature +better? Go ahead and open and issue, describe what you want to accomplish and +lastly, why you think React Native Elements would benefit from it. + +A few things to consider/add: + +- As clearly as possible, attach screenshots, concepts of how this feature + should behave +- Do you have any thoughts on how to implement this feature? Have you done + something similar already? +- Hold off on submitting feature pull requests until the feature has been + discussed. Once the feature has been established and agreed upon, create the + pull request. + +## Responding to Issues + +When someone posts an issue, a maintainer might not be able to respond right +away. Or a person may post and issue that has incomplete information. As a +contributor you can help by answering the issue yourself if you know the cause +of it, or help the maintainers by making sure that all the information necessary +to validate the issue is there. + +## Improving the Documentation + +Our documentation is built with an open-source tool called +[Docusaurus](https://docusaurus.io). It has a ton of great features, the most +important being versioning - which allows us to have documentation for every +version we release. + +The easiest way to contribute to a particular doc is through the Edit button on +the page. It'll take you directly to the exact file for that page on the repo. + +Since all documents are versioned, it might be bit tricky to find which file +needs changing. You can use the rule below to figure out which file you need to +edit. + +- [Changes for an existing doc on a version not yet released](#changes-for-an-existing-doc-on-a-version-not-yet-released) +- [Adding documentation for a new component](#adding-documentation-for-a-new-component) +- [Rewording, adding missed info, or making a typo for a released version](#rewording-adding-missed-info-or-making-a-typo-for-a-released-version) +- [Editing an existing page that's not docs or components](#editing-an-existing-page-that-s-not-docs-or-components) +- [Editing a document that appears the same in all versions](#editing-a-document-that-appears-the-same-in-all-versions) + +### Changes for an existing doc on a version not yet released + +These files are located in the `/docs` folder. So if I wanted to add a new prop +on the Avatar component, I'll need to document that in `/docs/avatar.md`. + +### Adding documentation for a new component + +You'll be creating your `.md` file in the `/docs` folder. Be sure to fill out +the header at the top of the file: + +``` +--- +id: my-component +title: My Component +--- +``` + +Lastly you'll need to add it to sidebar. This sidebar file is +`/website/sidebars.json`. Then add the `id` from the document we just created +into one of the sidebars. + +### Rewording, adding missed info, or making a typo for a released version + +These files are located in:
+`/website/versioned_docs/version-{version_name}/{file-name}`.
The last +directory will differ depending on what version you are submitting docs for. + +> Docusaurus only creates new versions of files if the `original` document in +> the `/docs` folder has changed since a release was made. + +If I added docs for `Avatar.md` and it was our ever first release say `0.19.0`, +when releasing that version it'll create +`/website/versioned_docs/version-0.19.0/avatar.md`. + +Now if I go to release `0.20.0` and didn't change `/docs/Avatar.md`, then +they'll be **no** `/website/versioned_docs/version-0.20.0/avatar.md`. Docusaurus +will simply point to the old version from `0.19.0`. + +### Editing an existing page that's not docs or components + +These files are located in: `/website/pages/en/`. + +### Editing a document that appears the same in all versions + +This one is particularly the most complicated and requires a bit of duplication. + +Let's say we want edit the `Getting Started` doc. We want this document to be +the same for all versions. Firstly we'll need to make edits to +`/docs/getting_started.md` so it's available in future versions. Secondly we'll +need to duplicate those changes in +`/website/versioned_docs/version-{version-number}/getting_started.md`. + +We'll only need to make this change to the **first set of versioned docs**. In +our case `/website/versioned_docs/version-0.19.0/getting_started.md`. + +Be sure to check out the documentation over at +[docusaurus.io](https://docusaurus.io) if you have any other queries. + +## Implementing Bug Fixes and Improvements + +If you wish to submit a pull request for a new feature or issue then this is +guide for you. On Github, we extensively use labels to reflect the content and +status of issues. + +For all issues that are bugs check +[here](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22%3Aboom%3A++Bug%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22). + +Improvements are separated into two categories: + +- [New components](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22💡New+Component%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22+) +- [Enhancements](https://github.com/react-native-elements/react-native-elements/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3A%22✨Enhancement%22+-label%3A%22✅+Fixed+-+Next+Release%22+-label%3A%22📥+PR+Submitted%22) + +Check out the [Labels guide](labels.md) for a more descriptive info on our usage +of labels. + +--- + +To begin you should start by forking this repository first. This should get you +setup on your local machine: + +### Setup + +- Install [Node.js](https://nodejs.org/) if you have not already. (_We suggest + you to use node v6.x.x_) +- Fork the **react-native-elements** repo + [here](https://github.com/react-native-elements/react-native-elements) +- `git clone && cd react-native-elements` +- `yarn install` OR `npm install` +- `npm test` + +Now create a new branch with a name that loosely describes +the issue on which you will be working. Once you think you have addressed +the issue in question, submit a pull request to the `next` branch. + +### Committing and Pushing Changes + +We like to provide informative and useful commit messages when pushing changes +to the repo. This helps tremendously when sifting through the commit history to +find a particular changeset. A useful guide for creating meaningful commit +messages can be found +[here.](https://www.conventionalcommits.org/en/v1.0.0-beta.2/#specification) diff --git a/website/versioned_docs/version-2.0.0/customization.md b/website/versioned_docs/version-2.0.0/customization.md new file mode 100644 index 0000000000..d35f077479 --- /dev/null +++ b/website/versioned_docs/version-2.0.0/customization.md @@ -0,0 +1,399 @@ +--- +id: version-2.0.0-customization +title: Customization +original_id: customization +--- + +Congrats! You've installed React Native Elements and your immediate question +goes something like this: + +> So umm, how do I change how it looks? + +Great question! A UI Kit wouldn't be that useful if the apps everyone built +looked the same right? For this case React Native Elements provide a number of +props on each component to enable you to style them how you want. + +## Component Styles + +_Every_ component from React Native Elements has a container around it. The +container is just a traditional `` from react native that has some +styling on it. This default styling prevents components from colliding with each +other. If you want to change how two components react to each on the screen your +first stop should be the `containerStyle` prop. + +Similar to `containerStyle`, components may provide their custom style props +like `buttonStyle`, `titleStyle` etc. Always refer to the documentation for the +component to find out which style props it provides. + +## Theming + +While component styles are great for single use, you may want to have the same +styling for every instance of a component. For example, you may want all your +buttons to be blue or have the same font. Here are some ways to reuse styles +with React Native Elements. + +### Using Composition + +With this approach, we create one component with the styles we want and use that +instead of the built-in component. + +```jsx +import React from 'react'; +import { Button } from 'react-native-elements'; + +const RaisedButton = props =>