├── .nojekyll ├── .npmrc ├── examples ├── app │ ├── .watchmanconfig │ ├── .gitignore │ ├── assets │ │ ├── icon.png │ │ ├── splash.png │ │ └── fonts │ │ │ └── SpaceMono-Regular.ttf │ ├── .babelrc │ ├── package.json │ ├── app.json │ ├── screens │ │ ├── ProviderScreen.js │ │ ├── BoxScreen.js │ │ ├── RelativeScreen.js │ │ ├── HideScreen.js │ │ ├── AbsoluteScreen.js │ │ ├── TruncateScreen.js │ │ ├── SmallScreen.js │ │ ├── LeadScreen.js │ │ ├── CapsScreen.js │ │ ├── SubheadScreen.js │ │ ├── ButtonOutlineScreen.js │ │ ├── ButtonTransparentScreen.js │ │ ├── MeasureScreen.js │ │ ├── TabsScreen.js │ │ ├── CircleScreen.js │ │ ├── FlexScreen.js │ │ ├── DrawerScreen.js │ │ ├── TabScreen.js │ │ ├── ArrowScreen.js │ │ ├── CloseScreen.js │ │ ├── ContainerScreen.js │ │ ├── ButtonCircleScreen.js │ │ ├── RowScreen.js │ │ ├── ColumnScreen.js │ │ ├── BlockquoteScreen.js │ │ ├── ProgressScreen.js │ │ ├── PreScreen.js │ │ ├── DividerScreen.js │ │ ├── ImageScreen.js │ │ └── BadgeScreen.js │ ├── App.js │ └── RootStack.js ├── jsx │ ├── Close.jsx │ ├── Caps.jsx.js │ ├── Arrow.jsx │ ├── Circle.jsx │ ├── Lead.jsx │ ├── Small.jsx │ ├── Button.jsx │ ├── Code.jsx │ ├── Heading.jsx │ ├── Label.jsx │ ├── Message.jsx │ ├── Progress.jsx │ ├── Subhead.jsx │ ├── Container.jsx │ ├── Tab.jsx │ ├── Border.jsx │ ├── ButtonCircle.jsx │ ├── Pre.jsx │ ├── ButtonOutline.jsx │ ├── Divider.jsx │ ├── Dot.jsx │ ├── .DS_Store │ ├── Row.jsx │ ├── Badge.jsx │ ├── Text.jsx │ ├── Donut.jsx │ ├── ButtonTransparent.jsx │ ├── Position.jsx │ ├── Box.jsx │ ├── Column.jsx │ ├── Absolute.jsx │ ├── Banner.jsx │ ├── Avatar.jsx │ ├── Tabs.jsx │ ├── Image.jsx │ ├── Blockquote.jsx │ ├── Drawer.jsx │ ├── Modal.jsx │ ├── Flex.jsx │ ├── Card.jsx │ ├── Hide.jsx │ ├── Measure.jsx │ ├── Truncate.jsx │ └── Panel.jsx └── .DS_Store ├── docs ├── _scope.js ├── components │ ├── Provider.md │ ├── Relative.md │ ├── Box.md │ ├── Caps.md │ ├── Lead.md │ ├── Small.md │ ├── Absolute.md │ ├── Subhead.md │ ├── ButtonOutline.md │ ├── Hide.md │ ├── Circle.md │ ├── ButtonTransparent.md │ ├── Tabs.md │ ├── Arrow.md │ ├── Truncate.md │ ├── Drawer.md │ ├── Flex.md │ ├── Close.md │ ├── Progress.md │ ├── Tab.md │ ├── Container.md │ ├── Pre.md │ ├── Measure.md │ ├── ButtonCircle.md │ ├── Row.md │ ├── Divider.md │ ├── Column.md │ ├── Label.md │ ├── Border.md │ ├── Code.md │ ├── Badge.md │ ├── Message.md │ ├── Heading.md │ ├── Blockquote.md │ ├── Avatar.md │ ├── Position.md │ ├── Text.md │ ├── Image.md │ ├── Button.md │ ├── Dot.md │ ├── Card.md │ ├── Banner.md │ ├── Modal.md │ └── Panel.md ├── _constants.js ├── extending.md ├── colors.js ├── getting-started.md ├── theming.md ├── _app.js └── props.md ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── src ├── Lead.js ├── Subhead.js ├── Row.js ├── Small.js ├── Column.js ├── ButtonCircle.js ├── Code.js ├── Container.js ├── Border.js ├── Circle.js ├── Label.js ├── Tabs.js ├── ButtonTransparent.js ├── Text.js ├── Image.js ├── Close.js ├── Divider.js ├── Blockquote.js ├── Truncate.js ├── Pre.js ├── Avatar.js ├── Caps.js ├── ButtonOutline.js ├── Card.js ├── Measure.js ├── Banner.js ├── Dot.js ├── Position.js ├── Provider.js ├── Modal.js ├── Box.js ├── Badge.js ├── Heading.js ├── Panel.js ├── Arrow.js ├── Hide.js ├── Progress.js ├── Message.js ├── Tab.js ├── theme.js ├── colors.js ├── Button.js ├── Drawer.js └── index.js ├── .travis.yml ├── .github ├── CONTRIBUTING.md └── LICENSE.md ├── .babelrc ├── CHANGELOG.md ├── package.json └── README.md /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /examples/app/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/jsx/Close.jsx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/_scope.js: -------------------------------------------------------------------------------- 1 | export * from '../src' 2 | -------------------------------------------------------------------------------- /examples/jsx/Caps.jsx.js: -------------------------------------------------------------------------------- 1 | Hello 2 | -------------------------------------------------------------------------------- /examples/jsx/Arrow.jsx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/jsx/Circle.jsx: -------------------------------------------------------------------------------- 1 | 2 | A 3 | 4 | -------------------------------------------------------------------------------- /examples/jsx/Lead.jsx: -------------------------------------------------------------------------------- 1 | 2 | Hello Lead 3 | 4 | -------------------------------------------------------------------------------- /examples/jsx/Small.jsx: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/jsx/Button.jsx: -------------------------------------------------------------------------------- 1 | 45 | 46 | ) 47 | ``` 48 | 49 | ## Features 50 | 51 | - Kickstart your own react-native component library 52 | - Responsive style props from [styled-system][system] 53 | - Flexbox grid with [native-grid-styled][gs] 54 | - Support for [styled-components][sc] 55 | - Functional stateless UI components 56 | - Configurable theming 57 | - Extensible base components 58 | - Design-system based consistency 59 | - Built for responsive web design 60 | 61 | ## Documentation 62 | 63 | - [Docs](https://hermanya.github.io/rebass-native) 64 | - [Getting Started](https://hermanya.github.io/rebass-native/getting-started) 65 | - [Props](https://hermanya.github.io/rebass-native/props) 66 | - [Grid System](https://hermanya.github.io/rebass-native/grid-system) 67 | - [Theming](https://hermanya.github.io/rebass-native/theming) 68 | - [Extending](https://hermanya.github.io/rebass-native/extending) 69 | - [Components](https://hermanya.github.io/rebass-native/components) 70 | 71 | ## CodeSandbox 72 | 73 | Try it out: 74 | 75 | https://snack.expo.io/@git/github.com/hermanya/rebass-native:examples/app 76 | 77 | ### Architectural Approach 78 | 79 | Rebass is built around a component architectural approach inspired by Dan Abramov’s 80 | [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963), 81 | where presentational components are the only ones that encapsulate styles and contain no application logic, 82 | and container components do not contain any styles or DOM markup and handle all the application logic. 83 | 84 | Rebass only contains presentational components, 85 | which means controlling things like progressive disclosure mechanisms 86 | or dropdown menus should be handled at a higher level in container components. 87 | Therefore, Rebass itself does not require any client-side JavaScript, 88 | is well suited to server-side rendering, 89 | and can fit into virtually any higher level application architecture. 90 | 91 | See [Patterns for Style Composition in React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/) 92 | for more on some of the thought behind Rebass. 93 | 94 | 95 | ### Related 96 | 97 | - [styled-system][system] 98 | - [native-grid-styled][gs] 99 | - [styled-components][sc] 100 | 101 | [system]: https://github.com/jxnblk/styled-system 102 | [gs]: https://github.com/hermanya/native-grid-styled 103 | [sc]: https://github.com/styled-components/styled-components 104 | 105 | --- 106 | 107 | [Contributing](.github/CONTRIBUTING.md) 108 | | 109 | [MIT License](.github/LICENSE.md) 110 | -------------------------------------------------------------------------------- /examples/app/screens/TabScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class TabScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Tab', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | Hello 17 | 18 | 19 | 20 | 21 | Code 22 | {` 23 | Hello 24 | 25 | `} 26 | 27 | Inheritance 28 | { 29 | this.props.navigation.navigate('TabHelperScreen') 30 | }}>TabHelper 31 | 32 | Props 33 | 34 | 35 | 36 | prop 37 | 38 | 39 | default 40 | 41 | 42 | theme key 43 | 44 | 45 | 46 | m 47 | 48 | space 49 | 50 | 51 | mt 52 | 53 | space 54 | 55 | 56 | mr 57 | 3 58 | space 59 | 60 | 61 | mb 62 | 63 | space 64 | 65 | 66 | ml 67 | 68 | space 69 | 70 | 71 | mx 72 | 73 | space 74 | 75 | 76 | my 77 | 78 | space 79 | 80 | 81 | p 82 | 83 | space 84 | 85 | 86 | pt 87 | 88 | space 89 | 90 | 91 | pr 92 | 93 | space 94 | 95 | 96 | pb 97 | 98 | space 99 | 100 | 101 | pl 102 | 103 | space 104 | 105 | 106 | px 107 | 108 | space 109 | 110 | 111 | py 112 | 2 113 | space 114 | 115 | 116 | borderColor 117 | transparent 118 | colors 119 | 120 | 121 | 122 | ) 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /examples/app/screens/ArrowScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class ArrowScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Arrow', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | 17 | 18 | 19 | Code 20 | {` 21 | `} 22 | 23 | Inheritance 24 | 25 | 26 | Props 27 | 28 | 29 | 30 | prop 31 | 32 | 33 | default 34 | 35 | 36 | theme key 37 | 38 | 39 | 40 | m 41 | 42 | space 43 | 44 | 45 | mt 46 | 47 | space 48 | 49 | 50 | mr 51 | 52 | space 53 | 54 | 55 | mb 56 | 57 | space 58 | 59 | 60 | ml 61 | 62 | space 63 | 64 | 65 | mx 66 | 67 | space 68 | 69 | 70 | my 71 | 72 | space 73 | 74 | 75 | p 76 | 77 | space 78 | 79 | 80 | pt 81 | 82 | space 83 | 84 | 85 | pr 86 | 87 | space 88 | 89 | 90 | pb 91 | 92 | space 93 | 94 | 95 | pl 96 | 97 | space 98 | 99 | 100 | px 101 | 102 | space 103 | 104 | 105 | py 106 | 107 | space 108 | 109 | 110 | color 111 | 112 | colors 113 | 114 | 115 | bg 116 | 117 | colors 118 | 119 | 120 | 121 | ) 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /examples/app/screens/CloseScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class CloseScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Close', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | 17 | 18 | 19 | Code 20 | {` 21 | `} 22 | 23 | Inheritance 24 | { 25 | this.props.navigation.navigate('ButtonTransparentScreen') 26 | }}>ButtonTransparent → { 27 | this.props.navigation.navigate('ButtonScreen') 28 | }}>Button → { 29 | this.props.navigation.navigate('BoxScreen') 30 | }}>Box 31 | 32 | Props 33 | 34 | 35 | 36 | prop 37 | 38 | 39 | default 40 | 41 | 42 | theme key 43 | 44 | 45 | 46 | m 47 | 48 | space 49 | 50 | 51 | mt 52 | 53 | space 54 | 55 | 56 | mr 57 | 58 | space 59 | 60 | 61 | mb 62 | 63 | space 64 | 65 | 66 | ml 67 | 68 | space 69 | 70 | 71 | mx 72 | 73 | space 74 | 75 | 76 | my 77 | 78 | space 79 | 80 | 81 | p 82 | 83 | space 84 | 85 | 86 | pt 87 | 88 | space 89 | 90 | 91 | pr 92 | 93 | space 94 | 95 | 96 | pb 97 | 98 | space 99 | 100 | 101 | pl 102 | 103 | space 104 | 105 | 106 | px 107 | 3 108 | space 109 | 110 | 111 | py 112 | 2 113 | space 114 | 115 | 116 | 117 | ) 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /examples/app/screens/ContainerScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class ContainerScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Container', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | Hello 17 | 18 | 19 | 20 | 21 | Code 22 | {` 23 | Hello 24 | 25 | `} 26 | 27 | Inheritance 28 | { 29 | this.props.navigation.navigate('BoxScreen') 30 | }}>Box → { 31 | this.props.navigation.navigate('BoxScreen') 32 | }}>Box 33 | 34 | Props 35 | 36 | 37 | 38 | prop 39 | 40 | 41 | default 42 | 43 | 44 | theme key 45 | 46 | 47 | 48 | m 49 | 50 | space 51 | 52 | 53 | mt 54 | 55 | space 56 | 57 | 58 | mr 59 | 60 | space 61 | 62 | 63 | mb 64 | 65 | space 66 | 67 | 68 | ml 69 | 70 | space 71 | 72 | 73 | mx 74 | auto 75 | space 76 | 77 | 78 | my 79 | 80 | space 81 | 82 | 83 | p 84 | 85 | space 86 | 87 | 88 | pt 89 | 90 | space 91 | 92 | 93 | pr 94 | 95 | space 96 | 97 | 98 | pb 99 | 100 | space 101 | 102 | 103 | pl 104 | 105 | space 106 | 107 | 108 | px 109 | 3 110 | space 111 | 112 | 113 | py 114 | 115 | space 116 | 117 | 118 | maxWidth 119 | 1024 120 | maxWidths 121 | 122 | 123 | 124 | ) 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /examples/app/screens/ButtonCircleScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class ButtonCircleScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'ButtonCircle', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 18 | 19 | 20 | 21 | Code 22 | {` 25 | `} 26 | 27 | Inheritance 28 | { 29 | this.props.navigation.navigate('ButtonScreen') 30 | }}>Button → { 31 | this.props.navigation.navigate('BoxScreen') 32 | }}>Box 33 | 34 | Props 35 | 36 | 37 | 38 | prop 39 | 40 | 41 | default 42 | 43 | 44 | theme key 45 | 46 | 47 | 48 | m 49 | 50 | space 51 | 52 | 53 | mt 54 | 55 | space 56 | 57 | 58 | mr 59 | 60 | space 61 | 62 | 63 | mb 64 | 65 | space 66 | 67 | 68 | ml 69 | 70 | space 71 | 72 | 73 | mx 74 | 75 | space 76 | 77 | 78 | my 79 | 80 | space 81 | 82 | 83 | p 84 | 85 | space 86 | 87 | 88 | pt 89 | 90 | space 91 | 92 | 93 | pr 94 | 95 | space 96 | 97 | 98 | pb 99 | 100 | space 101 | 102 | 103 | pl 104 | 105 | space 106 | 107 | 108 | px 109 | 3 110 | space 111 | 112 | 113 | py 114 | 2 115 | space 116 | 117 | 118 | borderRadius 119 | 9999 120 | radii 121 | 122 | 123 | 124 | ) 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /examples/app/screens/RowScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class RowScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Row', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | Column 17 | Column 18 | 19 | 20 | 21 | 22 | Code 23 | {` 24 | Column 25 | Column 26 | 27 | `} 28 | 29 | Inheritance 30 | { 31 | this.props.navigation.navigate('FlexScreen') 32 | }}>Flex → { 33 | this.props.navigation.navigate('BoxScreen') 34 | }}>Box 35 | 36 | Props 37 | 38 | 39 | 40 | prop 41 | 42 | 43 | default 44 | 45 | 46 | theme key 47 | 48 | 49 | 50 | flexDirection 51 | row 52 | N/A 53 | 54 | 55 | m 56 | 57 | space 58 | 59 | 60 | mt 61 | 62 | space 63 | 64 | 65 | mr 66 | 67 | space 68 | 69 | 70 | mb 71 | 72 | space 73 | 74 | 75 | ml 76 | 77 | space 78 | 79 | 80 | mx 81 | -3 82 | space 83 | 84 | 85 | my 86 | 87 | space 88 | 89 | 90 | p 91 | 92 | space 93 | 94 | 95 | pt 96 | 97 | space 98 | 99 | 100 | pr 101 | 102 | space 103 | 104 | 105 | pb 106 | 107 | space 108 | 109 | 110 | pl 111 | 112 | space 113 | 114 | 115 | px 116 | 117 | space 118 | 119 | 120 | py 121 | 122 | space 123 | 124 | 125 | 126 | ) 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /examples/app/screens/ColumnScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class ColumnScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Column', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | Column 17 | Column 18 | Column 19 | 20 | 21 | 22 | 23 | Code 24 | {` 25 | Column 26 | Column 27 | Column 28 | 29 | `} 30 | 31 | Inheritance 32 | { 33 | this.props.navigation.navigate('BoxScreen') 34 | }}>Box → { 35 | this.props.navigation.navigate('BoxScreen') 36 | }}>Box 37 | 38 | Props 39 | 40 | 41 | 42 | prop 43 | 44 | 45 | default 46 | 47 | 48 | theme key 49 | 50 | 51 | 52 | m 53 | 54 | space 55 | 56 | 57 | mt 58 | 59 | space 60 | 61 | 62 | mr 63 | 64 | space 65 | 66 | 67 | mb 68 | 4 69 | space 70 | 71 | 72 | ml 73 | 74 | space 75 | 76 | 77 | mx 78 | 79 | space 80 | 81 | 82 | my 83 | 84 | space 85 | 86 | 87 | p 88 | 89 | space 90 | 91 | 92 | pt 93 | 94 | space 95 | 96 | 97 | pr 98 | 99 | space 100 | 101 | 102 | pb 103 | 104 | space 105 | 106 | 107 | pl 108 | 109 | space 110 | 111 | 112 | px 113 | 3 114 | space 115 | 116 | 117 | py 118 | 119 | space 120 | 121 | 122 | flex 123 | 1 1 auto 124 | N/A 125 | 126 | 127 | 128 | ) 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /examples/app/screens/BlockquoteScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class BlockquoteScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Blockquote', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 16 | “The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.” 17 | 18 | 19 | 20 | 21 | Code 22 | {`
23 | “The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.” 24 |
25 | `} 26 | 27 | Inheritance 28 | { 29 | this.props.navigation.navigate('BoxScreen') 30 | }}>Box → { 31 | this.props.navigation.navigate('BoxScreen') 32 | }}>Box 33 | 34 | Props 35 | 36 | 37 | 38 | prop 39 | 40 | 41 | default 42 | 43 | 44 | theme key 45 | 46 | 47 | 48 | m 49 | 50 | space 51 | 52 | 53 | mt 54 | 55 | space 56 | 57 | 58 | mr 59 | 60 | space 61 | 62 | 63 | mb 64 | 65 | space 66 | 67 | 68 | ml 69 | 70 | space 71 | 72 | 73 | mx 74 | 75 | space 76 | 77 | 78 | my 79 | 80 | space 81 | 82 | 83 | p 84 | 85 | space 86 | 87 | 88 | pt 89 | 90 | space 91 | 92 | 93 | pr 94 | 95 | space 96 | 97 | 98 | pb 99 | 100 | space 101 | 102 | 103 | pl 104 | 2 105 | space 106 | 107 | 108 | px 109 | 110 | space 111 | 112 | 113 | py 114 | 115 | space 116 | 117 | 118 | borderColor 119 | blue 120 | colors 121 | 122 | 123 | 124 | ) 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /examples/app/screens/ProgressScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class ProgressScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Progress', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 18 | 19 | 20 | 21 | Code 22 | {` 25 | `} 26 | 27 | Inheritance 28 | 29 | 30 | Props 31 | 32 | 33 | 34 | prop 35 | 36 | 37 | default 38 | 39 | 40 | theme key 41 | 42 | 43 | 44 | width 45 | 1 46 | N/A 47 | 48 | 49 | m 50 | 51 | space 52 | 53 | 54 | mt 55 | 56 | space 57 | 58 | 59 | mr 60 | 61 | space 62 | 63 | 64 | mb 65 | 66 | space 67 | 68 | 69 | ml 70 | 71 | space 72 | 73 | 74 | mx 75 | 76 | space 77 | 78 | 79 | my 80 | 81 | space 82 | 83 | 84 | p 85 | 86 | space 87 | 88 | 89 | pt 90 | 91 | space 92 | 93 | 94 | pr 95 | 96 | space 97 | 98 | 99 | pb 100 | 101 | space 102 | 103 | 104 | pl 105 | 106 | space 107 | 108 | 109 | px 110 | 111 | space 112 | 113 | 114 | py 115 | 116 | space 117 | 118 | 119 | color 120 | 121 | colors 122 | 123 | 124 | bg 125 | gray 126 | colors 127 | 128 | 129 | borderRadius 130 | 2 131 | radii 132 | 133 | 134 | 135 | ) 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /examples/app/screens/PreScreen.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import {ScrollView} from 'react-native' 4 | import * as RebassNative from 'rebass-native' 5 | 6 | export class PreScreen extends React.Component { 7 | static navigationOptions = { 8 | title: 'Pre', 9 | }; 10 | render () { 11 | return ( 12 | 13 | Demo 14 | 15 | 18 | 19 | 20 | 21 | Code 22 | {`
 25 | `}
 26 | 
 27 |         Inheritance
 28 |         
 29 | 
 30 |         Props
 31 |         
 32 | 
 33 |     
 34 |         prop
 35 |       
 36 | 
 37 |         default
 38 |       
 39 | 
 40 |         theme key
 41 |       
 42 |   
 43 | 
 44 |     fontSize
 45 | 1
 46 | fontSizes
 47 |     
 48 | 
 49 |     fontFamily
 50 | monospace
 51 | fonts
 52 |     
 53 | 
 54 |     m
 55 | 
 56 | space
 57 |     
 58 | 
 59 |     mt
 60 | 
 61 | space
 62 |     
 63 | 
 64 |     mr
 65 | 
 66 | space
 67 |     
 68 | 
 69 |     mb
 70 | 
 71 | space
 72 |     
 73 | 
 74 |     ml
 75 | 
 76 | space
 77 |     
 78 | 
 79 |     mx
 80 | 
 81 | space
 82 |     
 83 | 
 84 |     my
 85 | 
 86 | space
 87 |     
 88 | 
 89 |     p
 90 | 
 91 | space
 92 |     
 93 | 
 94 |     pt
 95 | 
 96 | space
 97 |     
 98 | 
 99 |     pr
100 | 
101 | space
102 |     
103 | 
104 |     pb
105 | 
106 | space
107 |     
108 | 
109 |     pl
110 | 
111 | space
112 |     
113 | 
114 |     px
115 | 
116 | space
117 |     
118 | 
119 |     py
120 | 
121 | space
122 |     
123 | 
124 |     color
125 | 
126 | colors
127 |     
128 | 
129 |     bg
130 | 
131 | colors
132 |     
133 | 
134 |       
135 |     )
136 |   }
137 | }
138 |     


--------------------------------------------------------------------------------
/examples/app/screens/DividerScreen.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react';
  3 | import {ScrollView} from 'react-native'
  4 | import * as RebassNative from 'rebass-native'
  5 | 
  6 | export class DividerScreen extends React.Component {
  7 |   static navigationOptions = {
  8 |     title: 'Divider',
  9 |   };
 10 |   render () {
 11 |     return (
 12 |       
 13 |         Demo
 14 |         
 15 |         
 19 | 
 20 |         
 21 | 
 22 |         Code
 23 |         {`
 27 | `}
 28 | 
 29 |         Inheritance
 30 |          {
 31 |     this.props.navigation.navigate('BoxScreen')
 32 |   }}>Box →  {
 33 |     this.props.navigation.navigate('BoxScreen')
 34 |   }}>Box
 35 | 
 36 |         Props
 37 |         
 38 | 
 39 |     
 40 |         prop
 41 |       
 42 | 
 43 |         default
 44 |       
 45 | 
 46 |         theme key
 47 |       
 48 |   
 49 | 
 50 |     m
 51 | 
 52 | space
 53 |     
 54 | 
 55 |     mt
 56 | 
 57 | space
 58 |     
 59 | 
 60 |     mr
 61 | 
 62 | space
 63 |     
 64 | 
 65 |     mb
 66 | 
 67 | space
 68 |     
 69 | 
 70 |     ml
 71 | 
 72 | space
 73 |     
 74 | 
 75 |     mx
 76 | 
 77 | space
 78 |     
 79 | 
 80 |     my
 81 | 3
 82 | space
 83 |     
 84 | 
 85 |     p
 86 | 
 87 | space
 88 |     
 89 | 
 90 |     pt
 91 | 
 92 | space
 93 |     
 94 | 
 95 |     pr
 96 | 
 97 | space
 98 |     
 99 | 
100 |     pb
101 | 
102 | space
103 |     
104 | 
105 |     pl
106 | 
107 | space
108 |     
109 | 
110 |     px
111 | 
112 | space
113 |     
114 | 
115 |     py
116 | 
117 | space
118 |     
119 | 
120 |     borderColor
121 | gray
122 | colors
123 |     
124 | 
125 |     color
126 | 
127 | colors
128 |     
129 | 
130 |     bg
131 | 
132 | colors
133 |     
134 | 
135 |       
136 |     )
137 |   }
138 | }
139 |     


--------------------------------------------------------------------------------
/examples/app/screens/ImageScreen.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react';
  3 | import {ScrollView} from 'react-native'
  4 | import * as RebassNative from 'rebass-native'
  5 | 
  6 | export class ImageScreen extends React.Component {
  7 |   static navigationOptions = {
  8 |     title: 'Image',
  9 |   };
 10 |   render () {
 11 |     return (
 12 |       
 13 |         Demo
 14 |         
 15 |         
 22 | 
 23 |         
 24 | 
 25 |         Code
 26 |         {`
 33 | `}
 34 | 
 35 |         Inheritance
 36 |          {
 37 |     // open http://jxnblk.com/rebass/components/Image
 38 |   }}>Image
 39 | 
 40 |         Props
 41 |         
 42 | 
 43 |     
 44 |         prop
 45 |       
 46 | 
 47 |         default
 48 |       
 49 | 
 50 |         theme key
 51 |       
 52 |   
 53 | 
 54 |     m
 55 | 
 56 | space
 57 |     
 58 | 
 59 |     mt
 60 | 
 61 | space
 62 |     
 63 | 
 64 |     mr
 65 | 
 66 | space
 67 |     
 68 | 
 69 |     mb
 70 | 
 71 | space
 72 |     
 73 | 
 74 |     ml
 75 | 
 76 | space
 77 |     
 78 | 
 79 |     mx
 80 | 
 81 | space
 82 |     
 83 | 
 84 |     my
 85 | 
 86 | space
 87 |     
 88 | 
 89 |     p
 90 | 
 91 | space
 92 |     
 93 | 
 94 |     pt
 95 | 
 96 | space
 97 |     
 98 | 
 99 |     pr
100 | 
101 | space
102 |     
103 | 
104 |     pb
105 | 
106 | space
107 |     
108 | 
109 |     pl
110 | 
111 | space
112 |     
113 | 
114 |     px
115 | 
116 | space
117 |     
118 | 
119 |     py
120 | 
121 | space
122 |     
123 | 
124 |     width
125 | 
126 | N/A
127 |     
128 | 
129 |     color
130 | 
131 | colors
132 |     
133 | 
134 |     bg
135 | 
136 | colors
137 |     
138 | 
139 |       
140 |     )
141 |   }
142 | }
143 |     


--------------------------------------------------------------------------------
/examples/app/screens/BadgeScreen.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react';
  3 | import {ScrollView} from 'react-native'
  4 | import * as RebassNative from 'rebass-native'
  5 | 
  6 | export class BadgeScreen extends React.Component {
  7 |   static navigationOptions = {
  8 |     title: 'Badge',
  9 |   };
 10 |   render () {
 11 |     return (
 12 |       
 13 |         Demo
 14 |         
 15 |         
 16 |   Hello
 17 |   
 18 |     Beep
 19 |   
 20 | 
 21 | 
 22 |         
 23 | 
 24 |         Code
 25 |         {`
 26 |   Hello
 27 |   
 28 |     Beep
 29 |   
 30 | 
 31 | `}
 32 | 
 33 |         Inheritance
 34 |          {
 35 |     this.props.navigation.navigate('BoxScreen')
 36 |   }}>Box →  {
 37 |     this.props.navigation.navigate('BoxScreen')
 38 |   }}>Box
 39 | 
 40 |         Props
 41 |         
 42 | 
 43 |     
 44 |         prop
 45 |       
 46 | 
 47 |         default
 48 |       
 49 | 
 50 |         theme key
 51 |       
 52 |   
 53 | 
 54 |     m
 55 | 
 56 | space
 57 |     
 58 | 
 59 |     mt
 60 | 
 61 | space
 62 |     
 63 | 
 64 |     mr
 65 | 
 66 | space
 67 |     
 68 | 
 69 |     mb
 70 | 
 71 | space
 72 |     
 73 | 
 74 |     ml
 75 | 
 76 | space
 77 |     
 78 | 
 79 |     mx
 80 | 1
 81 | space
 82 |     
 83 | 
 84 |     my
 85 | 
 86 | space
 87 |     
 88 | 
 89 |     p
 90 | 
 91 | space
 92 |     
 93 | 
 94 |     pt
 95 | 
 96 | space
 97 |     
 98 | 
 99 |     pr
100 | 
101 | space
102 |     
103 | 
104 |     pb
105 | 
106 | space
107 |     
108 | 
109 |     pl
110 | 
111 | space
112 |     
113 | 
114 |     px
115 | 2
116 | space
117 |     
118 | 
119 |     py
120 | 1
121 | space
122 |     
123 | 
124 |     color
125 | 
126 | colors
127 |     
128 | 
129 |     bg
130 | blue
131 | colors
132 |     
133 | 
134 |     borderRadius
135 | 2
136 | radii
137 |     
138 | 
139 |       
140 |     )
141 |   }
142 | }
143 |     


--------------------------------------------------------------------------------