├── .eslintrc
├── .github
└── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .npmignore
├── CNAME
├── LICENSE
├── README.md
├── components
├── buttons
│ ├── Button.js
│ └── Link.js
├── inputs
│ ├── Input.js
│ └── Select.js
└── views
│ ├── Block.js
│ ├── Container.js
│ ├── Icon.js
│ └── Text.js
├── docs
├── .nojekyll
├── CNAME
├── README.md
├── images
│ ├── native_forgot.jpg
│ ├── native_login.jpg
│ ├── native_profile.jpg
│ └── native_register.jpg
└── index.html
├── examples
├── .babelrc
├── .gitignore
├── .watchmanconfig
├── App.js
├── __tests__
│ └── App-test.js
├── app.json
├── assets
│ ├── fonts
│ │ └── SpaceMono-Regular.ttf
│ └── images
│ │ ├── icon.png
│ │ └── splash.png
├── components
│ ├── StyledText.js
│ ├── TabBarIcon.js
│ └── __tests__
│ │ └── StyledText-test.js
├── constants
│ ├── Colors.js
│ └── Layout.js
├── navigation
│ ├── AppNavigator.js
│ └── MainTabNavigator.js
├── package.json
└── screens
│ ├── CameraScreen.js
│ ├── ForgotScreen.js
│ ├── LoginScreen.js
│ ├── ProfileScreen.js
│ └── RegisterScreen.js
├── index.js
├── package.json
└── utils
├── api.js
├── constants.js
├── index.js
└── storage.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | extends: 'universe',
3 | }
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 |
5 | ---
6 |
7 | **Describe the bug**
8 | A clear and concise description of what the bug is.
9 |
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 |
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 |
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 |
23 | **Desktop (please complete the following information):**
24 | - OS: [e.g. iOS]
25 | - Browser [e.g. chrome, safari]
26 | - Version [e.g. 22]
27 |
28 | **Smartphone (please complete the following information):**
29 | - Device: [e.g. iPhone6]
30 | - OS: [e.g. iOS8.1]
31 | - Browser [e.g. stock browser, safari]
32 | - Version [e.g. 22]
33 |
34 | **Additional context**
35 | Add any other context about the problem here.
36 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 |
5 | ---
6 |
7 | **Is your feature request related to a problem? Please describe.**
8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
9 |
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 |
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 |
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 | yarn.lock
10 | .DS_Store
11 | CNAME
12 | /screens
13 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | CNAME
2 | /examples
3 | /docs
4 | yarn.lock
5 | .expo
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | native.react-ui-kit.com
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 React UI Kit
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # **React Native UI Kit**
2 | React Native components based on React UI Kit
3 |
4 | Offical documentation of `React UI Kit Native` made for `React Native` applications and you can easily use the components in your project. A lot of predefined styles & properties so it's perfectly fit for prototyping of your app UI.
5 |
6 | - [React UI Kit Native - Website](https://native.react-ui-kit.com)
7 |
8 | Support: [contact@react-ui-kit.com](mailto:contact@react-ui-kit.com)
9 |
10 | ### **Setup**
11 | #### Install & usage
12 | 1. Install local module with react-ui-kit-native (it will also download all required dependencies)
13 |
14 | ```cmd
15 | npm install react-ui-kit-native --save
16 | ```
17 | 2. Use any component you want, all available props are available separately for each component below in this documentation. For example:
18 |
19 | ```javascript
20 | import React from 'react';
21 | import { Button } from 'react-ui-kit-native';
22 |
23 | export default class MyButton extends React.Component {
24 | render() {
25 | return (
26 |
27 | );
28 | }
29 | }
30 | ```
31 |
32 | ### **Components**
33 | List of available components:
34 |
35 | **Status** | **Type** | **Component** | **Description**
36 | :--- | :--- | :--- | :--- |
37 | :heavy_check_mark: | button | [`Button`](?id=Button) | react-native `TouchableOpacity` component with predefined styles & props
38 | :heavy_check_mark: | button | [`Link`](?id=Link) | react-native `Text` & `Linking` component with predefined properties
39 | :heavy_check_mark: | input | [`Input`](?id=Input) | react-native `TextInput` component with predefined styles & props
40 | :heavy_check_mark: | input | [`Select`](?id=Select) | [`react-native-modal-dropdown`](https://github.com/sohobloo/react-native-modal-dropdown) module with predefined styles
41 | :soon: | input | `Checkbox` | react-native `Switch` component with predefined styles & props
42 | :soon: | input | `Datepiker` | react-native `DatePickerIOS` & `DatePickerAndroid` component with predefined styles & props
43 | :soon: | input | `Progress` | react-native `ProgressViewIOS` & `ProgressBarAndroid` component with predefined styles & props
44 | :heavy_check_mark: | view | [`Block`](?id=Block) | react-native `View` component with predefined styles & props
45 | :heavy_check_mark: | view | [`Container`](?id=Container) | react-native `View` component with predefined styles & props
46 | :heavy_check_mark: | view | [`Text`](?id=Text) | react-native `Text` component with predefined styles & props
47 | :heavy_check_mark: | view | [`Icon`](?id=Icon) | [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) module with predefined props
48 | :heavy_check_mark: | view | [`Image`](?id=Image) | react-native `Image` component with predefined styles & props
49 | :soon: | view | `Badge` | react-native `View` component with predefined styles & props
50 | :soon: | view | `Label` | react-native `View` component with predefined styles & props
51 | :soon: | view | `Tabs` | react-native `TabBarIOS` component with predefined styles & props
52 | :soon: | view | `List` | react-native `ScrollView` component with predefined styles & props
53 | :soon: | view | `Menu` | react-native `ScrollView` component with predefined styles & props
54 |
55 | #### Button
56 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
57 | :--- | :--- | :--- | :---
58 | color | string | `#FFFFFF` | Specifies a text color
59 | size | number | `16` | Specifies a `fontSize` size
60 | label | string | null | Specifies a string for the button text
61 | icon | bool | null | Specifies an icon name - check [Icon](?id=icon) component
62 | family | bool | null | Specifies an icon family - check [Icon](?id=icon) component
63 | loading | bool | `false` | Disable touch/press events and render `ActivityIndicator`
64 | full | bool | `false` | Set the width of the component to 80% from the total width of the screen
65 | opacity | number | `0.8` | Determines what the `activeOpacity` of the Button should be when touch is active
66 | basic | bool | `false` | Include `styles.basic` with _backgroundColor: #FFFFFF_, _borderColor: #45547e_ █
67 | bold | bool | `false` | Determines whether the `styles.bold` should be included
68 | border | bool | `false` | Determines whether the `styles.border` should be included
69 | rounded | bool | `false` | Determines whether the `styles.basic` should be included
70 | primary | bool | `false` | Include `styles.primary` with _backgroundColor: #7CB527_ █
71 | secondary | bool | `false` | Include `styles.secondary` with _backgroundColor: #FF3D57_ █
72 | tertiary | bool | `false` | Include `styles.tertiary` with _backgroundColor: #7857A9_ █
73 | style | View style | `{}` | Add `style` properties for better customization
74 |
75 | For more properties visit [TouchableOpacity props](https://facebook.github.io/react-native/docs/touchableopacity#props)
76 |
77 | #### Link
78 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
79 | :--- | :--- | :--- | :---
80 | color | string | `color: #323642` █ | Specifies a text color
81 | href | string | null | A link (web URL, email, contact etc.)
82 | onPress | func | `() => {}` | Called when the touch is released
83 | style | View style | `{}` | Add `style` properties for better customization
84 |
85 | #### Input
86 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
87 | :--- | :--- | :--- | :---
88 | color | string | `#293042` █ | Specifies a text color
89 | placeHolderColor | string | `#5E6D95` █ | Specifies a `placeholderTextColor`
90 | bgColor | string | `#FFFFFF` | Specifies a `backgroundColor` color
91 | rounded | bool | `false` | Determines whether the `styles.rounded` should be included
92 | type | string | `default` | One of `'default', 'email-address', 'numeric', 'phone-pad', 'number-pad', 'decimal-pad'` for `keyboardType`
93 | help | string | null | Specifies a `string` or `node` for the text positioned between `label` and `input`
94 | left | bool | `true` | Positioning the icon on the `left`
95 | right | bool | `false` | Positioning the icon on the `right`
96 | transparent | bool | `false` | Determines whether the `styles.transparent` should be included
97 | borderless | bool | `false` | Determines whether the `styles.borderless` should be included
98 | border | bool | `false` | Determines whether the `styles.border` should be included
99 |
100 | For more properties visit [TextInput props](https://facebook.github.io/react-native/docs/textinput#props)
101 |
102 | #### Text
103 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
104 | :--- | :--- | :--- | :---
105 | h1 | bool | false | `styles.h1` with `fontSize` size of `112`
106 | h2 | bool | false | `styles.h2` with `fontSize` size of `56`
107 | h3 | bool | false | `styles.h3` with `fontSize` size of `~45`
108 | h4 | bool | false | `styles.h4` with `fontSize` size of `~34`
109 | h5 | bool | false | `styles.h5` with `fontSize` size of `~24`
110 | title | bool | false | `styles.title` with `fontSize` size of `~20`
111 | subtitle | bool | false | `styles.subtitle` with `fontSize` size of `16`
112 | caption | bool | false | `styles.caption` with `fontSize` size of `12`
113 | size | number | `14` | Specifies a `fontSize` size of `14`
114 | color | string | `#808080` █ | Specifies a text color `#808080`
115 | thin | bool | false | Set the `fontWeight` to `100`
116 | bold | bool | false | Set the `fontWeight` to `300`
117 | light | bool | false | Set the `fontWeight` to `bold`
118 | italic | bool | false | Set the `fontStyle` to `italic`
119 | align | bool | null | Specifies a `textAlign`
120 |
121 | For more properties visit [Text props](https://facebook.github.io/react-native/docs/text.html#props)
122 |
123 | #### Icon
124 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
125 | :--- | :--- | :--- | :---
126 | color | string | `#808080` █ | Specifies an Icon color `COLOR_DEFAULT #808080`
127 | size | number | `16` | Specifies a `fontSize` size, `BASE_SIZE 16px`
128 | name | string | null` | What icon to show, for more example see [Icon Explorer](https://oblador.github.io/react-native-vector-icons/)
129 | family | string | null` | One of the sets from [Bundled Icon Sets](https://github.com/oblador/react-native-vector-icons#bundled-icon-sets)
130 |
131 | For more properties visit [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
132 |
133 | #### Image
134 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
135 | :--- | :--- | :--- | :---
136 | avatar | string | `false` | Based on image width & height will add `borderRadius` with value of minimum between WIDTH & HEIGHT
137 | width | number | null | Add `WIDTH` to image style
138 | height | number | null | Add `HEIGHT` to image style
139 | size | number | null | **width** & **height** changed using: `tiny` divided by _2_, `small` divided by _1.25_ or `large` multiplied by _2_
140 | source | string | null | [Image source](https://facebook.github.io/react-native/docs/image#source) (either a remote URL or a local file resource).
141 |
142 | For more properties visit [Image props](https://facebook.github.io/react-native/docs/image#props)
143 |
144 | ### **Examples**
145 | A list of example screens based on the above components:
146 | #### Login
147 |
148 | 
149 |
150 | ```javascript
151 | import React from 'react';
152 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
153 |
154 | export default class LoginScreen extends React.Component {
155 | render() {
156 | return (
157 |
158 |
159 | LOGIN SCREEN
160 |
161 |
162 | Please login to your account
163 |
164 |
165 |
166 |
167 |
168 | );
169 | }
170 | }
171 | ```
172 |
173 | #### Forgot
174 | 
175 |
176 | ```javascript
177 | import React from 'react';
178 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
179 |
180 | export default class LoginScreen extends React.Component {
181 | static navigationOptions = {
182 | header: null,
183 | };
184 |
185 | render() {
186 | return (
187 |
188 |
189 | FORGOT PASSWORD
190 |
191 |
192 |
193 |
194 | );
195 | }
196 | }
197 | ```
198 |
199 | #### Register
200 | 
201 |
202 | ```javascript
203 | import React from 'react';
204 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
205 |
206 | export default class RegisterScreen extends React.Component {
207 | render() {
208 | return (
209 |
210 |
211 | REGISTER SCREEN
212 |
213 |
214 |
215 |
222 |
230 |
231 |
232 | );
233 | }
234 | }
235 | ```
236 |
237 | #### Profile
238 | 
239 |
240 | ```javascript
241 | import React from 'react';
242 | import { StyleSheet, Image } from 'react-native';
243 | import { Block, Text } from 'react-ui-kit-native';
244 |
245 | class ProfileScreen extends React.Component {
246 | render() {
247 | const { profile } = this.props;
248 |
249 | return (
250 |
251 | {profile.fullname}
252 |
253 | {`${profile.city}, ${profile.country}`}
254 | {profile.email}
255 |
256 | );
257 | }
258 | }
259 |
260 | ProfileScreen.defaultProps = {
261 | profile: {
262 | fullname: `React UI Kit`,
263 | city: `London`,
264 | country: `United Kingdom`,
265 | email: `contact@react-ui-kit.com`,
266 | avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,
267 | },
268 | };
269 |
270 | export default ProfileScreen;
271 |
272 | const styles = StyleSheet.create({
273 | profile: {
274 | paddingTop: 15,
275 | backgroundColor: '#fff',
276 | },
277 | avatar: {
278 | width: 200,
279 | height: 200,
280 | resizeMode: 'contain',
281 | },
282 | });
283 |
284 | ```
285 |
286 | ### **Work in progress**
287 | - [x] export components style as `styles` for easy import
288 | - [ ] create `theme HoC` with default **theme.js**
289 |
290 | ### **Contribution**
291 | Have an idea for a new component or Screen? Just contact us at contact@react-ui-kit.com and will add it to our list.
--------------------------------------------------------------------------------
/components/buttons/Button.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { ActivityIndicator, Dimensions, Text, StyleSheet, TouchableOpacity } from 'react-native'
3 | import Icon from '../views/Icon'
4 |
5 | const { width } = Dimensions.get('window')
6 |
7 | // let's define some colors
8 | const BASE_SIZE = 14;
9 | const COLOR_TEXT = `#FFFFFF`;
10 | const COLOR_DEFAULT = `#45547e`;
11 | const COLOR_PRIMARY = `#7CB527`;
12 | const COLOR_SECONDARY = `#FF3D57`;
13 | const COLOR_TERTIARY = `#7857A9`;
14 |
15 | export default class Button extends Component {
16 | // default props for all inline conditions
17 | static defaultProps = {
18 | opacity: 0.8,
19 | color: COLOR_TEXT,
20 | primary: false,
21 | secondary: false,
22 | tertiary: false,
23 | full: false,
24 | rounded: false,
25 | basic: false,
26 | loading: false,
27 | size: BASE_SIZE,
28 | }
29 |
30 | render() {
31 | const {
32 | label,
33 | opacity,
34 | color,
35 | primary,
36 | secondary,
37 | tertiary,
38 | full,
39 | rounded,
40 | basic,
41 | size,
42 | loading,
43 | icon,
44 | family,
45 | style,
46 | ...props
47 | } = this.props;
48 |
49 | const buttonStyles = [
50 | styles.button,
51 | primary && styles.primary,
52 | secondary && styles.secondary,
53 | tertiary && styles.tertiary,
54 | full && styles.full,
55 | rounded && styles.rounded,
56 | basic && styles.basic,
57 | style,
58 | ];
59 |
60 | const textStyles = [size && { fontSize: size }, basic && { color: COLOR_DEFAULT }, { color }];
61 |
62 | const { [family]: IconFamily } = Icon;
63 | const iconContent = icon && IconFamily ? (
64 |
65 | {label && ` ${label}`}
66 |
67 | ) : null;
68 | const buttonContent = {iconContent || label};
69 | const loadingContent = ;
70 |
71 | return (
72 |
73 | {loading ? loadingContent : buttonContent}
74 |
75 | );
76 | }
77 | }
78 |
79 | export const styles = StyleSheet.create({
80 | button: {
81 | alignItems: 'center',
82 | justifyContent: 'center',
83 | backgroundColor: COLOR_DEFAULT,
84 | paddingHorizontal: BASE_SIZE * 2,
85 | paddingVertical: BASE_SIZE * 0.8,
86 | borderRadius: BASE_SIZE * 0.4,
87 | },
88 | primary: {
89 | backgroundColor: COLOR_PRIMARY,
90 | },
91 | secondary: {
92 | backgroundColor: COLOR_SECONDARY,
93 | },
94 | tertiary: {
95 | backgroundColor: COLOR_TERTIARY,
96 | },
97 | full: {
98 | width: width * 0.8, // 80% of the screen/window
99 | },
100 | rounded: {
101 | borderRadius: BASE_SIZE * 2,
102 | },
103 | basic: {
104 | backgroundColor: COLOR_TEXT,
105 | borderColor: COLOR_DEFAULT,
106 | borderWidth: 0.6,
107 | }
108 | })
109 |
--------------------------------------------------------------------------------
/components/buttons/Link.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Linking, Text, StyleSheet } from 'react-native';
3 | import PropTypes from 'prop-types';
4 |
5 | import * as specs from '../../utils/constants';
6 |
7 | class Link extends React.Component {
8 | navigateURL = () => {
9 | const { href, onPress } = this.props;
10 |
11 | Linking.openURL(href);
12 | onPress();
13 | };
14 |
15 | render() {
16 | const { style, color, ...props } = this.props;
17 |
18 | return (
19 |
20 | {props.children}
21 |
22 | );
23 | }
24 | }
25 |
26 | Link.propTypes = {
27 | color: PropTypes.string,
28 | href: PropTypes.string,
29 | onPress: PropTypes.func,
30 | style: Text.propTypes.style,
31 | };
32 |
33 | Link.defaultProps = {
34 | color: specs.LINK_COLOR,
35 | href: 'null',
36 | onPress: () => {},
37 | style: {},
38 | };
39 |
40 | export default Link;
41 |
42 | export const styles = StyleSheet.create({
43 | link: {
44 | height: specs.BUTTON_HEIGHT,
45 | paddingVertical: specs.BUTTON_PADDING,
46 | },
47 | });
48 |
--------------------------------------------------------------------------------
/components/inputs/Input.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, Text, TextInput, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
3 |
4 | import Icon from '../views/Icon'
5 |
6 | const { width } = Dimensions.get('window');
7 |
8 | const BASE_SIZE = 14;
9 | const COLOR_DEFAULT = `#293042`;
10 | const COLOR_PLACEHOLDER = `#5E6D95`;
11 | const COLOR_BACKGROUND = `#FFFFFF`;
12 | const COLOR_ERROR = `#D44634`;
13 | const COLOR_SUCCESS = `#7CB527`;
14 |
15 | export default class Input extends Component {
16 | // to simplify the conditional logic we're using defaultProps
17 | // each time a prop value is not set, the default value will be used.
18 | static defaultProps = {
19 | color: COLOR_DEFAULT,
20 | placeHolderColor: COLOR_PLACEHOLDER,
21 | bgColor: COLOR_BACKGROUND,
22 | rounded: false,
23 | type: 'default',
24 | help: null,
25 | left: true,
26 | right: false,
27 | transparent: false,
28 | borderless: false,
29 | border: false,
30 | };
31 |
32 | constructor(props) {
33 | super(props);
34 |
35 | this.state = {
36 | password: props.password,
37 | };
38 | }
39 |
40 | render() {
41 | const {
42 | style,
43 | label,
44 | help,
45 | type,
46 | password,
47 | color,
48 | placeHolderColor,
49 | bgColor,
50 | rounded,
51 | error,
52 | success,
53 | icon,
54 | family,
55 | left,
56 | right,
57 | transparent,
58 | borderless,
59 | ...props
60 | } = this.props;
61 |
62 | const inputStyle = [
63 | styles.input,
64 | styles.inputContainer,
65 | rounded && styles.rounded,
66 | bgColor && { backgroundColor: bgColor },
67 | { borderColor: placeHolderColor },
68 | error && styles.error,
69 | success && styles.success,
70 | borderless && styles.borderless,
71 | transparent && styles.transparent,
72 | style,
73 | ];
74 |
75 | const labelContent = label && {label};
76 | const { [family]: IconFamily } = Icon;
77 | let iconContent = icon && IconFamily ? : null;
78 | const helpContent = help && {help};
79 |
80 | if (password) {
81 | iconContent = (
82 | this.setState({ password: !this.state.password })}>
83 |
84 |
85 | );
86 | }
87 |
88 | return (
89 |
90 | {labelContent}
91 | {helpContent}
92 |
93 | {left && !right && !password && iconContent}
94 |
102 | {(right || password) && iconContent}
103 |
104 |
105 | );
106 | }
107 | }
108 |
109 | export const styles = StyleSheet.create({
110 | input: {
111 | backgroundColor: COLOR_BACKGROUND,
112 | borderRadius: BASE_SIZE * 0.4,
113 | borderWidth: BASE_SIZE * 0.05,
114 | borderColor: COLOR_DEFAULT,
115 | paddingHorizontal: BASE_SIZE,
116 | },
117 | inputContainer: {
118 | height: BASE_SIZE * 3,
119 | width: width * 0.8,
120 | flexDirection: 'row',
121 | alignItems: 'center',
122 | },
123 | inputView: {
124 | flex: 1,
125 | color: COLOR_DEFAULT,
126 | fontSize: BASE_SIZE,
127 | textDecorationColor: 'transparent',
128 | textShadowColor: 'transparent',
129 | },
130 | inputViewIcon: {
131 | marginHorizontal: BASE_SIZE / 2,
132 | },
133 | label: {
134 | marginBottom: BASE_SIZE / 5,
135 | fontWeight: `bold`,
136 | },
137 | rounded: {
138 | borderRadius: BASE_SIZE * 2,
139 | },
140 | help: {
141 | fontSize: BASE_SIZE * 0.9,
142 | fontStyle: `italic`,
143 | },
144 | error: {
145 | borderColor: COLOR_ERROR,
146 | borderWidth: BASE_SIZE * 0.09,
147 | },
148 | success: {
149 | borderColor: COLOR_SUCCESS,
150 | borderWidth: BASE_SIZE * 0.09,
151 | },
152 | borderless: {
153 | borderColor: `transparent`,
154 | borderWidth: 0,
155 | borderRadius: 0,
156 | },
157 | transparent: {
158 | backgroundColor: `transparent`,
159 | },
160 | });
161 |
--------------------------------------------------------------------------------
/components/inputs/Select.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text, StyleSheet } from 'react-native';
3 | // eslint-disable-next-line
4 | import Dropdown from 'react-native-modal-dropdown';
5 |
6 | import * as specs from '../../utils/constants';
7 |
8 | class Select extends React.PureComponent {
9 | render() {
10 | const { style, textStyle, dropdownStyle, dropdownTextStyle } = this.props;
11 | return (
12 |
19 | );
20 | }
21 | }
22 |
23 | Select.propTypes = {
24 | dropdownStyle: Text.propTypes.style,
25 | dropdownTextStyle: Text.propTypes.style,
26 | style: Text.propTypes.style,
27 | textStyle: Text.propTypes.style,
28 | };
29 |
30 | Select.defaultProps = {
31 | dropdownStyle: {},
32 | dropdownTextStyle: {},
33 | style: {},
34 | textStyle: {},
35 | };
36 |
37 | export default Select;
38 |
39 | export const styles = StyleSheet.create({
40 | select: {
41 | backgroundColor: specs.INPUT_BACKGROUND,
42 | borderRadius: specs.INPUT_RADIUS,
43 | height: specs.INPUT_HEIGHT,
44 | marginBottom: specs.MARGIN,
45 | marginTop: specs.MARGIN,
46 | width: specs.WIDTH * 0.8, // 80%
47 | },
48 | dropdown: {
49 | marginTop: specs.MARGIN,
50 | width: specs.WIDTH * 0.8,
51 | },
52 | dropdownText: {
53 | backgroundColor: specs.COLOR_TERTIARY,
54 | fontSize: specs.FONT_SIZE,
55 | paddingLeft: specs.PADDING,
56 | paddingRight: specs.PADDING,
57 | width: specs.WIDTH * 0.8,
58 | },
59 | text: {
60 | color: specs.COLOR_SECONDARY,
61 | fontSize: specs.FONT_SIZE,
62 | lineHeight: specs.INPUT_HEIGHT,
63 | paddingLeft: specs.PADDING,
64 | paddingRight: specs.PADDING,
65 | width: specs.WIDTH * 0.8,
66 | },
67 | });
68 |
--------------------------------------------------------------------------------
/components/views/Block.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, StyleSheet } from 'react-native';
3 |
4 | const BASE_SIZE = 14;
5 | const COLOR_BACKGROUND = '#FFFFFF';
6 | const COLOR_DEFAULT = '#808080';
7 |
8 | export default class Block extends Component {
9 | static defaultProps = {
10 | row: false,
11 | flex: false,
12 | center: false,
13 | middle: false,
14 | top: false,
15 | bottom: false,
16 | right: false,
17 | left: false,
18 | card: false,
19 | shadow: false,
20 | space: false,
21 | fluid: false,
22 | height: false,
23 | width: false,
24 | shadowColor: false,
25 | }
26 |
27 | render() {
28 | const {
29 | row,
30 | flex,
31 | center,
32 | middle,
33 | top,
34 | bottom,
35 | right,
36 | left,
37 | shadow,
38 | space,
39 | fluid,
40 | height,
41 | shadowColor,
42 | card,
43 | width,
44 | children,
45 | style,
46 | ...props
47 | } = this.props;
48 |
49 | const styleBlock = [
50 | styles.block,
51 | row && styles.row,
52 | flex && { flex: flex === true ? 1 : flex },
53 | center && styles.center,
54 | middle && styles.middle,
55 | top && styles.top,
56 | bottom && styles.bottom,
57 | right && styles.right,
58 | left && styles.left,
59 | space && { justifyContent: `space-${space}` },
60 | shadow && styles.shadow,
61 | fluid && styles.fluid,
62 | card && styles.card,
63 | height && { height },
64 | width && { width },
65 | shadowColor && { shadowColor },
66 | style,
67 | ];
68 |
69 | return (
70 |
71 | {children}
72 |
73 | );
74 | }
75 | }
76 |
77 | export const styles = StyleSheet.create({
78 | block: {
79 | flexDirection: 'column',
80 | },
81 | row: {
82 | flexDirection: 'row',
83 | },
84 | middle: {
85 | alignItems: 'center',
86 | justifyContent: 'center',
87 | },
88 | center: {
89 | alignSelf: 'center',
90 | },
91 | top: {
92 | alignSelf: 'flex-start',
93 | },
94 | bottom: {
95 | alignSelf: 'flex-end',
96 | },
97 | card: {
98 | borderRadius: BASE_SIZE * 0.4,
99 | borderWidth: BASE_SIZE * 0.05,
100 | borderColor: COLOR_DEFAULT,
101 | backgroundColor: COLOR_BACKGROUND,
102 | },
103 | shadow: {
104 | shadowColor: COLOR_DEFAULT,
105 | shadowOffset: { width: 0, height: 4 },
106 | shadowOpacity: 0.4,
107 | shadowRadius: 8,
108 | elevation: 1,
109 | },
110 | fluid: {
111 | width: 'auto',
112 | },
113 | });
114 |
--------------------------------------------------------------------------------
/components/views/Container.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // eslint-disable-next-line
3 | import { StyleSheet, View, KeyboardAvoidingView, StatusBar } from 'react-native';
4 | import PropTypes from 'prop-types';
5 |
6 | StatusBar.setBarStyle('light-content', false);
7 |
8 | class Container extends React.PureComponent {
9 | render() {
10 | const { keyboard, style, children, ...props } = this.props;
11 |
12 | if (keyboard) {
13 | return (
14 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 | return (
25 |
26 | {children}
27 |
28 | );
29 | }
30 | }
31 |
32 | Container.propTypes = {
33 | children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
34 | keyboard: PropTypes.bool,
35 | style: View.propTypes.style,
36 | };
37 |
38 | Container.defaultProps = {
39 | children: undefined,
40 | keyboard: false,
41 | style: {},
42 | };
43 |
44 | export default Container;
45 |
46 | export const styles = StyleSheet.create({
47 | container: {
48 | flex: 1,
49 | },
50 | });
51 |
--------------------------------------------------------------------------------
/components/views/Icon.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Icons from 'react-native-vector-icons';
3 |
4 | const BASE_SIZE = 16;
5 | const COLOR_DEFAULT = '#808080';
6 |
7 | class Icon extends React.Component {
8 | static defaultProps = {
9 | name: null,
10 | family: null,
11 | size: BASE_SIZE,
12 | color: COLOR_DEFAULT,
13 | };
14 |
15 | render() {
16 | const { name, family, size, color, ...rest } = this.props;
17 | const { [family]: IconInstance } = Icons;
18 |
19 | if (name && IconInstance) {
20 | return ;
21 | }
22 |
23 | return null;
24 | }
25 | }
26 |
27 | export default Icon;
28 |
--------------------------------------------------------------------------------
/components/views/Text.js:
--------------------------------------------------------------------------------
1 | // font spacing inspiration
2 | // https://github.com/hectahertz/react-native-typography/blob/master/src/helpers/sanFranciscoSpacing.js
3 |
4 | // Typography component: https://github.com/hectahertz/react-native-typography
5 |
6 | import React, { Component } from 'react';
7 | import { Text, StyleSheet } from 'react-native';
8 |
9 | const BASE_SIZE = 14;
10 | const LINE_HEIGHT = 24; // ~ BASE_SIZE * 1.714
11 | const COLOR_DEFAULT = '#808080';
12 |
13 | export default class Typography extends Component {
14 | static defaultProps = {
15 | h1: false,
16 | h2: false,
17 | h3: false,
18 | h4: false,
19 | h5: false,
20 | title: false,
21 | subtitle: false,
22 | caption: false,
23 | size: null,
24 | height: null,
25 | color: null,
26 | thin: false,
27 | bold: false,
28 | light: false,
29 | italic: false,
30 | align: null,
31 | }
32 |
33 | render() {
34 | const {
35 | style,
36 | children,
37 | h1,
38 | h2,
39 | h3,
40 | h4,
41 | h5,
42 | title,
43 | subtitle,
44 | caption,
45 | size,
46 | color,
47 | thin,
48 | bold,
49 | light,
50 | italic,
51 | align,
52 | ...props
53 | } = this.props;
54 |
55 | const textStyles = [
56 | styles.text,
57 | h1 && styles.h1,
58 | h2 && styles.h2,
59 | h3 && styles.h3,
60 | h4 && styles.h4,
61 | h5 && styles.h5,
62 | title && styles.title,
63 | subtitle && styles.subtitle,
64 | caption && styles.caption,
65 | size && { fontSize: size },
66 | color && { color },
67 | thin && { fontWeight: '100' },
68 | light && { fontWeight: '300' },
69 | bold && { fontWeight: 'bold' },
70 | italic && { fontStyle: 'italic' },
71 | align && { textAlign: align },
72 | style,
73 | ];
74 |
75 | return (
76 |
77 | {children}
78 |
79 | );
80 | }
81 | }
82 |
83 | export const styles = StyleSheet.create({
84 | text: {
85 | fontSize: BASE_SIZE,
86 | lineHeight: LINE_HEIGHT,
87 | color: COLOR_DEFAULT,
88 | letterSpacing: -0.154,
89 | },
90 | h1: {
91 | fontSize: BASE_SIZE * 8, // 112
92 | lineHeight: LINE_HEIGHT * 5.333, // ~128,
93 | letterSpacing: 0,
94 | },
95 | h2: {
96 | fontSize: BASE_SIZE * 4, // 56
97 | lineHeight: 64,
98 | letterSpacing: 0.273438,
99 | },
100 | h3: {
101 | fontSize: BASE_SIZE * 3.214, // ~45
102 | lineHeight: 52,
103 | letterSpacing: 0.351562,
104 | },
105 | h4: {
106 | fontSize: BASE_SIZE * 2.428, // ~34
107 | lineHeight: 40,
108 | letterSpacing: 0.381836,
109 | },
110 | h5: {
111 | fontSize: BASE_SIZE * 1.714, // ~24
112 | lineHeight: 32,
113 | letterSpacing: 0.351562,
114 | },
115 | title: {
116 | fontSize: BASE_SIZE * 1.428, // ~20
117 | lineHeight: 28,
118 | letterSpacing: 0.361328,
119 | },
120 | subtitle: {
121 | fontSize: BASE_SIZE * 1.142, // 16
122 | lineHeight: 24,
123 | letterSpacing: 0.361328,
124 | },
125 | caption: {
126 | fontSize: BASE_SIZE * 0.857, // 12
127 | lineHeight: 16,
128 | letterSpacing: 0.361328,
129 | }
130 | });
131 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | native.react-ui-kit.com
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # **React Native UI Kit**
2 | React Native components based on React UI Kit
3 |
4 | Offical documentation of `React UI Kit Native` made for `React Native` applications and you can easily use the components in your project. A lot of predefined styles & properties so it's perfectly fit for prototyping of your app UI.
5 |
6 | - [React UI Kit Native - Website](https://native.react-ui-kit.com)
7 |
8 | Support: [contact@react-ui-kit.com](mailto:contact@react-ui-kit.com)
9 |
10 | ### **Setup**
11 | #### Install & usage
12 | 1. Install local module with react-ui-kit-native (it will also download all required dependencies)
13 |
14 | ```cmd
15 | npm install react-ui-kit-native --save
16 | ```
17 | 2. Use any component you want, all available props are available separately for each component below in this documentation. For example:
18 |
19 | ```javascript
20 | import React from 'react';
21 | import { Button } from 'react-ui-kit-native';
22 |
23 | export default class MyButton extends React.Component {
24 | render() {
25 | return (
26 |
27 | );
28 | }
29 | }
30 | ```
31 |
32 | ### **Components**
33 | List of available components:
34 |
35 | **Status** | **Type** | **Component** | **Description**
36 | :--- | :--- | :--- | :--- |
37 | :heavy_check_mark: | button | [`Button`](?id=Button) | react-native `TouchableOpacity` component with predefined styles & props
38 | :heavy_check_mark: | button | [`Link`](?id=Link) | react-native `Text` & `Linking` component with predefined properties
39 | :heavy_check_mark: | input | [`Input`](?id=Input) | react-native `TextInput` component with predefined styles & props
40 | :heavy_check_mark: | input | [`Select`](?id=Select) | [`react-native-modal-dropdown`](https://github.com/sohobloo/react-native-modal-dropdown) module with predefined styles
41 | :soon: | input | `Checkbox` | react-native `Switch` component with predefined styles & props
42 | :soon: | input | `Datepiker` | react-native `DatePickerIOS` & `DatePickerAndroid` component with predefined styles & props
43 | :soon: | input | `Progress` | react-native `ProgressViewIOS` & `ProgressBarAndroid` component with predefined styles & props
44 | :heavy_check_mark: | view | [`Block`](?id=Block) | react-native `View` component with predefined styles & props
45 | :heavy_check_mark: | view | [`Container`](?id=Container) | react-native `View` component with predefined styles & props
46 | :heavy_check_mark: | view | [`Text`](?id=Text) | react-native `Text` component with predefined styles & props
47 | :heavy_check_mark: | view | [`Icon`](?id=Icon) | [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) module with predefined props
48 | :heavy_check_mark: | view | [`Image`](?id=Image) | react-native `Image` component with predefined styles & props
49 | :soon: | view | `Badge` | react-native `View` component with predefined styles & props
50 | :soon: | view | `Label` | react-native `View` component with predefined styles & props
51 | :soon: | view | `Tabs` | react-native `TabBarIOS` component with predefined styles & props
52 | :soon: | view | `List` | react-native `ScrollView` component with predefined styles & props
53 | :soon: | view | `Menu` | react-native `ScrollView` component with predefined styles & props
54 |
55 | #### Button
56 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
57 | :--- | :--- | :--- | :---
58 | color | string | `#FFFFFF` | Specifies a text color
59 | size | number | `16` | Specifies a `fontSize` size
60 | label | string | null | Specifies a string for the button text
61 | icon | bool | null | Specifies an icon name - check [Icon](?id=icon) component
62 | family | bool | null | Specifies an icon family - check [Icon](?id=icon) component
63 | loading | bool | `false` | Disable touch/press events and render `ActivityIndicator`
64 | full | bool | `false` | Set the width of the component to 80% from the total width of the screen
65 | opacity | number | `0.8` | Determines what the `activeOpacity` of the Button should be when touch is active
66 | basic | bool | `false` | Include `styles.basic` with _backgroundColor: #FFFFFF_, _borderColor: #45547e_ █
67 | bold | bool | `false` | Determines whether the `styles.bold` should be included
68 | border | bool | `false` | Determines whether the `styles.border` should be included
69 | rounded | bool | `false` | Determines whether the `styles.basic` should be included
70 | primary | bool | `false` | Include `styles.primary` with _backgroundColor: #7CB527_ █
71 | secondary | bool | `false` | Include `styles.secondary` with _backgroundColor: #FF3D57_ █
72 | tertiary | bool | `false` | Include `styles.tertiary` with _backgroundColor: #7857A9_ █
73 | style | View style | `{}` | Add `style` properties for better customization
74 |
75 | For more properties visit [TouchableOpacity props](https://facebook.github.io/react-native/docs/touchableopacity#props)
76 |
77 | #### Link
78 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
79 | :--- | :--- | :--- | :---
80 | color | string | `color: #323642` █ | Specifies a text color
81 | href | string | null | A link (web URL, email, contact etc.)
82 | onPress | func | `() => {}` | Called when the touch is released
83 | style | View style | `{}` | Add `style` properties for better customization
84 |
85 | #### Input
86 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
87 | :--- | :--- | :--- | :---
88 | color | string | `#293042` █ | Specifies a text color
89 | placeHolderColor | string | `#5E6D95` █ | Specifies a `placeholderTextColor`
90 | bgColor | string | `#FFFFFF` | Specifies a `backgroundColor` color
91 | rounded | bool | `false` | Determines whether the `styles.rounded` should be included
92 | type | string | `default` | One of `'default', 'email-address', 'numeric', 'phone-pad', 'number-pad', 'decimal-pad'` for `keyboardType`
93 | help | string | null | Specifies a `string` or `node` for the text positioned between `label` and `input`
94 | left | bool | `true` | Positioning the icon on the `left`
95 | right | bool | `false` | Positioning the icon on the `right`
96 | transparent | bool | `false` | Determines whether the `styles.transparent` should be included
97 | borderless | bool | `false` | Determines whether the `styles.borderless` should be included
98 | border | bool | `false` | Determines whether the `styles.border` should be included
99 |
100 | For more properties visit [TextInput props](https://facebook.github.io/react-native/docs/textinput#props)
101 |
102 | #### Text
103 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
104 | :--- | :--- | :--- | :---
105 | h1 | bool | false | `styles.h1` with `fontSize` size of `112`
106 | h2 | bool | false | `styles.h2` with `fontSize` size of `56`
107 | h3 | bool | false | `styles.h3` with `fontSize` size of `~45`
108 | h4 | bool | false | `styles.h4` with `fontSize` size of `~34`
109 | h5 | bool | false | `styles.h5` with `fontSize` size of `~24`
110 | title | bool | false | `styles.title` with `fontSize` size of `~20`
111 | subtitle | bool | false | `styles.subtitle` with `fontSize` size of `16`
112 | caption | bool | false | `styles.caption` with `fontSize` size of `12`
113 | size | number | `14` | Specifies a `fontSize` size of `14`
114 | color | string | `#808080` █ | Specifies a text color `#808080`
115 | thin | bool | false | Set the `fontWeight` to `100`
116 | bold | bool | false | Set the `fontWeight` to `300`
117 | light | bool | false | Set the `fontWeight` to `bold`
118 | italic | bool | false | Set the `fontStyle` to `italic`
119 | align | bool | null | Specifies a `textAlign`
120 |
121 | For more properties visit [Text props](https://facebook.github.io/react-native/docs/text.html#props)
122 |
123 | #### Icon
124 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
125 | :--- | :--- | :--- | :---
126 | color | string | `#808080` █ | Specifies an Icon color `COLOR_DEFAULT #808080`
127 | size | number | `16` | Specifies a `fontSize` size, `BASE_SIZE 16px`
128 | name | string | null` | What icon to show, for more example see [Icon Explorer](https://oblador.github.io/react-native-vector-icons/)
129 | family | string | null` | One of the sets from [Bundled Icon Sets](https://github.com/oblador/react-native-vector-icons#bundled-icon-sets)
130 |
131 | For more properties visit [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
132 |
133 | #### Image
134 | **PROP** | **TYPE** | **DEFAULT** | **DESCRIPTION**
135 | :--- | :--- | :--- | :---
136 | avatar | string | `false` | Based on image width & height will add `borderRadius` with value of minimum between WIDTH & HEIGHT
137 | width | number | null | Add `WIDTH` to image style
138 | height | number | null | Add `HEIGHT` to image style
139 | size | number | null | **width** & **height** changed using: `tiny` divided by _2_, `small` divided by _1.25_ or `large` multiplied by _2_
140 | source | string | null | [Image source](https://facebook.github.io/react-native/docs/image#source) (either a remote URL or a local file resource).
141 |
142 | For more properties visit [Image props](https://facebook.github.io/react-native/docs/image#props)
143 |
144 | ### **Examples**
145 | A list of example screens based on the above components:
146 | #### Login
147 |
148 | 
149 |
150 | ```javascript
151 | import React from 'react';
152 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
153 |
154 | export default class LoginScreen extends React.Component {
155 | render() {
156 | return (
157 |
158 |
159 | LOGIN SCREEN
160 |
161 |
162 | Please login to your account
163 |
164 |
165 |
166 |
167 |
168 | );
169 | }
170 | }
171 | ```
172 |
173 | #### Forgot
174 | 
175 |
176 | ```javascript
177 | import React from 'react';
178 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
179 |
180 | export default class LoginScreen extends React.Component {
181 | static navigationOptions = {
182 | header: null,
183 | };
184 |
185 | render() {
186 | return (
187 |
188 |
189 | FORGOT PASSWORD
190 |
191 |
192 |
193 |
194 | );
195 | }
196 | }
197 | ```
198 |
199 | #### Register
200 | 
201 |
202 | ```javascript
203 | import React from 'react';
204 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
205 |
206 | export default class RegisterScreen extends React.Component {
207 | render() {
208 | return (
209 |
210 |
211 | REGISTER SCREEN
212 |
213 |
214 |
215 |
222 |
230 |
231 |
232 | );
233 | }
234 | }
235 | ```
236 |
237 | #### Profile
238 | 
239 |
240 | ```javascript
241 | import React from 'react';
242 | import { StyleSheet, Image } from 'react-native';
243 | import { Block, Text } from 'react-ui-kit-native';
244 |
245 | class ProfileScreen extends React.Component {
246 | render() {
247 | const { profile } = this.props;
248 |
249 | return (
250 |
251 | {profile.fullname}
252 |
253 | {`${profile.city}, ${profile.country}`}
254 | {profile.email}
255 |
256 | );
257 | }
258 | }
259 |
260 | ProfileScreen.defaultProps = {
261 | profile: {
262 | fullname: `React UI Kit`,
263 | city: `London`,
264 | country: `United Kingdom`,
265 | email: `contact@react-ui-kit.com`,
266 | avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,
267 | },
268 | };
269 |
270 | export default ProfileScreen;
271 |
272 | const styles = StyleSheet.create({
273 | profile: {
274 | paddingTop: 15,
275 | backgroundColor: '#fff',
276 | },
277 | avatar: {
278 | width: 200,
279 | height: 200,
280 | resizeMode: 'contain',
281 | },
282 | });
283 |
284 | ```
285 |
286 | ### **Work in progress**
287 | - [x] export components style as `styles` for easy import
288 | - [ ] create `theme HoC` with default **theme.js**
289 |
290 | ### **Contribution**
291 | Have an idea for a new component or Screen? Just contact us at contact@react-ui-kit.com and will add it to our list.
--------------------------------------------------------------------------------
/docs/images/native_forgot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/docs/images/native_forgot.jpg
--------------------------------------------------------------------------------
/docs/images/native_login.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/docs/images/native_login.jpg
--------------------------------------------------------------------------------
/docs/images/native_profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/docs/images/native_profile.jpg
--------------------------------------------------------------------------------
/docs/images/native_register.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/docs/images/native_register.jpg
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | react-ui-kit-native - React Native components based on React UI Kit
6 |
7 |
8 |
9 |
10 |
42 |
43 |
44 |
45 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/examples/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["babel-preset-expo"],
3 | "env": {
4 | "development": {
5 | "plugins": ["transform-react-jsx-source"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/examples/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/**/*
3 |
--------------------------------------------------------------------------------
/examples/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/examples/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Platform, StatusBar, StyleSheet, View } from 'react-native';
3 | import { AppLoading, Asset, Font, Icon } from 'expo';
4 | import AppNavigator from './navigation/AppNavigator';
5 |
6 | export default class App extends React.Component {
7 | state = {
8 | isLoadingComplete: false,
9 | };
10 |
11 | render() {
12 | if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
13 | return (
14 |
19 | );
20 | } else {
21 | return (
22 |
23 | {Platform.OS === 'ios' && }
24 |
25 |
26 | );
27 | }
28 | }
29 |
30 | _loadResourcesAsync = async () => {
31 | return Promise.all([
32 | Asset.loadAsync([
33 | require('./assets/images/react-ui-kit-logo.png'),
34 | ]),
35 | Font.loadAsync({
36 | // This is the font that we are using for our tab bar
37 | // ...Icon.Ionicons.font,
38 | ...Icon.FontAwesome.font,
39 | // We include SpaceMono because we use it in HomeScreen.js. Feel free
40 | // to remove this if you are not using it in your app
41 | 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
42 | }),
43 | ]);
44 | };
45 |
46 | _handleLoadingError = error => {
47 | // In this case, you might want to report the error to your error
48 | // reporting service, for example Sentry
49 | console.warn(error);
50 | };
51 |
52 | _handleFinishLoading = () => {
53 | this.setState({ isLoadingComplete: true });
54 | };
55 | }
56 |
57 | const styles = StyleSheet.create({
58 | container: {
59 | flex: 1,
60 | backgroundColor: '#fff',
61 | },
62 | });
63 |
--------------------------------------------------------------------------------
/examples/__tests__/App-test.js:
--------------------------------------------------------------------------------
1 | import 'react-native';
2 | import React from 'react';
3 | import App from '../App';
4 | import renderer from 'react-test-renderer';
5 | import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
6 |
7 | describe('App snapshot', () => {
8 | jest.useFakeTimers();
9 | beforeEach(() => {
10 | NavigationTestUtils.resetInternalState();
11 | });
12 |
13 | it('renders the loading screen', async () => {
14 | const tree = renderer.create().toJSON();
15 | expect(tree).toMatchSnapshot();
16 | });
17 |
18 | it('renders the root without loading screen', async () => {
19 | const tree = renderer.create().toJSON();
20 | expect(tree).toMatchSnapshot();
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/examples/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "examples",
4 | "description": "Example screens using components based on react-ui-kit-native",
5 | "slug": "examples",
6 | "privacy": "public",
7 | "sdkVersion": "29.0.0",
8 | "platforms": ["ios", "android"],
9 | "version": "1.0.0",
10 | "orientation": "portrait",
11 | "icon": "./assets/images/icon.png",
12 | "splash": {
13 | "image": "./assets/images/splash.png",
14 | "resizeMode": "contain",
15 | "backgroundColor": "#ffffff"
16 | },
17 | "updates": {
18 | "fallbackToCacheTimeout": 0
19 | },
20 | "assetBundlePatterns": [
21 | "**/*"
22 | ],
23 | "ios": {
24 | "supportsTablet": true
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/examples/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/examples/assets/fonts/SpaceMono-Regular.ttf
--------------------------------------------------------------------------------
/examples/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/examples/assets/images/icon.png
--------------------------------------------------------------------------------
/examples/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-ui-kit/native/d45e56862d36e2bd515c681167e6f92728fb5652/examples/assets/images/splash.png
--------------------------------------------------------------------------------
/examples/components/StyledText.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text } from 'react-native';
3 |
4 | export class MonoText extends React.Component {
5 | render() {
6 | return ;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/examples/components/TabBarIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from 'expo';
3 |
4 | export default class TabBarIcon extends React.Component {
5 | render() {
6 | const color = this.props.focused ? '#88B04B' : '#FFFFFF';
7 | return ;
8 | }
9 | }
--------------------------------------------------------------------------------
/examples/components/__tests__/StyledText-test.js:
--------------------------------------------------------------------------------
1 | import 'react-native';
2 | import React from 'react';
3 | import { MonoText } from '../StyledText';
4 | import renderer from 'react-test-renderer';
5 |
6 | it('renders correctly', () => {
7 | const tree = renderer.create(Snapshot test!).toJSON();
8 |
9 | expect(tree).toMatchSnapshot();
10 | });
11 |
--------------------------------------------------------------------------------
/examples/constants/Colors.js:
--------------------------------------------------------------------------------
1 | const tintColor = '#2f95dc';
2 |
3 | export default {
4 | tintColor,
5 | tabIconDefault: '#ccc',
6 | tabIconSelected: tintColor,
7 | tabBar: '#fefefe',
8 | errorBackground: 'red',
9 | errorText: '#fff',
10 | warningBackground: '#EAEB5E',
11 | warningText: '#666804',
12 | noticeBackground: tintColor,
13 | noticeText: '#fff',
14 | };
15 |
--------------------------------------------------------------------------------
/examples/constants/Layout.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 |
3 | const width = Dimensions.get('window').width;
4 | const height = Dimensions.get('window').height;
5 |
6 | export default {
7 | window: {
8 | width,
9 | height,
10 | },
11 | isSmallDevice: width < 375,
12 | };
13 |
--------------------------------------------------------------------------------
/examples/navigation/AppNavigator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createSwitchNavigator } from 'react-navigation';
3 |
4 | import MainTabNavigator from './MainTabNavigator';
5 |
6 | export default createSwitchNavigator({
7 | // You could add another route here for authentication.
8 | // Read more at https://reactnavigation.org/docs/en/auth-flow.html
9 | Main: MainTabNavigator,
10 | });
--------------------------------------------------------------------------------
/examples/navigation/MainTabNavigator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
3 |
4 | import TabBarIcon from '../components/TabBarIcon';
5 | import LoginScreen from '../screens/LoginScreen';
6 | import ForgotScreen from '../screens/ForgotScreen';
7 | import RegisterScreen from '../screens/RegisterScreen';
8 | import ProfileScreen from '../screens/ProfileScreen';
9 | // import CameraScreen from '../screens/CameraScreen';
10 |
11 | const LoginStack = createStackNavigator({
12 | Login: LoginScreen,
13 | });
14 |
15 | LoginStack.navigationOptions = {
16 | tabBarLabel: 'Login',
17 | tabBarIcon: ({ focused }) => ,
18 | };
19 |
20 | const ForgotStack = createStackNavigator({
21 | Forgot: ForgotScreen,
22 | });
23 |
24 | ForgotStack.navigationOptions = {
25 | tabBarLabel: 'Forgot',
26 | tabBarIcon: ({ focused }) => ,
27 | };
28 |
29 | const RegisterStack = createStackNavigator({
30 | Register: RegisterScreen,
31 | });
32 |
33 | RegisterStack.navigationOptions = {
34 | tabBarLabel: 'Register',
35 | tabBarIcon: ({ focused }) => ,
36 | };
37 |
38 | const ProfileStack = createStackNavigator({
39 | Profile: ProfileScreen,
40 | });
41 |
42 | ProfileStack.navigationOptions = {
43 | tabBarLabel: 'Profile',
44 | tabBarIcon: ({ focused }) => ,
45 | };
46 |
47 | export default createBottomTabNavigator(
48 | {
49 | LoginStack,
50 | ForgotStack,
51 | RegisterStack,
52 | ProfileStack,
53 | },
54 | {
55 | tabBarOptions: {
56 | activeTintColor: '#88B04B',
57 | inactiveTintColor: '#FFFFFF',
58 | style: {
59 | backgroundColor: '#293042',
60 | paddingVertical: 4,
61 | },
62 | },
63 | }
64 | );
65 |
--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-new-project",
3 | "main": "node_modules/expo/AppEntry.js",
4 | "private": true,
5 | "scripts": {
6 | "start": "expo start",
7 | "android": "expo start --android",
8 | "ios": "expo start --ios",
9 | "eject": "expo eject",
10 | "test": "node ./node_modules/jest/bin/jest.js --watchAll"
11 | },
12 | "jest": {
13 | "preset": "jest-expo"
14 | },
15 | "dependencies": {
16 | "expo": "29.0.0",
17 | "react": "16.3.1",
18 | "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
19 | "react-navigation": "^2.9.3",
20 | "react-ui-kit-native": "^0.0.18"
21 | },
22 | "devDependencies": {
23 | "jest-expo": "29.0.0",
24 | "react-native-vector-icons": "^6.0.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/screens/CameraScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ScrollView, Text, StyleSheet } from 'react-native';
3 |
4 | export default class CameraScreen extends React.Component {
5 | static navigationOptions = {
6 | title: 'Camera',
7 | };
8 |
9 | render() {
10 | return (
11 |
12 | Camera
13 |
14 | );
15 | }
16 | }
17 |
18 | const styles = StyleSheet.create({
19 | container: {
20 | flex: 1,
21 | paddingTop: 15,
22 | backgroundColor: '#fff',
23 | },
24 | });
25 |
--------------------------------------------------------------------------------
/examples/screens/ForgotScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, Block, Text, Input } from 'react-ui-kit-native';
3 |
4 | export default class LoginScreen extends React.Component {
5 | static navigationOptions = {
6 | header: null,
7 | };
8 |
9 | render() {
10 | return (
11 |
12 | FORGOT PASSWORD
13 |
14 |
15 |
16 | );
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/examples/screens/LoginScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
3 |
4 | export default class LoginScreen extends React.Component {
5 | static navigationOptions = {
6 | header: null,
7 | };
8 |
9 | render() {
10 | return (
11 |
12 |
13 | LOGIN SCREEN
14 |
15 |
16 | Please login to your account
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/screens/ProfileScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, Image } from 'react-native';
3 | import { Block, Text } from 'react-ui-kit-native';
4 |
5 | class ProfileScreen extends React.Component {
6 | static navigationOptions = {
7 | header: null,
8 | };
9 |
10 | render() {
11 | const { profile } = this.props;
12 |
13 | return (
14 |
15 | {profile.fullname}
16 |
17 | {`${profile.city}, ${profile.country}`}
18 | {profile.email}
19 |
20 | );
21 | }
22 | }
23 |
24 | ProfileScreen.defaultProps = {
25 | profile: {
26 | fullname: `React UI Kit`,
27 | street: `Same same 32`,
28 | city: `London`,
29 | state: `Great London`,
30 | country: `United Kingdom`,
31 | age: 32,
32 | email: `contact@react-ui-kit.com`,
33 | mobile: `0755000000`,
34 | score: 2593,
35 | avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,
36 | },
37 | };
38 |
39 | export default ProfileScreen;
40 |
41 | const styles = StyleSheet.create({
42 | profile: {
43 | paddingTop: 15,
44 | backgroundColor: '#fff',
45 | },
46 | avatar: {
47 | width: 200,
48 | height: 200,
49 | resizeMode: 'contain',
50 | },
51 | });
52 |
--------------------------------------------------------------------------------
/examples/screens/RegisterScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Block, Button, Input, Text } from 'react-ui-kit-native';
3 |
4 | export default class RegisterScreen extends React.Component {
5 | static navigationOptions = {
6 | header: null,
7 | };
8 |
9 | render() {
10 | return (
11 |
12 |
13 | REGISTER SCREEN
14 |
15 |
16 |
17 |
24 |
32 |
33 |
34 | );
35 | }
36 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import Button from './components/buttons/Button';
2 | import Link from './components/buttons/Link';
3 |
4 | import Input from './components/inputs/Input';
5 | import Select from './components/inputs/Select';
6 |
7 | import Block from './components/views/Block';
8 | import Container from './components/views/Container';
9 | import Text from './components/views/Text';
10 | import Icon from './components/views/Icon';
11 |
12 | import constants from './utils/constants';
13 | import Utils from './utils/';
14 |
15 | export { Button, Link, Input, Select, Block, Container, Text, Icon, constants, Utils };
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-ui-kit-native",
3 | "version": "0.0.20",
4 | "description": "React Native components based on React UI Kit",
5 | "homepage": "https://native.react-ui-kit.com",
6 | "main": "index.js",
7 | "jest": {
8 | "preset": "jest-expo"
9 | },
10 | "scripts": {
11 | "start": "expo start ./examples/",
12 | "android": "expo start --android ./examples/",
13 | "ios": "expo start --ios ./examples/",
14 | "eject": "expo eject",
15 | "lint": "eslint components/** utils/**",
16 | "test": "node ./node_modules/jest/bin/jest.js --watchAll",
17 | "docs": "docsify serve ./docs"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "git+https://github.com/react-ui-kit/native.git"
22 | },
23 | "keywords": [
24 | "react",
25 | "react-native",
26 | "ui",
27 | "ui-kit"
28 | ],
29 | "author": "Hetmann Wilhelm Iohan ",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/react-ui-kit/native/issues"
33 | },
34 | "dependencies": {
35 | "react-native-modal-dropdown": "^0.6.2",
36 | "react-navigation": "^2.9.3"
37 | },
38 | "devDependencies": {
39 | "docsify": "^4.7.1",
40 | "eslint": "^5.2.0",
41 | "eslint-config-universe": "^1.0.7",
42 | "jest-expo": "29.0.0",
43 | "prettier": "^1.14.0",
44 | "prop-types": "^15.6.2",
45 | "react": "^16.4.1",
46 | "react-native": "^0.56.0",
47 | "react-native-vector-icons": "^6.0.0"
48 | },
49 | "peerDependencies": {
50 | "react": "*",
51 | "react-native": "*",
52 | "react-native-vector-icons": "*"
53 | },
54 | "eslintConfig": {
55 | "extends": "universe/native"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/utils/api.js:
--------------------------------------------------------------------------------
1 | // API using fetch to communicate with remote servers
2 | class API {
3 | constructor(url, headers) {
4 | this.url = url;
5 | this.headers = {
6 | Accept: 'application/json',
7 | 'Content-Type': 'application/json',
8 | ...headers,
9 | };
10 | this.response = undefined;
11 | }
12 |
13 | authorization(tokens) {
14 | if (tokens) {
15 | this.headers = {
16 | ...this.headers,
17 | Authorization: `Bearer ${tokens}`,
18 | };
19 | }
20 | }
21 |
22 | get(url, headers) {
23 | const fetchUrl = `${this.url}${url}`;
24 |
25 | if (headers) {
26 | this.headers = { ...this.headers, ...headers };
27 | }
28 | // eslint-disable-next-line
29 | return fetch(fetchUrl, {
30 | method: 'GET',
31 | headers: this.headers,
32 | }).then(response => response.json());
33 | }
34 |
35 | post(url, data, headers) {
36 | const fetchUrl = `${this.url}${url}`;
37 |
38 | if (headers) {
39 | this.headers = { ...this.headers, ...headers };
40 | }
41 | // eslint-disable-next-line
42 | return fetch(fetchUrl, {
43 | method: 'POST',
44 | headers: this.headers,
45 | body: JSON.stringify(data),
46 | }).then(response => response.json());
47 | }
48 | }
49 |
50 | export default API;
51 |
52 | /**
53 | // usage example using remote service https://reqres.in/
54 |
55 | const apiUrl = `https://reqres.in/api`;
56 | const apiInstance = new API(apiUrl);
57 |
58 | const login = payload => apiInstance.post(`/login`, payload);
59 |
60 | const credentials = {
61 | email: 'peter@klaven',
62 | password: 'cityslicka',
63 | };
64 |
65 | login(credentials)
66 | .then(response => {
67 | apiInstance.authorization(response.token); // setting the header Authorization
68 | return response.token;
69 | })
70 | .catch(err => {
71 | const code = err.response ? err.response.status : 500;
72 | const message = err.response ? err.response.error : err;
73 | return {
74 | code,
75 | message,
76 | };
77 | });
78 | */
79 |
--------------------------------------------------------------------------------
/utils/constants.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 | const { width, height } = Dimensions.get('window');
3 |
4 | // global colors
5 | export const COLOR_PRIMARY = '#323642';
6 | export const COLOR_SECONDARY = '#81bd4a';
7 | export const COLOR_TERTIARY = '#cfcdc4';
8 |
9 | export const COLOR_WHITE = '#FFFFFF';
10 | export const COLOR_BLACK = '#000000';
11 | export const COLOR_LIGHT = '#BBBBBB';
12 |
13 | export const COLOR_WARNING = COLOR_PRIMARY;
14 | export const COLOR_ERROR = '#CC333F';
15 | export const COLOR_INFO = '#00A0B0';
16 | export const COLOR_SUCCESS = '#8A9B0F';
17 |
18 | export const HEADER_BACKGROUND = '#2A2C2E';
19 | export const FOOTER_BACKGROUND = HEADER_BACKGROUND;
20 | export const TEXT_COLOR = COLOR_PRIMARY;
21 | export const LINK_COLOR = COLOR_PRIMARY;
22 | export const PLACEHOLDER_COLOR = COLOR_PRIMARY;
23 | export const DIVIDER_COLOR = `rgba(0, 0, 0, 0.3)`;
24 | export const BACKGROUND_COLOR = COLOR_SECONDARY;
25 | export const OVERLAY_BACKGROUND = `rgba(35, 35, 35, 0.70)`; // #232323
26 | export const INPUT_BACKGROUND = COLOR_TERTIARY;
27 | export const BUTTON_BACKGROUND = COLOR_PRIMARY;
28 | export const BUTTON_DISABLED = COLOR_SECONDARY;
29 | export const SHADOW_COLOR = COLOR_SECONDARY;
30 |
31 | export const COLORS = {
32 | BACKGROUND_COLOR,
33 | BUTTON_BACKGROUND,
34 | BUTTON_DISABLED,
35 | COLOR_BLACK,
36 | COLOR_ERROR,
37 | COLOR_INFO,
38 | COLOR_LIGHT,
39 | COLOR_PRIMARY,
40 | COLOR_SECONDARY,
41 | COLOR_SUCCESS,
42 | COLOR_TERTIARY,
43 | COLOR_WARNING,
44 | COLOR_WHITE,
45 | DIVIDER_COLOR,
46 | FOOTER_BACKGROUND,
47 | HEADER_BACKGROUND,
48 | INPUT_BACKGROUND,
49 | LINK_COLOR,
50 | OVERLAY_BACKGROUND,
51 | PLACEHOLDER_COLOR,
52 | SHADOW_COLOR,
53 | TEXT_COLOR,
54 | };
55 |
56 | // global sizes
57 | export const BASE_SIZE = 14;
58 | export const FONT_NAME = undefined;
59 | export const FONT_SIZE = BASE_SIZE;
60 | export const FONT_SIZE_H1 = FONT_SIZE * 2;
61 | export const FONT_SIZE_H2 = FONT_SIZE * 1.71;
62 | export const FONT_SIZE_H3 = FONT_SIZE * 1.4;
63 | export const FONT_SIZE_H4 = FONT_SIZE * 1.2;
64 | export const FONT_SIZE_H5 = FONT_SIZE;
65 |
66 | export const BORDER_RADIUS = 1;
67 | export const INPUT_HEIGHT = BASE_SIZE * 3;
68 | export const INPUT_RADIUS = BORDER_RADIUS;
69 |
70 | export const BUTTON_RADIUS = BORDER_RADIUS;
71 | export const BUTTON_HEIGHT = BASE_SIZE * 3;
72 | export const BUTTON_FONT_SIZE = FONT_SIZE;
73 | export const BUTTON_PADDING = (BUTTON_HEIGHT - BUTTON_FONT_SIZE - 2) / 2;
74 |
75 | // global paddings & margins
76 | export const PADDING = BASE_SIZE * 1.5;
77 | export const MARGIN = BASE_SIZE / 2;
78 |
79 | // device dimensions
80 | export const WIDTH = width;
81 | export const HEIGHT = height;
82 | export const HEADER_HEIGHT = BASE_SIZE * 3.5;
83 | export const FOOTER_HEIGHT = BASE_SIZE * 3.5;
84 |
85 | export const SIZES = {
86 | BASE_SIZE,
87 | BORDER_RADIUS,
88 | BUTTON_FONT_SIZE,
89 | BUTTON_HEIGHT,
90 | BUTTON_PADDING,
91 | BUTTON_RADIUS,
92 | FONT_NAME,
93 | FONT_SIZE,
94 | FONT_SIZE_H1,
95 | FONT_SIZE_H2,
96 | FONT_SIZE_H3,
97 | FONT_SIZE_H4,
98 | FONT_SIZE_H5,
99 | FOOTER_HEIGHT,
100 | HEADER_HEIGHT,
101 | HEIGHT,
102 | INPUT_HEIGHT,
103 | INPUT_RADIUS,
104 | MARGIN,
105 | PADDING,
106 | WIDTH,
107 | };
108 |
--------------------------------------------------------------------------------
/utils/index.js:
--------------------------------------------------------------------------------
1 | import Api from './api';
2 | import Storage from './storage';
3 | import * as Constants from './constants';
4 |
5 | export default {
6 | api: Api,
7 | storage: Storage,
8 | constants: Constants,
9 | };
10 |
--------------------------------------------------------------------------------
/utils/storage.js:
--------------------------------------------------------------------------------
1 | import { AsyncStorage } from 'react-native';
2 |
3 | // storage for read/write data to device storage
4 | // eslint-disable-next-line
5 | const get = async (key, cb) => await AsyncStorage.getItem(key, (err, resp) => cb ? cb(err, resp) : null);
6 | // eslint-disable-next-line
7 | const getAll = async (keys, cb) => await AsyncStorage.multiGet(keys, (err, resp) => cb ? cb(err, resp) : null);
8 | // eslint-disable-next-line
9 | const set = async (key, payload, cb) => await AsyncStorage.setItem(key, JSON.stringify(payload), (err, resp) => cb ? cb(err, resp) : null);
10 | // eslint-disable-next-line
11 | const remove = async (keys, cb) => await AsyncStorage.multiRemove(keys, (err) => cb ? cb(err) : null);
12 |
13 | const Storage = {
14 | get,
15 | getAll,
16 | set,
17 | remove,
18 | };
19 |
20 | export default Storage;
21 |
--------------------------------------------------------------------------------