Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: flyingcircle/react-native-elements
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 0.8.2
Choose a base ref
...
head repository: flyingcircle/react-native-elements
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 0.9.0
Choose a head ref

Commits on Dec 24, 2016

  1. ListItem subtitle can now render objects

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    e593a3b View commit details
  2. added docu for custom ListItem subtitle object to readme

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    e92423f View commit details
  3. exporting rn-sidemenu component instead of custom written

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    122f1cb View commit details
  4. added SideMenu props to readme

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    9397fb7 View commit details
  5. fixed table styling on readme

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    27c3501 View commit details
  6. styling tweaks on readme

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    198f009 View commit details
  7. added default values for sidemenu props on reademe

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    a337f27 View commit details
  8. added default values- missed 1

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    0ad11fb View commit details
  9. added message for Tab Bar issues

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    89a3c23 View commit details
  10. fixed marginLeft issue for ListItem

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    6805968 View commit details
  11. missing , in styles

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    1972d8b View commit details
  12. updated ListItem reademe

    Monte Thakkar committed Dec 24, 2016
    Copy the full SHA
    ade5549 View commit details

Commits on Dec 27, 2016

  1. Added Grid Component

    binoy14 committed Dec 27, 2016
    Copy the full SHA
    93cfa62 View commit details
  2. Copy the full SHA
    876d6e1 View commit details
  3. Fixed code styling

    binoy14 committed Dec 27, 2016
    Copy the full SHA
    7a7c628 View commit details
  4. Copy the full SHA
    ecabfd2 View commit details

Commits on Dec 28, 2016

  1. added slider from react-native-slider

    Monte Thakkar committed Dec 28, 2016
    Copy the full SHA
    6b69c9c View commit details
  2. slider refactored; stable working condition

    Monte Thakkar committed Dec 28, 2016
    Copy the full SHA
    9747e91 View commit details

Commits on Dec 29, 2016

  1. Copy the full SHA
    83c6053 View commit details
  2. Fix: Defaulting to small broke some props

    `!large ...` conditional placement was ignoring fontSize and buttonStyles props
    mcnamee authored Dec 29, 2016
    Copy the full SHA
    2342aae View commit details

Commits on Dec 31, 2016

  1. Merge pull request react-native-elements#131 from mcnamee/master

    Fix: Button - Defaulting to small broke some props
    dabit3 authored Dec 31, 2016
    Copy the full SHA
    66a0f74 View commit details
  2. Copy the full SHA
    919f38c View commit details

Commits on Jan 1, 2017

  1. removed console.log on slider.js; need to test it

    Monte Thakkar committed Jan 1, 2017
    Copy the full SHA
    1dfcdf8 View commit details
  2. Copy the full SHA
    79d0d98 View commit details
  3. updated readme with screenshot for slider

    Monte Thakkar committed Jan 1, 2017
    Copy the full SHA
    2675ba6 View commit details
  4. updated screenshot link

    Monte Thakkar committed Jan 1, 2017
    Copy the full SHA
    b335be6 View commit details
  5. updated Readme

    Monte Thakkar committed Jan 1, 2017
    Copy the full SHA
    204abb5 View commit details

Commits on Jan 3, 2017

  1. Copy the full SHA
    3f7753b View commit details
  2. Version bump to 0.9.0

    dabit3 committed Jan 3, 2017
    Copy the full SHA
    535a6d1 View commit details
Showing with 937 additions and 98 deletions.
  1. BIN .DS_Store
  2. +229 −25 Readme.MD
  3. +2 −1 package.json
  4. +2 −2 src/buttons/Button.js
  5. +46 −0 src/grid/Col.js
  6. +66 −0 src/grid/Grid.js
  7. +46 −0 src/grid/Row.js
  8. +6 −0 src/index.js
  9. +7 −3 src/list/ListItem.js
  10. +1 −67 src/sidemenu/SideMenu.js
  11. +532 −0 src/slider/Slider.js
  12. BIN src/slider/slider_screenshot.png
Binary file removed .DS_Store
Binary file not shown.
254 changes: 229 additions & 25 deletions Readme.MD
Original file line number Diff line number Diff line change
@@ -55,16 +55,16 @@ import {
- [x] HTML style headings (h1, h2, etc...)
- [x] [Card component](https://github.com/react-native-community/react-native-elements#card)
- [x] [Pricing Component](https://github.com/react-native-community/react-native-elements#pricing-component)
- [x] [Grid Component](https://github.com/react-native-community/react-native-elements#grid-component)
- [x] [Slider Component](https://github.com/react-native-community/react-native-elements#slider-component)

## Roadmap
- [ ] Add radio buttons
- [ ] Searchable Drop Down similar to [Bootstrap-3-Typehead](https://github.com/bassjobsen/Bootstrap-3-Typeahead)
- [ ] [Swipeable List Item component](https://github.com/jemise111/react-native-swipe-list-view)
- [ ] Add icons to TextInputs
- [ ] Profile Component `in progress`
- [ ] Add grid component `in progress`
- [ ] Custom Picker
- [ ] Side Menu Improvements
- [ ] Something you's like to see? Submit an [issue](https://github.com/dabit3/react-native-elements/issues) or a [pull request](https://github.com/dabit3/react-native-elements/pulls)

## Examples
@@ -411,6 +411,47 @@ render () {

```

#### ListItem implemented with custom View for Subtitle

```js
import { List, ListItem } from 'react-native-elements'

render () {
return (
<List>
<ListItem
roundAvatar
title='Limited supply! Its like digital gold!'
subtitle={
<View style={styles.subtitleView}>
<Image source={require('../images/rating.png')} style={styles.ratingImage}/>
<Text style={styles.ratingText}>5 months ago</Text>
</View>
}
avatar={require('../images/avatar1.jpg')}
/>
</List>
)
}

styles = StyleSheet.create({
subtitleView: {
flexDirection: 'row',
paddingLeft: 10,
paddingTop: 5
},
ratingImage: {
height: 19.21,
width: 100
},
ratingText: {
paddingLeft: 10,
color: 'grey'
}
})

```

#### List Props

| prop | default | type | description |
@@ -433,7 +474,7 @@ render () {
| onPress | none | function | onPress method for link (optional) |
| onLongPress | none | function | onLongPress method for link (optional) |
| roundAvatar | false | boolean | make left avatar round |
| subtitle | none | string | subtitle text (optional) |
| subtitle | none | string or object | subtitle text or custom view (optional) |
| subtitleContainerStyle | none | style (object) | provide styling for subtitle container |
| subtitleStyle | none | object (style) | additional subtitle styling (optional ) |
| title | none | string | main title for list item (required) |
@@ -462,7 +503,7 @@ Example badge usage
badge={{ value: 3, badgeTextStyle: { color: 'orange' }, badgeContainerStyle: { marginTop: -20 } }}
/>
<ListItem
<ListItem
...
badge={{ element: <MyCustomElement> }}
/>
@@ -474,44 +515,50 @@ Example badge usage

![Side Menu](http://i.imgur.com/cjIcRl6.gif)

> This component implements [react-native-side-menu](https://github.com/react-native-community/react-native-side-menu) which is part of the [react-native-community](https://github.com/react-native-community).
```js
import { SideMenu, List, ListItem } from 'react-native-elements'

constructor () {
super()
this.state = { toggled: false }
this.state = {
isOpen: false
}
this.toggleSideMenu = this.toggleSideMenu.bind(this)
}

toggleSideMenu () {
this.setState({
toggled: !this.state.toggled
isOpen: !this.state.isOpen
})
}

render () {
// SideMenu takes a React Native element as a prop for the actual Side Menu
const MenuComponent = (
<View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
<List containerStyle={{marginBottom: 20}}>
{
list.map((item, i) => (
list.map((l, i) => (
<ListItem
roundAvatar
onPress={() => console.log('something')}
avatar={{uri:item.avatar_url}}
onPress={() => console.log('Pressed')}
avatar={l.avatar_url}
key={i}
title={item.name}
subtitle={item.subtitle} />
title={l.name}
subtitle={l.subtitle}
/>
))
}
</List>
</View>
)

return (
<SideMenu
MenuComponent={MenuComponent}
toggled={this.state.toggled}>
<App />
isOpen={this.state.isOpen}
menu={MenuComponent}>
<App toggleSideMenu={this.toggleSideMenu.bind(this)} />
</SideMenu>
)
}
@@ -522,13 +569,23 @@ render () {

| prop | default | type | description |
| ---- | ---- | ----| ---- |
| toggled | false | boolean | toggles side menu when true (required) |
| toggledContainerStyle | none | object (style) | toggled state menu styling |
| easing | Easing.inout | Easing method | specifies different easing method (optional) |
| duration | 250 | animation length | specifies length of animation (optional) |
| menuWidth | window width - 80 | number | the width and offset of the menu (optional) |
| MenuComponent | none | React Native Component | the actual side menu component you would like to use (required) |
| children | none | React Native Component | wrap RNSideMenu around the component you would like to animate (required) |
| menu | inherited | React.Component | Menu component |
| isOpen |false | Boolean | Props driven control over menu open state |
| openMenuOffset | 2/3 of device screen width | Number | Content view left margin if menu is opened |
| hiddenMenuOffset | none | Number | Content view left margin if menu is hidden |
| edgeHitWidth | none | Number | Edge distance on content view to open side menu, defaults to 60 |
| toleranceX | none | Number | X axis tolerance |
| toleranceY | none | Number | Y axis tolerance |
| disableGestures | false | Bool | Disable whether the menu can be opened with gestures or not |
| onStartShould <br /> SetResponderCapture | none | Function | Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details |
| onChange | none | Function | Callback on menu open/close. Is passed isOpen as an argument |
| onMove | none | Function | Callback on menu move. Is passed left as an argument |
| menuPosition | left | String | either 'left' or 'right' |
| animationFunction | none | (Function -> Object) | Function that accept 2 arguments (prop, value) and return an object: <br /> - `prop` you should use at the place you specify parameter to animate <br /> - `value` you should use to specify the final value of prop |
| animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object: <br /> - `value` you should use at the place you need current value of animated parameter (left offset of content view) |
| bounceBackOnOverdraw | true | boolean | when true, content view will bounce back to openMenuOffset when dragged further |

> For issues or feature requests related to SideMenu component please click [here](https://github.com/react-native-community/react-native-side-menu/issues)
## Search Bar

@@ -583,7 +640,6 @@ import { SearchBar } from 'react-native-elements'
> This component implements the [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) from [Exponent](https://getexponent.com/). Check out [Exponent](https://getexponent.com/) if you haven't already!
```js

import { Tabs, Tab, Icon } from 'react-native-elements'

changeTab (selectedTab) {
@@ -618,8 +674,6 @@ const { selectedTab } = this.state
/* ... more tabs here */
</Tabs>

styles = { /* some custom styles /* }
```

### Tabs Props
@@ -647,6 +701,8 @@ styles = { /* some custom styles /* }
| onPress | none | function | onPress method for Item |
| allowFontScaling | false | boolean | allow font scaling for title |

> For issues or feature requests related to Tab Bar component please click [here](https://github.com/exponentjs/react-native-tab-navigator/issues)
## ButtonGroup

![ButtonGroup](http://i.imgur.com/uBJbULr.png)
@@ -945,3 +1001,151 @@ import { PricingCard } from 'react-native-elements'
| pricingFont | System font (font weight 700) (iOS), Roboto-Bold (android) | string | specify pricing font family |
| infoFont | System font bold (iOS), Roboto-Bold (android) | string | specify pricing information font family |
| buttonFont | System font (iOS), Roboto (android) | string | specify button font family |
## Grid Component
The Grid component provides two types of layouts, Row and Column.
#### Row
<img src="http://i.imgur.com/1e8W6j6.png" width="300" >
```js
import {Grid, Row} from 'react-native-elements';

<Grid>
<Row></Row>
<Row></Row>
</Grid>
```
#### Column
<img src="http://i.imgur.com/MWIBLKk.png" width="300" >
```js
import {Grid, Col} from 'react-native-elements';

<Grid>
<Col></Col>
<Col></Col>
</Grid>
```
Creating nested layout
<table width="100" height="100">
<tr>
<td rowspan="2" width="50">1</td>
<td width="50" height="50">2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<img src="http://i.imgur.com/PZ4vR6z.png" width="300" >
```js
import {Grid, Col, Row} from 'react-native-elements';

<Grid>
<Col></Col>
<Col>
<Row></Row>
<Row></Row>
</Col>
</Grid>
```
#### Using the size prop
A ratio can be passed to the Size Prop
<img src="https://i.imgur.com/xYDQ3XV.png" width="300" >
```js
<Grid>
<Row size={3}></Row>
<Row size={1}></Row>
</Grid>
```
<img src="http://i.imgur.com/34nfZtP.png" width="300" >
```js
<Grid>
<Col size={75}></Col>
<Col size={25}></Col>
</Grid>
```
#### GridComponent Props
| prop | default | type | description |
| ---- | ---- | ----| ---- |
| style | none | object (style) | Outer grid styling (optional) |
| onPress | none | function | onPress method (optional) |
| activeOpacity | 1 | number | Opacity on pressing (optional) |
#### ColComponent Props
| props | default | type | description |
| ---- | ---- | ---- | ---- |
| style | none | object (style) | Styling for the outer column (optional) |
| size | none | number | Size for column (optional) |
| onPress | none | function | onPress method (optional) |
| activeOpacity | 1 | number | Opacity on pressing (optional) |
#### RowComponent Props
| props | default | type | description |
| ---- | ---- | ---- | ---- |
| style | none | object (style) | Styling for the outer column (optional) |
| size | none | number | Size for row (optional) |
| onPress | none | function | onPress method (optional) |
| activeOpacity | 1 | number | Opacity on pressing (optional) |
## Slider Component
![Slider Component](https://github.com/react-native-community/react-native-elements/blob/v0.9.0/src/slider/slider_screenshot.png)
A pure JavaScript <Slider> component for react-native. It is a drop-in replacement for Slider.
> This component is a forked implementation of [react-native-slider](https://github.com/jeanregisser/react-native-slider). Also note that due to the nature of the platform, and the existence of breaking changes between React Native releases, this implementation currently only supports v0.26.0+
```js
import { Slider } from 'react-native-elements'

<View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
<Slider
value={this.state.value}
onValueChange={(value) => this.setState({value})} />
<Text>Value: {this.state.value}</Text>
</View>

```
## Slider Props
prop | type | optional | default | description
--------------------- | -------- | -------- | ------------------------- | -----------
value | number | Yes | 0 | Initial value of the slider
disabled | bool | Yes | false | If true the user won't be able to move the slider
minimumValue | number | Yes | 0 | Initial minimum value of the slider
maximumValue | number | Yes | 1 | Initial maximum value of the slider
step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button
maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button
thumbTintColor | string | Yes | '#343434' | The color used for the thumb
thumbTouchSize | object | Yes | `{width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.
onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider
onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed)
onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released)
style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container
trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track
thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb
debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green.
animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation
animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).
animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html).
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-elements",
"version": "0.8.2",
"version": "0.9.0",
"description": "React Native Elements & UI Toolkit",
"main": "src/index.js",
"repository": {
@@ -23,6 +23,7 @@
},
"homepage": "https://github.com/dabit3/React-Native-Elements#readme",
"dependencies": {
"react-native-side-menu": "^0.20.1",
"react-native-tab-navigator": "^0.3.3"
}
}
4 changes: 2 additions & 2 deletions src/buttons/Button.js
Original file line number Diff line number Diff line change
@@ -123,9 +123,9 @@ const Button = ({
primary2 && {backgroundColor: colors.primary2},
backgroundColor && {backgroundColor: backgroundColor},
borderRadius && {borderRadius},
buttonStyle && buttonStyle,
raised && styles.raised,
!large && styles.small,
buttonStyle && buttonStyle,
disabled && {backgroundColor: colors.disabled}
]}
>
@@ -139,8 +139,8 @@ const Button = ({
style={[
styles.text,
color && {color},
fontSize && {fontSize},
!large && styles.smallFont,
fontSize && {fontSize},
textStyle && textStyle,
fontWeight && {fontWeight},
fontFamily && {fontFamily}
Loading