├── .babelrc
├── .gitignore
├── .watchmanconfig
├── App.js
├── README.md
├── app.json
├── assets
├── expo-qr.png
├── icon.png
├── screenshots.jpg
└── splash.png
├── native-base-theme
├── components
│ ├── Badge.js
│ ├── Body.js
│ ├── Button.js
│ ├── Card.js
│ ├── CardItem.js
│ ├── CheckBox.js
│ ├── Container.js
│ ├── Content.js
│ ├── Fab.js
│ ├── Footer.js
│ ├── FooterTab.js
│ ├── Form.js
│ ├── H1.js
│ ├── H2.js
│ ├── H3.js
│ ├── Header.js
│ ├── Icon.js
│ ├── Input.js
│ ├── InputGroup.js
│ ├── Item.js
│ ├── Label.js
│ ├── Left.js
│ ├── ListItem.js
│ ├── Picker.android.js
│ ├── Picker.ios.js
│ ├── Radio.js
│ ├── Right.js
│ ├── Segment.js
│ ├── Separator.js
│ ├── Spinner.js
│ ├── Subtitle.js
│ ├── SwipeRow.js
│ ├── Switch.js
│ ├── Tab.js
│ ├── TabBar.js
│ ├── TabContainer.js
│ ├── TabHeading.js
│ ├── Text.js
│ ├── Textarea.js
│ ├── Thumbnail.js
│ ├── Title.js
│ ├── Toast.js
│ ├── View.js
│ └── index.js
└── variables
│ ├── commonColor.js
│ ├── material.js
│ └── platform.js
├── package.json
├── src
├── components
│ ├── Alphabet.js
│ ├── Carousel.js
│ ├── Dashboard.js
│ ├── Modal.js
│ ├── PageTitle.js
│ └── StatusBarView.js
├── screens
│ ├── DetailScreen.js
│ ├── HomeScreen.js
│ ├── IntroScreen.js
│ └── TestScreen.js
└── stores
│ └── AppStore.js
├── yarn-error.log
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["babel-preset-expo"],
3 | "env": {
4 | "development": {
5 | "plugins": ["transform-react-jsx-source"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text, Button, Icon, Footer, FooterTab, StyleProvider } from 'native-base';
3 | import { TabNavigator, StackNavigator } from "react-navigation";
4 |
5 | import HomeScreen from './src/screens/HomeScreen';
6 | import TestScreen from './src/screens/TestScreen';
7 | import IntroScreen from './src/screens/IntroScreen';
8 | import DetailScreen from './src/screens/DetailScreen';
9 |
10 |
11 | import getTheme from './native-base-theme/components';
12 | import platform from './native-base-theme/variables/platform';
13 | import AppStore from './src/stores/AppStore.js';
14 | import {observer} from 'mobx-react';
15 |
16 | // const HomeStack = StackNavigator({
17 | // Home: {
18 | // screen: HomeScreen,
19 | // navigationOptions: {
20 | // header: null
21 | // },
22 | // },
23 | // Detail: {
24 | // screen: DetailScreen,
25 | // },
26 | // });
27 |
28 | const Nav = (MainScreenNavigator = TabNavigator(
29 | {
30 | Home: { screen: HomeScreen },
31 | Test: { screen: TestScreen },
32 | Intro: {
33 | screen: IntroScreen,
34 | navigationOptions: { tabBarVisible: false }
35 | },
36 | Detail: { screen: DetailScreen }
37 | },
38 | {
39 | tabBarPosition: "bottom",
40 | tabBarComponent: props => {
41 | return (
42 |
73 | );
74 | }
75 | }
76 | ));
77 |
78 |
79 | export default class App extends React.Component {
80 | render() {
81 | return (
82 |
83 |
84 |
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Native Starter
2 | This is a simple starter project for **React Native**, **Native Base**, **MobX**, **React Native Navigation**.
3 |
4 | The most useful components, libraries and packages for **react-native** are gathered together.
5 |
6 | Demo of this project is available on [Expo](https://expo.io/@malik-aliyev-94/expo-react-native-starter).
7 |
8 | 
9 |
10 | [Watch YouTube video](https://youtu.be/e2anEmxTODI)
11 |
12 | [](https://youtu.be/e2anEmxTODI)
13 |
14 | ## Contents
15 | 1. NativeBase - Customize getTheme
16 | 2. Navigation
17 | 3. Routing parameters
18 | 4. Modal
19 | 5. First Launch screen (AsyncStorage)
20 | 6. Swiper
21 | 7. Horizontal Scroll
22 | 8. Carousel
23 | 9. Background Image, Text over an image
24 | 10. Gradient background
25 | 11. Fetch example
26 | 12. Status bar
27 | 13. MobX
28 | 14. Layout
29 | 15. OneSignal Notifications
30 | 16. WebView
31 |
32 | ### NativeBase
33 | [NativeBase](https://nativebase.io) - open source project to build React Native apps (Essential cross-platform UI components for React Native). You can get more brief information about NativeBase from their [website]((https://nativebase.io) or [GitHub](https://github.com/GeekyAnts/NativeBase) page.
34 |
35 | In this project we have used customized NativeBase components.
36 |
37 | **Steps to be followed to customize NativeBase:**
38 |
39 | - Run this command from your terminal after installing native-base.
40 | ```bash
41 | node node_modules/native-base/ejectTheme.js
42 | ```
43 | - All the theme files and variables get added to your project root. Change the variables or theme files.
44 | - Wrap the code or component to which you want to apply the theme with StyleProvider.
45 | - Pass the variable i.e., platform/material/commonColors.js as the parameter of theme function, which is passed as a value to style prop of component StyleProvider.
46 | - The theme you pass should be a function.
47 |
48 | The **native-base-theme** dir is generated automatically after running the command above. Inside the directory are two folders named components and variables.
49 |
50 | The components folder contain the theme styling files for all the components. This is where you would change the style properties of the components if you need to.
51 |
52 | Example, if you need to change the height of Button component, you'll need to change this line in **native-base-theme/components/Button.js**.
53 |
54 | The variables folder contain three preset theme variables. You can change the variables (for color, fontFamily, iconFamily etc) for a uniform look and feel throughout your app.
55 |
56 | Read more about customization here https://docs.nativebase.io/Customize.html#Customize
57 |
58 | ## Navigation
59 | [React Navigation](https://github.com/react-navigation/react-navigation) This is one of the best React Native libraries for Routing and Navigation purposes.
60 |
61 | Read the doc from the official [website](https://reactnavigation.org).
62 |
63 | In this project we have used **TabNavigator**. You can see the configuration in **./App.js** file.
64 |
65 | Some Tips for React navigation
66 |
67 | * If you want to hide tabBar on some screen, set **navigationOptions: { tabBarVisible: false }**
68 |
69 | For example:
70 |
71 | ```javascript
72 | const Nav = (MainScreenNavigator = TabNavigator(
73 | {
74 | Home: { screen: HomeScreen },
75 | Test: { screen: TestScreen },
76 | Intro: {
77 | screen: IntroScreen,
78 | navigationOptions: { tabBarVisible: false }
79 | },
80 | Detail: { screen: DetailScreen }
81 | },
82 | {
83 | ...
84 | }
85 | ));
86 | ```
87 |
88 | * You can create a StackNavigator for each screen
89 | * Use withNavigation from react-navigation to access navigation from everywhere :)
90 | See **./src/components/Alphabet.js** for example.
91 | ```javascript
92 | import { withNavigation } from 'react-navigation';
93 | ```
94 |
95 | [withNavigation](https://reactnavigation.org/docs/with-navigation.html#docsNav) is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.
96 |
97 | ## Routing parameters
98 | How to pass parameters to the screens ?
99 |
100 | See the example in the **Alphabet** component. Params are passed to the navigate method as the second parameter.
101 |
102 | ```javascript
103 | props.navigation.navigate("Detail", {letter: item[0]}) }>
105 | ...
106 | ```
107 |
108 | In **./src/screen/DetailScreen** you can see how to access this parameters.
109 |
110 | ```javascript
111 | const DetailScreen = (props) => (
112 |
113 | This is letter
114 | { props.navigation.state.params.letter }
115 |
116 | );
117 | ```
118 | Read more on the [website](https://reactnavigation.org/docs/params.html#docsNav).
119 |
120 | ## Modal
121 | Click the last item on the tabBar navigation to see the modal example.
122 |
123 | The Modal component is a simple way to present content above an enclosing view.
124 |
125 | To show or hide modal set the **visible** attribute to **true** or **false**.
126 |
127 | ```javascript
128 | import { Modal } from 'react-native';
129 |
130 |
152 |
153 | Hello Swiper
154 |
155 |
156 | Beautiful
157 |
158 |
159 | And simple
160 |
161 |
162 | ```
163 | ## Horizontal Scroll
164 |
165 | Open the **./src/components/Alphabet** component. You can see horizontal scrolling example in this file.
166 |
167 | ```javascript
168 |
169 | ...
170 |
171 | ```
172 | To ***hide Scroll Indicator*** set **showsHorizontalScrollIndicator** to **false**
173 |
174 | ## Carousel
175 |
176 | ## Background Image, Text over an image
177 | You can use ImageBackground component for this purpose. See the example in the **./src/screens/TestScreen** file.
178 |
179 | ```javascript
180 | import { ImageBackground } from 'react-native';
181 |
182 |
186 | This is a text over an image
187 |
188 | ```
189 | ## Gradient background
190 | This component is included into [Expo SDK](https://docs.expo.io/versions/latest/sdk/linear-gradient.html).
191 |
192 | We have used this component to render background gradient for letters in the Alphabet component.
193 |
194 | ```javascript
195 |
210 |
211 | {item[0]}
212 |
213 |
214 | ```
215 |
216 | [GitHub repo](https://github.com/react-native-community/react-native-linear-gradient) is available.
217 |
218 | ## Fetch example
219 | First Read the [React Native Networking](https://facebook.github.io/react-native/docs/network.html#docsNav) doc from the official website.
220 |
221 | Then open the **IntroScreen** and see the example.
222 |
223 | ```javascript
224 | componentDidMount(){
225 | return fetch('https://api.github.com/users/malik-aliyev-94')
226 | .then((response) => response.json())
227 | .then((responseJson) => {
228 |
229 | this.setState({
230 | isLoading: false,
231 | data: responseJson,
232 | }, function(){
233 |
234 | });
235 |
236 | })
237 | .catch((error) =>{
238 | console.error(error);
239 | });
240 | }
241 | ```
242 | Also ActivityIndicator is used here.
243 |
244 | ## Status bar
245 | There is a small [package](https://github.com/malik-aliyev-94/react-native-is-iphonex) to determine whether if the device is iPhoneX and then set he StatusBar height.
246 |
247 | ```javascript
248 | export const StatusBarView = (props) => (
249 |
250 | );
251 | ```
252 |
253 | ## MobX
254 | MobX is a simple, scalable state management tool.
255 |
256 | Dashboard on the HomeScreen also Modal window configured using MobX.
257 |
258 | Store file is located at the **./src/stores** dir.
259 |
260 | Read more about MobX [here](https://mobx.js.org/index.html).
261 |
262 | [React bindings for MobX](https://github.com/mobxjs/mobx-react)
263 | ## Layout
264 | [The Full React Native Layout Cheat Sheet](https://medium.com/@drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c) - this article on medium is highly recommended to read to understand
265 |
266 | ## OneSignal Notifications
267 | ## WebView
268 |
269 | OneSignal Notifications, WebView and other features and components will be included to this project in the future.
270 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "React Native Starter",
4 | "description": "This project is really great.",
5 | "slug": "expo-react-native-starter",
6 | "privacy": "public",
7 | "sdkVersion": "25.0.0",
8 | "platforms": ["ios", "android"],
9 | "version": "1.0.0",
10 | "orientation": "portrait",
11 | "icon": "./assets/icon.png",
12 | "splash": {
13 | "image": "./assets/splash.png",
14 | "resizeMode": "contain",
15 | "backgroundColor": "#ffffff"
16 | },
17 | "ios": {
18 | "supportsTablet": true
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/assets/expo-qr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malik-aliyev-94/react-native-starter/6c2b3ecf77aeb142fbfcde400a1635b32c9a8e5f/assets/expo-qr.png
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malik-aliyev-94/react-native-starter/6c2b3ecf77aeb142fbfcde400a1635b32c9a8e5f/assets/icon.png
--------------------------------------------------------------------------------
/assets/screenshots.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malik-aliyev-94/react-native-starter/6c2b3ecf77aeb142fbfcde400a1635b32c9a8e5f/assets/screenshots.jpg
--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malik-aliyev-94/react-native-starter/6c2b3ecf77aeb142fbfcde400a1635b32c9a8e5f/assets/splash.png
--------------------------------------------------------------------------------
/native-base-theme/components/Badge.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const badgeTheme = {
5 | ".primary": {
6 | backgroundColor: variables.btnPrimaryBg
7 | },
8 | ".warning": {
9 | backgroundColor: variables.btnWarningBg
10 | },
11 | ".info": {
12 | backgroundColor: variables.btnInfoBg
13 | },
14 | ".success": {
15 | backgroundColor: variables.btnSuccessBg
16 | },
17 | ".danger": {
18 | backgroundColor: variables.btnDangerBg
19 | },
20 | "NativeBase.Text": {
21 | color: variables.badgeColor,
22 | fontSize: variables.fontSizeBase,
23 | lineHeight: variables.lineHeight - 1,
24 | textAlign: "center",
25 | paddingHorizontal: 3
26 | },
27 | backgroundColor: variables.badgeBg,
28 | padding: variables.badgePadding,
29 | paddingHorizontal: 6,
30 | alignSelf: "flex-start",
31 | justifyContent: variables.platform === "ios" ? "center" : undefined,
32 | borderRadius: 13.5,
33 | height: 27
34 | };
35 | return badgeTheme;
36 | };
37 |
--------------------------------------------------------------------------------
/native-base-theme/components/Body.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const bodyTheme = {
5 | flex: 1,
6 | alignItems: 'center',
7 | alignSelf: 'center',
8 | };
9 |
10 | return bodyTheme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/Button.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const platformStyle = variables.platformStyle;
5 | const platform = variables.platform;
6 | const darkCommon = {
7 | 'NativeBase.Text': {
8 | color: variables.brandDark,
9 | },
10 | 'NativeBase.Icon': {
11 | color: variables.brandDark,
12 | },
13 | 'NativeBase.IconNB': {
14 | color: variables.brandDark,
15 | }
16 | }
17 | const lightCommon = {
18 | 'NativeBase.Text': {
19 | color: variables.brandLight,
20 | },
21 | 'NativeBase.Icon': {
22 | color: variables.brandLight,
23 | },
24 | 'NativeBase.IconNB': {
25 | color: variables.brandLight,
26 | }
27 | }
28 | const primaryCommon = {
29 | 'NativeBase.Text': {
30 | color: variables.btnPrimaryBg,
31 | },
32 | 'NativeBase.Icon': {
33 | color: variables.btnPrimaryBg,
34 | },
35 | 'NativeBase.IconNB': {
36 | color: variables.btnPrimaryBg,
37 | }
38 | }
39 | const successCommon = {
40 | 'NativeBase.Text': {
41 | color: variables.btnSuccessBg,
42 | },
43 | 'NativeBase.Icon': {
44 | color: variables.btnSuccessBg,
45 | },
46 | 'NativeBase.IconNB': {
47 | color: variables.btnSuccessBg,
48 | }
49 | }
50 | const infoCommon = {
51 | 'NativeBase.Text': {
52 | color: variables.btnInfoBg,
53 | },
54 | 'NativeBase.Icon': {
55 | color: variables.btnInfoBg,
56 | },
57 | 'NativeBase.IconNB': {
58 | color: variables.btnInfoBg,
59 | }
60 | }
61 | const warningCommon = {
62 | 'NativeBase.Text': {
63 | color: variables.btnWarningBg,
64 | },
65 | 'NativeBase.Icon': {
66 | color: variables.btnWarningBg,
67 | },
68 | 'NativeBase.IconNB': {
69 | color: variables.btnWarningBg,
70 | }
71 | }
72 | const dangerCommon = {
73 | 'NativeBase.Text': {
74 | color: variables.btnDangerBg,
75 | },
76 | 'NativeBase.Icon': {
77 | color: variables.btnDangerBg,
78 | },
79 | 'NativeBase.IconNB': {
80 | color: variables.btnDangerBg,
81 | }
82 | }
83 | const buttonTheme = {
84 | '.disabled': {
85 | backgroundColor: variables.btnDisabledBg,
86 | },
87 | '.bordered': {
88 | '.dark': {
89 | ...darkCommon,
90 | backgroundColor: 'transparent',
91 | borderColor: variables.brandDark,
92 | borderWidth: variables.borderWidth * 2,
93 | },
94 | '.light': {
95 | ...lightCommon,
96 | backgroundColor: 'transparent',
97 | borderColor: variables.brandLight,
98 | borderWidth: variables.borderWidth * 2,
99 | },
100 | '.primary': {
101 | ...primaryCommon,
102 | backgroundColor: 'transparent',
103 | borderColor: variables.btnPrimaryBg,
104 | borderWidth: variables.borderWidth * 2,
105 | },
106 | '.success': {
107 | ...successCommon,
108 | backgroundColor: 'transparent',
109 | borderColor: variables.btnSuccessBg,
110 | borderWidth: variables.borderWidth * 2,
111 | },
112 | '.info': {
113 | ...infoCommon,
114 | backgroundColor: 'transparent',
115 | borderColor: variables.btnInfoBg,
116 | borderWidth: variables.borderWidth * 2,
117 | },
118 | '.warning': {
119 | ...warningCommon,
120 | backgroundColor: 'transparent',
121 | borderColor: variables.btnWarningBg,
122 | borderWidth: variables.borderWidth * 2,
123 | },
124 | '.danger': {
125 | ...dangerCommon,
126 | backgroundColor: 'transparent',
127 | borderColor: variables.btnDangerBg,
128 | borderWidth: variables.borderWidth * 2,
129 | },
130 | '.disabled': {
131 | backgroundColor: null,
132 | borderColor: variables.btnDisabledBg,
133 | borderWidth: variables.borderWidth * 2,
134 | 'NativeBase.Text': {
135 | color: variables.btnDisabledBg,
136 | },
137 | },
138 | ...primaryCommon,
139 | borderWidth: variables.borderWidth * 2,
140 | elevation: null,
141 | shadowColor: null,
142 | shadowOffset: null,
143 | shadowOpacity: null,
144 | shadowRadius: null,
145 | backgroundColor: 'transparent',
146 | },
147 |
148 | '.dark': {
149 | '.bordered': {
150 | ...darkCommon,
151 | },
152 | backgroundColor: variables.brandDark,
153 | },
154 | '.light': {
155 | '.transparent': {
156 | ...lightCommon,
157 | backgroundColor: null,
158 | },
159 | '.bordered': {
160 | ...lightCommon,
161 | },
162 | ...darkCommon,
163 | backgroundColor: variables.brandLight,
164 | },
165 |
166 | '.primary': {
167 | '.bordered': {
168 | ...primaryCommon
169 | },
170 | backgroundColor: variables.btnPrimaryBg,
171 | },
172 |
173 | '.success': {
174 | '.bordered': {
175 | ...successCommon,
176 | },
177 | backgroundColor: variables.btnSuccessBg,
178 | },
179 |
180 | '.info': {
181 | '.bordered': {
182 | ...infoCommon
183 | },
184 | backgroundColor: variables.btnInfoBg,
185 | },
186 |
187 | '.warning': {
188 | '.bordered': {
189 | ...warningCommon,
190 | },
191 | backgroundColor: variables.btnWarningBg,
192 | },
193 |
194 | '.danger': {
195 | '.bordered': {
196 | ...dangerCommon,
197 | },
198 | backgroundColor: variables.btnDangerBg,
199 | },
200 |
201 | '.block': {
202 | justifyContent: 'center',
203 | alignSelf: 'stretch',
204 | },
205 |
206 | '.full': {
207 | justifyContent: 'center',
208 | alignSelf: 'stretch',
209 | borderRadius: 0,
210 | },
211 |
212 | '.rounded': {
213 | // paddingHorizontal: variables.buttonPadding + 20,
214 | borderRadius: variables.borderRadiusLarge,
215 | },
216 |
217 | '.transparent': {
218 | backgroundColor: 'transparent',
219 | elevation: 0,
220 | shadowColor: null,
221 | shadowOffset: null,
222 | shadowRadius: null,
223 | shadowOpacity: null,
224 | ...primaryCommon,
225 | '.dark': {
226 | ...darkCommon,
227 | backgroundColor: null,
228 | },
229 | '.danger': {
230 | ...dangerCommon,
231 | backgroundColor: null,
232 | },
233 | '.warning': {
234 | ...warningCommon,
235 | backgroundColor: null,
236 | },
237 | '.info': {
238 | ...infoCommon,
239 | backgroundColor: null,
240 | },
241 | '.primary': {
242 | ...primaryCommon,
243 | backgroundColor: null,
244 | },
245 | '.success': {
246 | ...successCommon,
247 | backgroundColor: null,
248 | },
249 | '.light': {
250 | ...lightCommon,
251 | backgroundColor: null,
252 | },
253 | },
254 |
255 | '.small': {
256 | height: 30,
257 | 'NativeBase.Text': {
258 | fontSize: 14,
259 | },
260 | },
261 |
262 | '.large': {
263 | height: 60,
264 | 'NativeBase.Text': {
265 | fontSize: 22,
266 | lineHeight: 32,
267 | },
268 | },
269 |
270 | '.capitalize': {},
271 |
272 | '.vertical': {
273 | flexDirection: 'column',
274 | height: null,
275 | },
276 |
277 | 'NativeBase.Text': {
278 | fontFamily: variables.btnFontFamily,
279 | marginLeft: 0,
280 | marginRight: 0,
281 | color: variables.inverseTextColor,
282 | fontSize: variables.btnTextSize,
283 | lineHeight: variables.btnLineHeight,
284 | paddingHorizontal: 16,
285 | backgroundColor: 'transparent',
286 | // childPosition: 1
287 | },
288 |
289 | 'NativeBase.Icon': {
290 | color: variables.inverseTextColor,
291 | fontSize: 24,
292 | marginHorizontal: 16,
293 | paddingTop: platform === 'ios' ? 2 : undefined,
294 | },
295 | 'NativeBase.IconNB': {
296 | color: variables.inverseTextColor,
297 | fontSize: 24,
298 | marginHorizontal: 16,
299 | paddingTop: platform === 'ios' ? 2 : undefined,
300 | },
301 |
302 | '.iconLeft': {
303 | 'NativeBase.Text': {
304 | marginLeft: 0,
305 | },
306 | 'NativeBase.IconNB': {
307 | marginRight: 0,
308 | marginLeft: 16,
309 | },
310 | 'NativeBase.Icon': {
311 | marginRight: 0,
312 | marginLeft: 16,
313 | },
314 | },
315 | '.iconRight': {
316 | 'NativeBase.Text': {
317 | marginRight: 0,
318 | },
319 | 'NativeBase.IconNB': {
320 | marginLeft: 0,
321 | marginRight: 16,
322 | },
323 | 'NativeBase.Icon': {
324 | marginLeft: 0,
325 | marginRight: 16,
326 | },
327 | },
328 | '.picker': {
329 | 'NativeBase.Text': {
330 | '.note': {
331 | fontSize: 16,
332 | lineHeight: null,
333 | },
334 | },
335 | },
336 |
337 | paddingVertical: variables.buttonPadding,
338 | // paddingHorizontal: variables.buttonPadding + 10,
339 | backgroundColor: variables.btnPrimaryBg,
340 | borderRadius: variables.borderRadiusBase,
341 | borderColor: variables.btnPrimaryBg,
342 | borderWidth: null,
343 | height: 45,
344 | alignSelf: 'flex-start',
345 | flexDirection: 'row',
346 | elevation: 2,
347 | shadowColor: platformStyle === 'material' ? variables.brandDark : undefined,
348 | shadowOffset:
349 | platformStyle === 'material' ? { width: 0, height: 2 } : undefined,
350 | shadowOpacity: platformStyle === 'material' ? 0.2 : undefined,
351 | shadowRadius: platformStyle === 'material' ? 1.2 : undefined,
352 | alignItems: 'center',
353 | justifyContent: 'space-between',
354 | };
355 | return buttonTheme;
356 | };
357 |
--------------------------------------------------------------------------------
/native-base-theme/components/Card.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const cardTheme = {
5 | ".transparent": {
6 | shadowColor: null,
7 | shadowOffset: null,
8 | shadowOpacity: null,
9 | shadowRadius: null,
10 | elevation: null
11 | },
12 | marginVertical: 5,
13 | marginHorizontal: 10,
14 | flex: 1,
15 | borderWidth: 0,
16 | borderRadius: 0,
17 | borderColor: variables.cardBorderColor,
18 | flexWrap: "nowrap",
19 | backgroundColor: variables.cardDefaultBg,
20 | shadowColor: "#000",
21 | // overflow: 'hidden',
22 | shadowOffset: { width: 0, height: 2 },
23 | shadowOpacity: 0.1,
24 | shadowRadius: 1.5,
25 | elevation: 3
26 | };
27 |
28 | return cardTheme;
29 | };
30 |
--------------------------------------------------------------------------------
/native-base-theme/components/CardItem.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 | const transparentBtnCommon = {
6 | 'NativeBase.Text': {
7 | fontSize: variables.DefaultFontSize - 4,
8 | color: variables.sTabBarActiveTextColor,
9 | },
10 | 'NativeBase.Icon': {
11 | fontSize: variables.iconFontSize - 10,
12 | color: variables.sTabBarActiveTextColor,
13 | marginHorizontal: null,
14 | },
15 | 'NativeBase.IconNB': {
16 | fontSize: variables.iconFontSize - 10,
17 | color: variables.sTabBarActiveTextColor,
18 | },
19 | paddingVertical: null,
20 | paddingHorizontal: null
21 | }
22 |
23 | const cardItemTheme = {
24 | 'NativeBase.Left': {
25 | 'NativeBase.Body': {
26 | 'NativeBase.Text': {
27 | '.note': {
28 | color: variables.listNoteColor,
29 | fontWeight: '400',
30 | marginRight: 20,
31 | },
32 | },
33 | flex: 1,
34 | marginLeft: 10,
35 | alignItems: null,
36 | },
37 | 'NativeBase.Icon': {
38 | fontSize: variables.iconFontSize,
39 | },
40 | 'NativeBase.IconNB': {
41 | fontSize: variables.iconFontSize,
42 | },
43 | 'NativeBase.Text': {
44 | marginLeft: 10,
45 | alignSelf: 'center',
46 | },
47 | 'NativeBase.Button': {
48 | '.transparent': {
49 | ...transparentBtnCommon,
50 | paddingRight: variables.listItemPadding + 5,
51 | },
52 | },
53 | flex: 1,
54 | flexDirection: 'row',
55 | alignItems: 'center',
56 | },
57 |
58 | '.content': {
59 | 'NativeBase.Text': {
60 | color: platform === 'ios' ? '#555' : '#222',
61 | fontSize: variables.DefaultFontSize - 3,
62 | },
63 | },
64 | '.cardBody': {
65 | padding: -5,
66 | 'NativeBase.Text': {
67 | marginTop: 5,
68 | },
69 | },
70 | 'NativeBase.Body': {
71 | 'NativeBase.Text': {
72 | '.note': {
73 | color: variables.listNoteColor,
74 | fontWeight: '200',
75 | marginRight: 20,
76 | },
77 | },
78 | 'NativeBase.Button': {
79 | '.transparent': {
80 | ...transparentBtnCommon,
81 | paddingRight: variables.listItemPadding + 5,
82 | alignSelf: 'stretch',
83 | },
84 | },
85 | flex: 1,
86 | alignSelf: 'stretch',
87 | alignItems: 'flex-start',
88 | },
89 | 'NativeBase.Right': {
90 | 'NativeBase.Badge': {
91 | alignSelf: null,
92 | },
93 | 'NativeBase.Button': {
94 | '.transparent': {
95 | ...transparentBtnCommon
96 | },
97 | alignSelf: null,
98 | },
99 | 'NativeBase.Icon': {
100 | alignSelf: null,
101 | fontSize: variables.iconFontSize - 8,
102 | color: variables.cardBorderColor,
103 | },
104 | 'NativeBase.IconNB': {
105 | alignSelf: null,
106 | fontSize: variables.iconFontSize - 8,
107 | color: variables.cardBorderColor,
108 | },
109 | 'NativeBase.Text': {
110 | fontSize: variables.DefaultFontSize - 2,
111 | alignSelf: null,
112 | },
113 | 'NativeBase.Thumbnail': {
114 | alignSelf: null,
115 | },
116 | 'NativeBase.Image': {
117 | alignSelf: null,
118 | },
119 | 'NativeBase.Radio': {
120 | alignSelf: null,
121 | },
122 | 'NativeBase.Checkbox': {
123 | alignSelf: null,
124 | },
125 | 'NativeBase.Switch': {
126 | alignSelf: null,
127 | },
128 | flex: 0.8,
129 | },
130 | '.header': {
131 | 'NativeBase.Text': {
132 | fontSize: 16,
133 | fontWeight: platform === 'ios' ? '500' : undefined,
134 | },
135 | '.bordered': {
136 | 'NativeBase.Text': {
137 | color: variables.sTabBarActiveTextColor,
138 | fontWeight: platform === 'ios' ? '500' : undefined,
139 | },
140 | borderBottomWidth: platform === 'ios' ? variables.borderWidth : null,
141 | },
142 | borderBottomWidth: null,
143 | paddingVertical: variables.listItemPadding + 5,
144 | },
145 | '.footer': {
146 | 'NativeBase.Text': {
147 | fontSize: 16,
148 | fontWeight: platform === 'ios' ? '500' : undefined,
149 | },
150 | '.bordered': {
151 | 'NativeBase.Text': {
152 | color: variables.activeTab,
153 | fontWeight: '500',
154 | },
155 | borderTopWidth: platform === 'ios' ? variables.borderWidth : null,
156 | },
157 | borderBottomWidth: null,
158 | },
159 | 'NativeBase.Text': {
160 | '.note': {
161 | color: variables.listNoteColor,
162 | fontWeight: '200',
163 | },
164 | },
165 |
166 | 'NativeBase.Icon': {
167 | width: variables.iconFontSize + 5,
168 | fontSize: variables.iconFontSize - 2,
169 | },
170 | 'NativeBase.IconNB': {
171 | width: variables.iconFontSize + 5,
172 | fontSize: variables.iconFontSize - 2,
173 | },
174 |
175 | '.bordered': {
176 | borderBottomWidth: variables.borderWidth,
177 | borderColor: variables.cardBorderColor,
178 | },
179 | flexDirection: 'row',
180 | alignItems: 'center',
181 | borderRadius: 2,
182 | padding: variables.listItemPadding + 5,
183 | paddingVertical: variables.listItemPadding,
184 | backgroundColor: variables.cardDefaultBg,
185 | };
186 |
187 | return cardItemTheme;
188 | };
189 |
--------------------------------------------------------------------------------
/native-base-theme/components/CheckBox.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const checkBoxTheme = {
5 | ".checked": {
6 | "NativeBase.Icon": {
7 | color: variables.checkboxTickColor
8 | },
9 | "NativeBase.IconNB": {
10 | color: variables.checkboxTickColor
11 | }
12 | },
13 | "NativeBase.Icon": {
14 | color: "transparent",
15 | lineHeight: variables.CheckboxIconSize,
16 | marginTop: variables.CheckboxIconMarginTop,
17 | fontSize: variables.CheckboxFontSize
18 | },
19 | "NativeBase.IconNB": {
20 | color: "transparent",
21 | lineHeight: variables.CheckboxIconSize,
22 | marginTop: variables.CheckboxIconMarginTop,
23 | fontSize: variables.CheckboxFontSize
24 | },
25 | borderRadius: variables.CheckboxRadius,
26 | overflow: "hidden",
27 | width: variables.checkboxSize,
28 | height: variables.checkboxSize,
29 | borderWidth: variables.CheckboxBorderWidth,
30 | paddingLeft: variables.CheckboxPaddingLeft - 1,
31 | paddingBottom: variables.CheckboxPaddingBottom,
32 | left: 10
33 | };
34 |
35 | return checkBoxTheme;
36 | };
37 |
--------------------------------------------------------------------------------
/native-base-theme/components/Container.js:
--------------------------------------------------------------------------------
1 | import { Platform, Dimensions } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | const deviceHeight = Dimensions.get("window").height;
6 | export default (variables = variable) => {
7 | const theme = {
8 | flex: 1,
9 | height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20
10 | };
11 |
12 | return theme;
13 | };
14 |
--------------------------------------------------------------------------------
/native-base-theme/components/Content.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const contentTheme = {
5 | ".padder": {
6 | padding: variables.contentPadding
7 | },
8 | flex: 1,
9 | backgroundColor: "#f2f5f7",
10 | "NativeBase.Segment": {
11 | borderWidth: 0,
12 | backgroundColor: "transparent"
13 | }
14 | };
15 |
16 | return contentTheme;
17 | };
18 |
--------------------------------------------------------------------------------
/native-base-theme/components/Fab.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 |
6 | const fabTheme = {
7 | "NativeBase.Button": {
8 | alignItems: "center",
9 | padding: null,
10 | justifyContent: "center",
11 | "NativeBase.Icon": {
12 | alignSelf: "center",
13 | fontSize: 20,
14 | marginLeft: 0,
15 | marginRight: 0,
16 | },
17 | "NativeBase.IconNB": {
18 | alignSelf: "center",
19 | fontSize: 20,
20 | marginLeft: 0,
21 | marginRight: 0,
22 | },
23 | },
24 | };
25 |
26 | return fabTheme;
27 | };
28 |
--------------------------------------------------------------------------------
/native-base-theme/components/Footer.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platformStyle = variables.platformStyle;
5 | const platform = variables.platform;
6 |
7 | const iconCommon = {
8 | "NativeBase.Icon": {
9 | color: variables.tabBarActiveTextColor
10 | }
11 | };
12 | const iconNBCommon = {
13 | "NativeBase.IconNB": {
14 | color: variables.tabBarActiveTextColor
15 | }
16 | };
17 | const textCommon = {
18 | "NativeBase.Text": {
19 | color: variables.tabBarActiveTextColor
20 | }
21 | };
22 | const footerTheme = {
23 | "NativeBase.Left": {
24 | "NativeBase.Button": {
25 | ".transparent": {
26 | backgroundColor: "transparent",
27 | borderColor: null,
28 | elevation: 0,
29 | shadowColor: null,
30 | shadowOffset: null,
31 | shadowRadius: null,
32 | shadowOpacity: null,
33 | ...iconCommon,
34 | ...iconNBCommon,
35 | ...textCommon
36 | },
37 | alignSelf: null,
38 | ...iconCommon,
39 | ...iconNBCommon,
40 | ...textCommon
41 | },
42 | flex: 1,
43 | alignSelf: "center",
44 | alignItems: "flex-start"
45 | },
46 | "NativeBase.Body": {
47 | flex: 1,
48 | alignItems: "center",
49 | alignSelf: "center",
50 | flexDirection: "row",
51 | "NativeBase.Button": {
52 | alignSelf: "center",
53 | ".transparent": {
54 | backgroundColor: "transparent",
55 | borderColor: null,
56 | elevation: 0,
57 | shadowColor: null,
58 | shadowOffset: null,
59 | shadowRadius: null,
60 | shadowOpacity: null,
61 | ...iconCommon,
62 | ...iconNBCommon,
63 | ...textCommon
64 | },
65 | ".full": {
66 | height: variables.footerHeight,
67 | paddingBottom: variables.footerPaddingBottom,
68 | flex: 1
69 | },
70 | ...iconCommon,
71 | ...iconNBCommon,
72 | ...textCommon
73 | }
74 | },
75 | "NativeBase.Right": {
76 | "NativeBase.Button": {
77 | ".transparent": {
78 | backgroundColor: "transparent",
79 | borderColor: null,
80 | elevation: 0,
81 | shadowColor: null,
82 | shadowOffset: null,
83 | shadowRadius: null,
84 | shadowOpacity: null,
85 | ...iconCommon,
86 | ...iconNBCommon,
87 | ...textCommon
88 | },
89 | alignSelf: null,
90 | ...iconCommon,
91 | ...iconNBCommon,
92 | ...textCommon
93 | },
94 | flex: 1,
95 | alignSelf: "center",
96 | alignItems: "flex-end"
97 | },
98 | backgroundColor: variables.footerDefaultBg,
99 | flexDirection: "row",
100 | justifyContent: "center",
101 | borderTopWidth:
102 | platform === "ios" && platformStyle !== "material"
103 | ? variables.borderWidth
104 | : undefined,
105 | borderTopWidth: .3,
106 | borderColor:
107 | platform === "ios" && platformStyle !== "material"
108 | ? "#cbcbcb"
109 | : undefined,
110 | borderColor: '#f2f2f2',
111 | height: variables.footerHeight,
112 | paddingBottom: variables.footerPaddingBottom,
113 | elevation: 3,
114 | left: 0,
115 | right: 0
116 | };
117 | return footerTheme;
118 | };
119 |
--------------------------------------------------------------------------------
/native-base-theme/components/FooterTab.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | export default (variables = variable) => {
6 | const platform = variables.platform;
7 |
8 | const footerTabTheme = {
9 | "NativeBase.Button": {
10 | ".active": {
11 | "NativeBase.Text": {
12 | color: variables.tabBarActiveTextColor,
13 | fontSize: variables.tabBarTextSize,
14 | lineHeight: 16
15 | },
16 | "NativeBase.Icon": {
17 | color: variables.tabBarActiveTextColor
18 | },
19 | "NativeBase.IconNB": {
20 | color: variables.tabBarActiveTextColor
21 | },
22 | // backgroundColor: variables.tabActiveBgColor
23 | },
24 | flexDirection: null,
25 | backgroundColor: "transparent",
26 | borderColor: null,
27 | elevation: 0,
28 | shadowColor: null,
29 | shadowOffset: null,
30 | shadowRadius: null,
31 | shadowOpacity: null,
32 | alignSelf: "center",
33 | flex: 1,
34 | height: (variables.footerHeight - (variables.isIphoneX ? 34 : 0)),
35 | justifyContent: "center",
36 | ".badge": {
37 | "NativeBase.Badge": {
38 | "NativeBase.Text": {
39 | fontSize: 11,
40 | fontWeight: platform === "ios" ? "600" : undefined,
41 | lineHeight: 14
42 | },
43 | top: -3,
44 | alignSelf: "center",
45 | left: 10,
46 | zIndex: 99,
47 | height: 18,
48 | padding: 1.7,
49 | paddingHorizontal: 3
50 | },
51 | "NativeBase.Icon": {
52 | marginTop: -18
53 | }
54 | },
55 | "NativeBase.Icon": {
56 | color: variables.tabBarTextColor
57 | },
58 | "NativeBase.IconNB": {
59 | color: variables.tabBarTextColor
60 | },
61 | "NativeBase.Text": {
62 | color: variables.tabBarTextColor,
63 | fontSize: variables.tabBarTextSize,
64 | lineHeight: 16
65 | }
66 | },
67 | backgroundColor: Platform.OS === "android"
68 | ? variables.tabActiveBgColor
69 | : undefined,
70 | flexDirection: "row",
71 | justifyContent: "space-between",
72 | flex: 1,
73 | alignSelf: "stretch"
74 | };
75 |
76 | return footerTabTheme;
77 | };
78 |
--------------------------------------------------------------------------------
/native-base-theme/components/Form.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 |
6 | const theme = {
7 | "NativeBase.Item": {
8 | ".fixedLabel": {
9 | "NativeBase.Label": {
10 | paddingLeft: null
11 | },
12 | marginLeft: 15
13 | },
14 | ".inlineLabel": {
15 | "NativeBase.Label": {
16 | paddingLeft: null
17 | },
18 | marginLeft: 15
19 | },
20 | ".placeholderLabel": {
21 | "NativeBase.Input": {}
22 | },
23 | ".stackedLabel": {
24 | "NativeBase.Label": {
25 | top: 5,
26 | paddingLeft: null
27 | },
28 | "NativeBase.Input": {
29 | paddingLeft: null,
30 | marginLeft: null
31 | },
32 | "NativeBase.Icon": {
33 | marginTop: 36
34 | },
35 | marginLeft: 15
36 | },
37 | ".floatingLabel": {
38 | "NativeBase.Input": {
39 | paddingLeft: null,
40 | top: 10,
41 | marginLeft: null
42 | },
43 | "NativeBase.Label": {
44 | left: 0,
45 | top: 6
46 | },
47 | "NativeBase.Icon": {
48 | top: 6
49 | },
50 | marginTop: 15,
51 | marginLeft: 15
52 | },
53 | ".regular": {
54 | "NativeBase.Label": {
55 | left: 0
56 | },
57 | marginLeft: 0
58 | },
59 | ".rounded": {
60 | "NativeBase.Label": {
61 | left: 0
62 | },
63 | marginLeft: 0
64 | },
65 | ".underline": {
66 | "NativeBase.Label": {
67 | left: 0,
68 | top: 0,
69 | position: "relative"
70 | },
71 | "NativeBase.Input": {
72 | left: -15
73 | },
74 | marginLeft: 15
75 | },
76 | ".last": {
77 | marginLeft: 0,
78 | paddingLeft: 15
79 | },
80 | "NativeBase.Label": {
81 | paddingRight: 5
82 | },
83 | marginLeft: 15
84 | }
85 | };
86 |
87 | return theme;
88 | };
89 |
--------------------------------------------------------------------------------
/native-base-theme/components/H1.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const h1Theme = {
5 | color: variables.textColor,
6 | fontSize: variables.fontSizeH1,
7 | lineHeight: variables.lineHeightH1,
8 | };
9 |
10 | return h1Theme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/H2.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const h2Theme = {
5 | color: variables.textColor,
6 | fontSize: variables.fontSizeH2,
7 | lineHeight: variables.lineHeightH2,
8 | };
9 |
10 | return h2Theme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/H3.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const h3Theme = {
5 | color: variables.textColor,
6 | fontSize: variables.fontSizeH3,
7 | lineHeight: variables.lineHeightH3
8 | };
9 |
10 | return h3Theme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/Header.js:
--------------------------------------------------------------------------------
1 | import { PixelRatio, StatusBar } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | export default (variables = variable) => {
6 | const platformStyle = variables.platformStyle;
7 | const platform = variables.platform;
8 |
9 | const headerTheme = {
10 | ".span": {
11 | height: 128,
12 | "NativeBase.Left": {
13 | alignSelf: "flex-start",
14 | },
15 | "NativeBase.Body": {
16 | alignSelf: "flex-end",
17 | alignItems: "flex-start",
18 | justifyContent: "center",
19 | paddingBottom: 26,
20 | },
21 | "NativeBase.Right": {
22 | alignSelf: "flex-start",
23 | },
24 | },
25 | ".hasSubtitle": {
26 | "NativeBase.Body": {
27 | "NativeBase.Title": {
28 | fontSize: variables.titleFontSize - 2,
29 | fontFamily: variables.titleFontfamily,
30 | textAlign: "center",
31 | },
32 | "NativeBase.Subtitle": {
33 | fontSize: variables.subTitleFontSize,
34 | fontFamily: variables.titleFontfamily,
35 | color: variables.subtitleColor,
36 | textAlign: "center",
37 | },
38 | },
39 | },
40 | ".noShadow": {
41 | elevation: 0,
42 | shadowColor: null,
43 | shadowOffset: null,
44 | shadowRadius: null,
45 | shadowOpacity: null,
46 | },
47 | ".hasTabs": {
48 | elevation: 0,
49 | shadowColor: null,
50 | shadowOffset: null,
51 | shadowRadius: null,
52 | shadowOpacity: null,
53 | borderBottomWidth: null,
54 | },
55 | ".hasSegment": {
56 | elevation: 0,
57 | shadowColor: null,
58 | shadowOffset: null,
59 | shadowRadius: null,
60 | shadowOpacity: null,
61 | borderBottomWidth: null,
62 | "NativeBase.Left": {
63 | flex: 0.3,
64 | },
65 | "NativeBase.Right": {
66 | flex: 0.3,
67 | },
68 | "NativeBase.Body": {
69 | flex: 1,
70 | "NativeBase.Segment": {
71 | marginRight: 0,
72 | alignSelf: 'center',
73 | "NativeBase.Button": {
74 | paddingLeft: 0,
75 | paddingRight: 0
76 | }
77 | },
78 | },
79 | },
80 | "NativeBase.Button": {
81 | justifyContent: "center",
82 | alignSelf: "center",
83 | alignItems: "center",
84 | ".transparent": {
85 | "NativeBase.Text": {
86 | color: variables.toolbarBtnTextColor,
87 | fontWeight: "600",
88 | },
89 | "NativeBase.Icon": {
90 | color: variables.toolbarBtnColor,
91 | },
92 | "NativeBase.IconNB": {
93 | color: variables.toolbarBtnColor,
94 | },
95 | paddingHorizontal: variables.buttonPadding,
96 | },
97 | paddingHorizontal: 15,
98 | },
99 | ".searchBar": {
100 | "NativeBase.Item": {
101 | "NativeBase.Icon": {
102 | backgroundColor: "transparent",
103 | color: variables.dropdownLinkColor,
104 | fontSize: variables.toolbarSearchIconSize,
105 | alignItems: "center",
106 | marginTop: 2,
107 | paddingRight: 10,
108 | paddingLeft: 10,
109 | },
110 | "NativeBase.IconNB": {
111 | backgroundColor: "transparent",
112 | color: null,
113 | alignSelf: "center",
114 | },
115 | "NativeBase.Input": {
116 | alignSelf: "center",
117 | lineHeight: 24,
118 | height: variables.searchBarInputHeight,
119 | },
120 | alignSelf: "center",
121 | alignItems: "center",
122 | justifyContent: "flex-start",
123 | flex: 1,
124 | height: variables.searchBarHeight,
125 | borderColor: "transparent",
126 | backgroundColor: variables.toolbarInputColor,
127 | },
128 | "NativeBase.Button": {
129 | ".transparent": {
130 | "NativeBase.Text": {
131 | fontWeight: "500",
132 | },
133 | paddingHorizontal: null,
134 | paddingLeft: platform === "ios" ? 10 : null,
135 | },
136 | paddingHorizontal: platform === "ios" ? undefined : null,
137 | width: platform === "ios" ? undefined : 0,
138 | height: platform === "ios" ? undefined : 0,
139 | },
140 | },
141 | ".rounded": {
142 | "NativeBase.Item": {
143 | borderRadius: platform === "ios" && platformStyle !== "material" ? 25 : 3,
144 | },
145 | },
146 | "NativeBase.Left": {
147 | "NativeBase.Button": {
148 | ".hasText": {
149 | marginLeft: -10,
150 | height: 30,
151 | "NativeBase.Icon": {
152 | color: variables.toolbarBtnColor,
153 | fontSize: variables.iconHeaderSize,
154 | marginTop: 2,
155 | marginRight: 5,
156 | marginLeft: 2,
157 | },
158 | "NativeBase.Text": {
159 | color: variables.toolbarBtnTextColor,
160 | fontSize: 17,
161 | marginLeft: 2,
162 | lineHeight: 21,
163 | },
164 | "NativeBase.IconNB": {
165 | color: variables.toolbarBtnColor,
166 | fontSize: variables.iconHeaderSize,
167 | marginTop: 2,
168 | marginRight: 5,
169 | marginLeft: 2,
170 | },
171 | },
172 | ".transparent": {
173 | marginLeft: -3,
174 | "NativeBase.Icon": {
175 | color: variables.toolbarBtnColor,
176 | fontSize: variables.iconHeaderSize,
177 | marginTop: 2,
178 | marginRight: 2,
179 | marginLeft: 2,
180 | },
181 | "NativeBase.IconNB": {
182 | color: variables.toolbarBtnColor,
183 | fontSize: variables.iconHeaderSize,
184 | marginTop: 2,
185 | marginRight: 2,
186 | marginLeft: 2,
187 | },
188 | "NativeBase.Text": {
189 | color: variables.toolbarBtnTextColor,
190 | fontSize: 17,
191 | top: platform === "ios" ? undefined : -1.5,
192 | },
193 | backgroundColor: "transparent",
194 | borderColor: null,
195 | elevation: 0,
196 | shadowColor: null,
197 | shadowOffset: null,
198 | shadowRadius: null,
199 | shadowOpacity: null,
200 | },
201 | "NativeBase.Icon": {
202 | color: variables.toolbarBtnColor,
203 | },
204 | "NativeBase.IconNB": {
205 | color: variables.toolbarBtnColor,
206 | },
207 | alignSelf: null,
208 | paddingHorizontal: variables.buttonPadding,
209 | },
210 | flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5,
211 | alignSelf: "center",
212 | alignItems: "flex-start",
213 | },
214 | "NativeBase.Body": {
215 | flex: 1,
216 | alignItems: platform === "ios" && platformStyle !== "material" ? "center" : "flex-start",
217 | alignSelf: "center",
218 | "NativeBase.Segment": {
219 | borderWidth: 0,
220 | alignSelf: "flex-end",
221 | marginRight: platform === "ios" ? -40 : -55,
222 | },
223 | "NativeBase.Button": {
224 | alignSelf: "center",
225 | ".transparent": {
226 | backgroundColor: "transparent",
227 | },
228 | "NativeBase.Icon": {
229 | color: variables.toolbarBtnColor,
230 | },
231 | "NativeBase.IconNB": {
232 | color: variables.toolbarBtnColor,
233 | },
234 | "NativeBase.Text": {
235 | color: variables.inverseTextColor,
236 | backgroundColor: "transparent",
237 | },
238 | },
239 | },
240 | "NativeBase.Right": {
241 | "NativeBase.Button": {
242 | ".hasText": {
243 | height: 30,
244 | "NativeBase.Icon": {
245 | color: variables.toolbarBtnColor,
246 | fontSize: variables.iconHeaderSize - 2,
247 | marginTop: 2,
248 | marginRight: 2,
249 | marginLeft: 5,
250 | },
251 | "NativeBase.Text": {
252 | color: variables.toolbarBtnTextColor,
253 | fontSize: 17,
254 | lineHeight: 21,
255 | },
256 | "NativeBase.IconNB": {
257 | color: variables.toolbarBtnColor,
258 | fontSize: variables.iconHeaderSize - 2,
259 | marginTop: 2,
260 | marginRight: 2,
261 | marginLeft: 5,
262 | },
263 | },
264 | ".transparent": {
265 | marginRight: -8,
266 | paddingHorizontal: 15,
267 | borderRadius: 50,
268 | "NativeBase.Icon": {
269 | color: variables.toolbarBtnColor,
270 | fontSize:
271 | platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
272 | marginTop: 2,
273 | marginLeft: 2,
274 | marginRight: 2,
275 | },
276 | "NativeBase.IconNB": {
277 | color: variables.toolbarBtnColor,
278 | fontSize:
279 | platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
280 | marginTop: 2,
281 | marginLeft: 2,
282 | marginRight: 2,
283 | },
284 | "NativeBase.Text": {
285 | color: variables.toolbarBtnTextColor,
286 | fontSize: 17,
287 | top: platform === "ios" ? undefined : -1.5,
288 | },
289 | backgroundColor: "transparent",
290 | borderColor: null,
291 | elevation: 0,
292 | shadowColor: null,
293 | shadowOffset: null,
294 | shadowRadius: null,
295 | shadowOpacity: null,
296 | },
297 | "NativeBase.Icon": {
298 | color: variables.toolbarBtnColor,
299 | },
300 | "NativeBase.IconNB": {
301 | color: variables.toolbarBtnColor,
302 | },
303 | alignSelf: null,
304 | paddingHorizontal: variables.buttonPadding,
305 | },
306 | flex: 1,
307 | alignSelf: "center",
308 | alignItems: "flex-end",
309 | flexDirection: "row",
310 | justifyContent: "flex-end",
311 | },
312 | backgroundColor: variables.toolbarDefaultBg,
313 | flexDirection: "row",
314 | paddingHorizontal: 10,
315 | justifyContent: "center",
316 | paddingTop: platform === "ios" ? (variables.isIphoneX ? 39 : 15) : 0,
317 | borderBottomWidth: platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
318 | borderBottomColor: variables.toolbarDefaultBorder,
319 | height: variables.platform === "ios" && variables.platformStyle === "material" ? (variables.toolbarHeight + StatusBar.height) : variables.toolbarHeight,
320 | elevation: 3,
321 | shadowColor: platformStyle === "material" ? "#000" : undefined,
322 | shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined,
323 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
324 | shadowRadius: platformStyle === "material" ? 1.2 : undefined,
325 | top: 0,
326 | left: 0,
327 | right: 0,
328 | };
329 |
330 | return headerTheme;
331 | };
332 |
--------------------------------------------------------------------------------
/native-base-theme/components/Icon.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const iconTheme = {
5 | fontSize: variables.iconFontSize,
6 | color: "#000"
7 | };
8 |
9 | return iconTheme;
10 | };
11 |
--------------------------------------------------------------------------------
/native-base-theme/components/Input.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const inputTheme = {
5 | '.multiline': {
6 | height: null,
7 | },
8 | height: variables.inputHeightBase,
9 | color: variables.inputColor,
10 | paddingLeft: 5,
11 | paddingRight: 5,
12 | flex: 1,
13 | fontSize: variables.inputFontSize,
14 | lineHeight: variables.inputLineHeight,
15 | };
16 |
17 | return inputTheme;
18 | };
19 |
--------------------------------------------------------------------------------
/native-base-theme/components/InputGroup.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const inputGroupTheme = {
5 | "NativeBase.Icon": {
6 | fontSize: 24,
7 | color: variables.sTabBarActiveTextColor,
8 | paddingHorizontal: 5
9 | },
10 | "NativeBase.IconNB": {
11 | fontSize: 24,
12 | color: variables.sTabBarActiveTextColor,
13 | paddingHorizontal: 5
14 | },
15 | "NativeBase.Input": {
16 | height: variables.inputHeightBase,
17 | color: variables.inputColor,
18 | paddingLeft: 5,
19 | paddingRight: 5,
20 | flex: 1,
21 | fontSize: variables.inputFontSize,
22 | lineHeight: variables.inputLineHeight
23 | },
24 | ".underline": {
25 | ".success": {
26 | borderColor: variables.inputSuccessBorderColor
27 | },
28 | ".error": {
29 | borderColor: variables.inputErrorBorderColor
30 | },
31 | paddingLeft: 5,
32 | borderWidth: variables.borderWidth,
33 | borderTopWidth: 0,
34 | borderRightWidth: 0,
35 | borderLeftWidth: 0,
36 | borderColor: variables.inputBorderColor
37 | },
38 | ".regular": {
39 | ".success": {
40 | borderColor: variables.inputSuccessBorderColor
41 | },
42 | ".error": {
43 | borderColor: variables.inputErrorBorderColor
44 | },
45 | paddingLeft: 5,
46 | borderWidth: variables.borderWidth,
47 | borderColor: variables.inputBorderColor
48 | },
49 | ".rounded": {
50 | ".success": {
51 | borderColor: variables.inputSuccessBorderColor
52 | },
53 | ".error": {
54 | borderColor: variables.inputErrorBorderColor
55 | },
56 | paddingLeft: 5,
57 | borderWidth: variables.borderWidth,
58 | borderRadius: variables.inputGroupRoundedBorderRadius,
59 | borderColor: variables.inputBorderColor
60 | },
61 |
62 | ".success": {
63 | "NativeBase.Icon": {
64 | color: variables.inputSuccessBorderColor
65 | },
66 | "NativeBase.IconNB": {
67 | color: variables.inputSuccessBorderColor
68 | },
69 | ".rounded": {
70 | borderRadius: 30,
71 | borderColor: variables.inputSuccessBorderColor
72 | },
73 | ".regular": {
74 | borderColor: variables.inputSuccessBorderColor
75 | },
76 | ".underline": {
77 | borderWidth: variables.borderWidth,
78 | borderTopWidth: 0,
79 | borderRightWidth: 0,
80 | borderLeftWidth: 0,
81 | borderColor: variables.inputSuccessBorderColor
82 | },
83 | borderColor: variables.inputSuccessBorderColor
84 | },
85 |
86 | ".error": {
87 | "NativeBase.Icon": {
88 | color: variables.inputErrorBorderColor
89 | },
90 | "NativeBase.IconNB": {
91 | color: variables.inputErrorBorderColor
92 | },
93 | ".rounded": {
94 | borderRadius: 30,
95 | borderColor: variables.inputErrorBorderColor
96 | },
97 | ".regular": {
98 | borderColor: variables.inputErrorBorderColor
99 | },
100 | ".underline": {
101 | borderWidth: variables.borderWidth,
102 | borderTopWidth: 0,
103 | borderRightWidth: 0,
104 | borderLeftWidth: 0,
105 | borderColor: variables.inputErrorBorderColor
106 | },
107 | borderColor: variables.inputErrorBorderColor
108 | },
109 | ".disabled": {
110 | "NativeBase.Icon": {
111 | color: "#384850"
112 | },
113 | "NativeBase.IconNB": {
114 | color: "#384850"
115 | }
116 | },
117 |
118 | paddingLeft: 5,
119 | borderWidth: variables.borderWidth,
120 | borderTopWidth: 0,
121 | borderRightWidth: 0,
122 | borderLeftWidth: 0,
123 | borderColor: variables.inputBorderColor,
124 | backgroundColor: "transparent",
125 | flexDirection: "row",
126 | alignItems: "center"
127 | };
128 |
129 | return inputGroupTheme;
130 | };
131 |
--------------------------------------------------------------------------------
/native-base-theme/components/Item.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | export default (variables = variable) => {
6 | const itemTheme = {
7 | ".floatingLabel": {
8 | "NativeBase.Input": {
9 | height: 50,
10 | top: 8
11 | },
12 | "NativeBase.Label": {
13 | top: 8
14 | },
15 | "NativeBase.Icon": {
16 | top: 6
17 | }
18 | },
19 | ".fixedLabel": {
20 | "NativeBase.Label": {
21 | position: null,
22 | top: null,
23 | left: null,
24 | right: null,
25 | flex: 1,
26 | height: null,
27 | width: null,
28 | fontSize: variables.inputFontSize
29 | },
30 | "NativeBase.Input": {
31 | flex: 2,
32 | fontSize: variables.inputFontSize
33 | }
34 | },
35 | ".stackedLabel": {
36 | "NativeBase.Label": {
37 | position: null,
38 | top: null,
39 | left: null,
40 | right: null,
41 | paddingTop: 5,
42 | alignSelf: "flex-start",
43 | fontSize: variables.inputFontSize - 2
44 | },
45 | "NativeBase.Icon": {
46 | marginTop: 36
47 | },
48 | "NativeBase.Input": {
49 | alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
50 | flex: 1,
51 | width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
52 | fontSize: variables.inputFontSize
53 | },
54 | flexDirection: null,
55 | height: variables.inputHeightBase + 15
56 | },
57 | ".inlineLabel": {
58 | "NativeBase.Label": {
59 | position: null,
60 | top: null,
61 | left: null,
62 | right: null,
63 | paddingRight: 20,
64 | height: null,
65 | width: null,
66 | fontSize: variables.inputFontSize
67 | },
68 | "NativeBase.Input": {
69 | paddingLeft: 5,
70 | fontSize: variables.inputFontSize
71 | },
72 | flexDirection: "row"
73 | },
74 | "NativeBase.Label": {
75 | fontSize: variables.inputFontSize,
76 | color: variables.inputColorPlaceholder,
77 | paddingRight: 5
78 | },
79 | "NativeBase.Icon": {
80 | fontSize: 24,
81 | paddingRight: 8
82 | },
83 | "NativeBase.IconNB": {
84 | fontSize: 24,
85 | paddingRight: 8
86 | },
87 | "NativeBase.Input": {
88 | ".multiline": {
89 | height: null
90 | },
91 | height: variables.inputHeightBase,
92 | color: variables.inputColor,
93 | flex: 1,
94 | top: Platform.OS === "ios" ? 1.5 : undefined,
95 | fontSize: variables.inputFontSize,
96 | lineHeight: variables.inputLineHeight
97 | },
98 | ".underline": {
99 | "NativeBase.Input": {
100 | paddingLeft: 15
101 | },
102 | ".success": {
103 | borderColor: variables.inputSuccessBorderColor
104 | },
105 | ".error": {
106 | borderColor: variables.inputErrorBorderColor
107 | },
108 | borderWidth: variables.borderWidth * 2,
109 | borderTopWidth: 0,
110 | borderRightWidth: 0,
111 | borderLeftWidth: 0,
112 | borderColor: variables.inputBorderColor
113 | },
114 | ".regular": {
115 | "NativeBase.Input": {
116 | paddingLeft: 8
117 | },
118 | "NativeBase.Icon": {
119 | paddingLeft: 10
120 | },
121 | ".success": {
122 | borderColor: variables.inputSuccessBorderColor
123 | },
124 | ".error": {
125 | borderColor: variables.inputErrorBorderColor
126 | },
127 | borderWidth: variables.borderWidth * 2,
128 | borderColor: variables.inputBorderColor
129 | },
130 | ".rounded": {
131 | "NativeBase.Input": {
132 | paddingLeft: 8
133 | },
134 | "NativeBase.Icon": {
135 | paddingLeft: 10
136 | },
137 | ".success": {
138 | borderColor: variables.inputSuccessBorderColor
139 | },
140 | ".error": {
141 | borderColor: variables.inputErrorBorderColor
142 | },
143 | borderWidth: variables.borderWidth * 2,
144 | borderRadius: 30,
145 | borderColor: variables.inputBorderColor
146 | },
147 |
148 | ".success": {
149 | "NativeBase.Icon": {
150 | color: variables.inputSuccessBorderColor
151 | },
152 | "NativeBase.IconNB": {
153 | color: variables.inputSuccessBorderColor
154 | },
155 | ".rounded": {
156 | borderRadius: 30,
157 | borderColor: variables.inputSuccessBorderColor
158 | },
159 | ".regular": {
160 | borderColor: variables.inputSuccessBorderColor
161 | },
162 | ".underline": {
163 | borderWidth: variables.borderWidth * 2,
164 | borderTopWidth: 0,
165 | borderRightWidth: 0,
166 | borderLeftWidth: 0,
167 | borderColor: variables.inputSuccessBorderColor
168 | },
169 | borderColor: variables.inputSuccessBorderColor
170 | },
171 |
172 | ".error": {
173 | "NativeBase.Icon": {
174 | color: variables.inputErrorBorderColor
175 | },
176 | "NativeBase.IconNB": {
177 | color: variables.inputErrorBorderColor
178 | },
179 | ".rounded": {
180 | borderRadius: 30,
181 | borderColor: variables.inputErrorBorderColor
182 | },
183 | ".regular": {
184 | borderColor: variables.inputErrorBorderColor
185 | },
186 | ".underline": {
187 | borderWidth: variables.borderWidth * 2,
188 | borderTopWidth: 0,
189 | borderRightWidth: 0,
190 | borderLeftWidth: 0,
191 | borderColor: variables.inputErrorBorderColor
192 | },
193 | borderColor: variables.inputErrorBorderColor
194 | },
195 | ".disabled": {
196 | "NativeBase.Icon": {
197 | color: "#384850"
198 | },
199 | "NativeBase.IconNB": {
200 | color: "#384850"
201 | }
202 | },
203 |
204 | borderWidth: variables.borderWidth * 2,
205 | borderTopWidth: 0,
206 | borderRightWidth: 0,
207 | borderLeftWidth: 0,
208 | borderColor: variables.inputBorderColor,
209 | backgroundColor: "transparent",
210 | flexDirection: "row",
211 | alignItems: "center",
212 | marginLeft: 2
213 | };
214 |
215 | return itemTheme;
216 | };
217 |
--------------------------------------------------------------------------------
/native-base-theme/components/Label.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const labelTheme = {
5 | ".focused": {
6 | width: 0
7 | },
8 | fontSize: 17
9 | };
10 |
11 | return labelTheme;
12 | };
13 |
--------------------------------------------------------------------------------
/native-base-theme/components/Left.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const leftTheme = {
5 | flex: 1,
6 | alignSelf: 'center',
7 | alignItems: 'flex-start',
8 | };
9 |
10 | return leftTheme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/ListItem.js:
--------------------------------------------------------------------------------
1 | import { Platform, PixelRatio } from "react-native";
2 |
3 | import pickerTheme from "./Picker";
4 | import variable from "./../variables/platform";
5 |
6 | export default (variables = variable) => {
7 | const platform = variables.platform;
8 |
9 | const listItemTheme = {
10 | "NativeBase.InputGroup": {
11 | "NativeBase.Icon": {
12 | paddingRight: 5
13 | },
14 | "NativeBase.IconNB": {
15 | paddingRight: 5
16 | },
17 | "NativeBase.Input": {
18 | paddingHorizontal: 5
19 | },
20 | flex: 1,
21 | borderWidth: null,
22 | margin: -10,
23 | borderBottomColor: "transparent"
24 | },
25 | ".searchBar": {
26 | "NativeBase.Item": {
27 | "NativeBase.Icon": {
28 | backgroundColor: "transparent",
29 | color: variables.dropdownLinkColor,
30 | fontSize: platform === "ios"
31 | ? variables.iconFontSize - 10
32 | : variables.iconFontSize - 5,
33 | alignItems: "center",
34 | marginTop: 2,
35 | paddingRight: 8
36 | },
37 | "NativeBase.IconNB": {
38 | backgroundColor: "transparent",
39 | color: null,
40 | alignSelf: "center"
41 | },
42 | "NativeBase.Input": {
43 | alignSelf: "center"
44 | },
45 | alignSelf: "center",
46 | alignItems: "center",
47 | justifyContent: "flex-start",
48 | flex: 1,
49 | height: platform === "ios" ? 30 : 40,
50 | borderColor: "transparent",
51 | backgroundColor: "#fff",
52 | borderRadius: 5
53 | },
54 | "NativeBase.Button": {
55 | ".transparent": {
56 | "NativeBase.Text": {
57 | fontWeight: "500"
58 | },
59 | paddingHorizontal: null,
60 | paddingLeft: platform === "ios" ? 10 : null
61 | },
62 | paddingHorizontal: platform === "ios" ? undefined : null,
63 | width: platform === "ios" ? undefined : 0,
64 | height: platform === "ios" ? undefined : 0
65 | },
66 | backgroundColor: variables.toolbarInputColor,
67 | padding: 10,
68 | marginLeft: null
69 | },
70 | "NativeBase.CheckBox": {
71 | marginLeft: -10,
72 | marginRight: 10,
73 | },
74 | ".first": {
75 | ".itemHeader": {
76 | paddingTop: variables.listItemPadding + 3
77 | }
78 | },
79 | ".itemHeader": {
80 | ".first": {
81 | paddingTop: variables.listItemPadding + 3
82 | },
83 | borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
84 | marginLeft: null,
85 | padding: variables.listItemPadding,
86 | paddingLeft: variables.listItemPadding + 5,
87 | paddingTop: platform === "ios"
88 | ? variables.listItemPadding + 25
89 | : undefined,
90 | paddingBottom: platform === "android"
91 | ? variables.listItemPadding + 20
92 | : undefined,
93 | flexDirection: "row",
94 | borderColor: variables.listBorderColor,
95 | "NativeBase.Text": {
96 | fontSize: 14,
97 | color: platform === "ios" ? undefined : variables.listNoteColor
98 | }
99 | },
100 | ".itemDivider": {
101 | borderBottomWidth: null,
102 | marginLeft: null,
103 | padding: variables.listItemPadding,
104 | paddingLeft: variables.listItemPadding + 5,
105 | backgroundColor: variables.listDividerBg,
106 | flexDirection: "row",
107 | borderColor: variables.listBorderColor
108 | },
109 | ".selected": {
110 | "NativeBase.Left": {
111 | "NativeBase.Text": {
112 | color: variables.brandPrimary
113 | }
114 | },
115 | "NativeBase.Text": {
116 | color: variables.brandPrimary
117 | }
118 | },
119 | "NativeBase.Left": {
120 | "NativeBase.Body": {
121 | "NativeBase.Text": {
122 | ".note": {
123 | color: variables.listNoteColor,
124 | fontWeight: "200"
125 | },
126 | fontWeight: "600"
127 | },
128 | marginLeft: 10,
129 | alignItems: null,
130 | alignSelf: null
131 | },
132 | "NativeBase.Icon": {
133 | width: variables.iconFontSize - 10,
134 | fontSize: variables.iconFontSize - 10
135 | },
136 | "NativeBase.IconNB": {
137 | width: variables.iconFontSize - 10,
138 | fontSize: variables.iconFontSize - 10
139 | },
140 | "NativeBase.Text": {
141 | marginLeft: 10,
142 | alignSelf: "center"
143 | },
144 | flexDirection: "row"
145 | },
146 | "NativeBase.Body": {
147 | "NativeBase.Text": {
148 | marginHorizontal: variables.listItemPadding,
149 | ".note": {
150 | color: variables.listNoteColor,
151 | fontWeight: "200"
152 | }
153 | },
154 | alignSelf: null,
155 | alignItems: null
156 | },
157 | "NativeBase.Right": {
158 | "NativeBase.Badge": {
159 | alignSelf: null
160 | },
161 | "NativeBase.PickerNB": {
162 | "NativeBase.Button": {
163 | marginRight: -15,
164 | "NativeBase.Text": {
165 | color: variables.topTabBarActiveTextColor
166 | }
167 | }
168 | },
169 | "NativeBase.Button": {
170 | alignSelf: null,
171 | ".transparent": {
172 | "NativeBase.Text": {
173 | color: variables.topTabBarActiveTextColor
174 | }
175 | }
176 | },
177 | "NativeBase.Icon": {
178 | alignSelf: null,
179 | fontSize: variables.iconFontSize - 8,
180 | color: "#c9c8cd"
181 | },
182 | "NativeBase.IconNB": {
183 | alignSelf: null,
184 | fontSize: variables.iconFontSize - 8,
185 | color: "#c9c8cd"
186 | },
187 | "NativeBase.Text": {
188 | ".note": {
189 | color: variables.listNoteColor,
190 | fontWeight: "200"
191 | },
192 | alignSelf: null
193 | },
194 | "NativeBase.Thumbnail": {
195 | alignSelf: null
196 | },
197 | "NativeBase.Image": {
198 | alignSelf: null
199 | },
200 | "NativeBase.Radio": {
201 | alignSelf: null
202 | },
203 | "NativeBase.Checkbox": {
204 | alignSelf: null
205 | },
206 | "NativeBase.Switch": {
207 | alignSelf: null
208 | },
209 | padding: null,
210 | flex: 0.28
211 | },
212 | "NativeBase.Text": {
213 | ".note": {
214 | color: variables.listNoteColor,
215 | fontWeight: "200"
216 | },
217 | alignSelf: 'center'
218 | },
219 |
220 | ".last": {
221 | marginLeft: -(variables.listItemPadding + 5),
222 | paddingLeft: (variables.listItemPadding + 5) * 2,
223 | top: 1
224 | },
225 |
226 | ".avatar": {
227 | "NativeBase.Left": {
228 | flex: 0
229 | },
230 | "NativeBase.Body": {
231 | "NativeBase.Text": {
232 | marginLeft: null
233 | },
234 | flex: 1,
235 | paddingVertical: variables.listItemPadding,
236 | borderBottomWidth: variables.borderWidth,
237 | borderColor: variables.listBorderColor,
238 | marginLeft: variables.listItemPadding + 5
239 | },
240 | "NativeBase.Right": {
241 | "NativeBase.Text": {
242 | ".note": {
243 | fontSize: variables.noteFontSize - 2
244 | }
245 | },
246 | flex: 0,
247 | paddingRight: variables.listItemPadding + 5,
248 | alignSelf: "stretch",
249 | paddingVertical: variables.listItemPadding,
250 | borderBottomWidth: variables.borderWidth,
251 | borderColor: variables.listBorderColor
252 | },
253 | borderBottomWidth: null,
254 | paddingVertical: null,
255 | paddingRight: null
256 | },
257 |
258 | ".thumbnail": {
259 | "NativeBase.Left": {
260 | flex: 0
261 | },
262 | "NativeBase.Body": {
263 | "NativeBase.Text": {
264 | marginLeft: null
265 | },
266 | flex: 1,
267 | paddingVertical: variables.listItemPadding + 5,
268 | borderBottomWidth: variables.borderWidth,
269 | borderColor: variables.listBorderColor,
270 | marginLeft: variables.listItemPadding + 5
271 | },
272 | "NativeBase.Right": {
273 | "NativeBase.Button": {
274 | ".transparent": {
275 | "NativeBase.Text": {
276 | fontSize: variables.listNoteSize,
277 | color: variables.sTabBarActiveTextColor
278 | }
279 | },
280 | height: null
281 | },
282 | flex: 0,
283 | justifyContent: "center",
284 | alignSelf: "stretch",
285 | paddingRight: variables.listItemPadding + 5,
286 | paddingVertical: variables.listItemPadding + 5,
287 | borderBottomWidth: variables.borderWidth,
288 | borderColor: variables.listBorderColor
289 | },
290 | borderBottomWidth: null,
291 | paddingVertical: null,
292 | paddingRight: null
293 | },
294 |
295 | ".icon": {
296 | ".last": {
297 | "NativeBase.Body": {
298 | borderBottomWidth: null
299 | },
300 | "NativeBase.Right": {
301 | borderBottomWidth: null
302 | },
303 | borderBottomWidth: variables.borderWidth,
304 | borderColor: variables.listBorderColor
305 | },
306 | "NativeBase.Left": {
307 | "NativeBase.Button": {
308 | "NativeBase.IconNB": {
309 | marginHorizontal: null,
310 | fontSize: variables.iconFontSize - 5
311 | },
312 | "NativeBase.Icon": {
313 | marginHorizontal: null,
314 | fontSize: variables.iconFontSize - 8
315 | },
316 | alignSelf: "center",
317 | height: 29,
318 | width: 29,
319 | borderRadius: 6,
320 | paddingVertical: null,
321 | paddingHorizontal: null,
322 | alignItems: "center",
323 | justifyContent: "center"
324 | },
325 | "NativeBase.Icon": {
326 | width: variables.iconFontSize - 5,
327 | fontSize: variables.iconFontSize - 2
328 | },
329 | "NativeBase.IconNB": {
330 | width: variables.iconFontSize - 5,
331 | fontSize: variables.iconFontSize - 2
332 | },
333 | paddingRight: variables.listItemPadding + 5,
334 | flex: 0,
335 | height: 44,
336 | justifyContent: "center",
337 | alignItems: "center"
338 | },
339 | "NativeBase.Body": {
340 | "NativeBase.Text": {
341 | marginLeft: null,
342 | fontSize: 17
343 | },
344 | flex: 1,
345 | height: 44,
346 | justifyContent: "center",
347 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
348 | borderColor: variables.listBorderColor
349 | },
350 | "NativeBase.Right": {
351 | "NativeBase.Text": {
352 | textAlign: "center",
353 | color: "#8F8E95",
354 | fontSize: 17
355 | },
356 | "NativeBase.IconNB": {
357 | color: "#C8C7CC",
358 | fontSize: variables.iconFontSize - 10,
359 | alignSelf: "center",
360 | paddingLeft: 10,
361 | paddingTop: 3
362 | },
363 | "NativeBase.Icon": {
364 | color: "#C8C7CC",
365 | fontSize: variables.iconFontSize - 10,
366 | alignSelf: "center",
367 | paddingLeft: 10,
368 | paddingTop: 3
369 | },
370 | "NativeBase.Switch": {
371 | marginRight: Platform.OS === "ios" ? undefined : -5,
372 | alignSelf: null
373 | },
374 | "NativeBase.PickerNB": {
375 | ...pickerTheme()
376 | },
377 | flexDirection: "row",
378 | alignItems: "center",
379 | flex: 0,
380 | alignSelf: "stretch",
381 | height: 44,
382 | justifyContent: "flex-end",
383 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
384 | borderColor: variables.listBorderColor,
385 | paddingRight: variables.listItemPadding + 5
386 | },
387 | borderBottomWidth: null,
388 | paddingVertical: null,
389 | paddingRight: null,
390 | height: 44,
391 | justifyContent: "center"
392 | },
393 | ".noBorder": {
394 | borderBottomWidth: null
395 | },
396 | alignItems: "center",
397 | flexDirection: "row",
398 | paddingRight: variables.listItemPadding + 5,
399 | paddingVertical: variables.listItemPadding + 3,
400 | marginLeft: variables.listItemPadding + 5,
401 | borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
402 | backgroundColor: variables.listBg,
403 | borderColor: variables.listBorderColor
404 | };
405 |
406 | return listItemTheme;
407 | };
408 |
--------------------------------------------------------------------------------
/native-base-theme/components/Picker.android.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const pickerTheme = {
5 | ".note": {
6 | color: "#8F8E95"
7 | },
8 | width: 90,
9 | marginRight: -4
10 | };
11 |
12 | return pickerTheme;
13 | };
14 |
--------------------------------------------------------------------------------
/native-base-theme/components/Picker.ios.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const pickerTheme = {};
5 |
6 | return pickerTheme;
7 | };
8 |
--------------------------------------------------------------------------------
/native-base-theme/components/Radio.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | export default (variables = variable) => {
6 | const radioTheme = {
7 | ".selected": {
8 | "NativeBase.IconNB": {
9 | color: Platform.OS === "ios"
10 | ? variables.radioColor
11 | : variables.radioSelectedColorAndroid,
12 | lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
13 | height: Platform.OS === "ios" ? 20 : undefined
14 | }
15 | },
16 | "NativeBase.IconNB": {
17 | color: Platform.OS === "ios" ? "transparent" : undefined,
18 | lineHeight: Platform.OS === "ios"
19 | ? undefined
20 | : variables.radioBtnLineHeight,
21 | fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
22 | }
23 | };
24 |
25 | return radioTheme;
26 | };
27 |
--------------------------------------------------------------------------------
/native-base-theme/components/Right.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const rightTheme = {
5 | 'NativeBase.Button': {
6 | alignSelf: null,
7 | },
8 | flex: 1,
9 | alignSelf: 'center',
10 | alignItems: 'flex-end',
11 | };
12 |
13 | return rightTheme;
14 | };
15 |
--------------------------------------------------------------------------------
/native-base-theme/components/Segment.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 |
6 | const segmentTheme = {
7 | height: 45,
8 | borderColor: variables.segmentBorderColorMain,
9 | flexDirection: "row",
10 | justifyContent: "center",
11 | backgroundColor: variables.segmentBackgroundColor,
12 | "NativeBase.Button": {
13 | alignSelf: "center",
14 | borderRadius: 0,
15 | paddingHorizontal: 20,
16 | height: 30,
17 | backgroundColor: "transparent",
18 | borderWidth: 1,
19 | borderLeftWidth: 0,
20 | borderColor: variables.segmentBorderColor,
21 | elevation: 0,
22 | ".active": {
23 | backgroundColor: variables.segmentActiveBackgroundColor,
24 | "NativeBase.Text": {
25 | color: variables.segmentActiveTextColor,
26 | },
27 | },
28 | ".first": {
29 | borderTopLeftRadius: platform === "ios" ? 5 : undefined,
30 | borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
31 | borderLeftWidth: 1,
32 | },
33 | ".last": {
34 | borderTopRightRadius: platform === "ios" ? 5 : undefined,
35 | borderBottomRightRadius: platform === "ios" ? 5 : undefined,
36 | },
37 | "NativeBase.Text": {
38 | color: variables.segmentTextColor,
39 | fontSize: 14,
40 | },
41 | },
42 | };
43 |
44 | return segmentTheme;
45 | };
46 |
--------------------------------------------------------------------------------
/native-base-theme/components/Separator.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const theme = {
5 | '.group': {
6 | height: 50,
7 | paddingVertical: variables.listItemPadding - 8,
8 | paddingTop: variables.listItemPadding + 12,
9 | '.bordered': {
10 | height: 50,
11 | paddingVertical: variables.listItemPadding - 8,
12 | paddingTop: variables.listItemPadding + 12,
13 | },
14 | },
15 | '.bordered': {
16 | '.noTopBorder': {
17 | borderTopWidth: 0,
18 | },
19 | '.noBottomBorder': {
20 | borderBottomWidth: 0,
21 | },
22 | height: 35,
23 | paddingTop: variables.listItemPadding + 2,
24 | paddingBottom: variables.listItemPadding,
25 | borderBottomWidth: variables.borderWidth,
26 | borderTopWidth: variables.borderWidth,
27 | borderColor: variables.listBorderColor,
28 | },
29 | 'NativeBase.Text': {
30 | fontSize: variables.tabBarTextSize - 2,
31 | color: '#777',
32 | },
33 | '.noTopBorder': {
34 | borderTopWidth: 0,
35 | },
36 | '.noBottomBorder': {
37 | borderBottomWidth: 0,
38 | },
39 | height: 38,
40 | backgroundColor: '#F0EFF5',
41 | flex: 1,
42 | justifyContent: 'center',
43 | paddingLeft: variables.listItemPadding + 5,
44 | };
45 |
46 | return theme;
47 | };
48 |
--------------------------------------------------------------------------------
/native-base-theme/components/Spinner.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const spinnerTheme = {
5 | height: 80
6 | };
7 |
8 | return spinnerTheme;
9 | };
10 |
--------------------------------------------------------------------------------
/native-base-theme/components/Subtitle.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const subtitleTheme = {
5 | fontSize: variables.subTitleFontSize,
6 | fontFamily: variables.titleFontfamily,
7 | color: variables.subtitleColor,
8 | textAlign: 'center',
9 | };
10 |
11 | return subtitleTheme;
12 | };
13 |
--------------------------------------------------------------------------------
/native-base-theme/components/SwipeRow.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const swipeRowTheme = {
5 | "NativeBase.ListItem": {
6 | ".list": {
7 | backgroundColor: "#FFF",
8 | },
9 | marginLeft: 0,
10 | },
11 | "NativeBase.Left": {
12 | flex: 0,
13 | alignSelf: null,
14 | alignItems: null,
15 | "NativeBase.Button": {
16 | flex: 1,
17 | alignItems: "center",
18 | justifyContent: "center",
19 | alignSelf: "stretch",
20 | borderRadius: 0,
21 | },
22 | },
23 | "NativeBase.Right": {
24 | flex: 0,
25 | alignSelf: null,
26 | alignItems: null,
27 | "NativeBase.Button": {
28 | flex: 1,
29 | alignItems: "center",
30 | justifyContent: "center",
31 | alignSelf: "stretch",
32 | borderRadius: 0,
33 | },
34 | },
35 | "NativeBase.Button": {
36 | flex: 1,
37 | height: null,
38 | alignItems: "center",
39 | justifyContent: "center",
40 | alignSelf: "stretch",
41 | borderRadius: 0,
42 | },
43 | };
44 |
45 | return swipeRowTheme;
46 | };
47 |
--------------------------------------------------------------------------------
/native-base-theme/components/Switch.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const switchTheme = {
5 | marginVertical: -5,
6 | };
7 |
8 | return switchTheme;
9 | };
10 |
--------------------------------------------------------------------------------
/native-base-theme/components/Tab.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const tabTheme = {
5 | flex: 1,
6 | backgroundColor: "#FFF"
7 | };
8 |
9 | return tabTheme;
10 | };
11 |
--------------------------------------------------------------------------------
/native-base-theme/components/TabBar.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const tabBarTheme = {
5 | ".tabIcon": {
6 | height: undefined
7 | },
8 | ".vertical": {
9 | height: 60
10 | },
11 | "NativeBase.Button": {
12 | ".transparent": {
13 | "NativeBase.Text": {
14 | fontSize: variables.tabFontSize,
15 | color: variables.sTabBarActiveTextColor,
16 | fontWeight: "400"
17 | },
18 | "NativeBase.IconNB": {
19 | color: variables.sTabBarActiveTextColor
20 | }
21 | },
22 | "NativeBase.IconNB": {
23 | color: variables.sTabBarActiveTextColor
24 | },
25 | "NativeBase.Text": {
26 | fontSize: variables.tabFontSize,
27 | color: variables.sTabBarActiveTextColor,
28 | fontWeight: "400"
29 | },
30 | ".isTabActive": {
31 | "NativeBase.Text": {
32 | fontWeight: "900"
33 | }
34 | },
35 | flex: 1,
36 | alignSelf: "stretch",
37 | alignItems: "center",
38 | justifyContent: "center",
39 | borderRadius: null,
40 | borderBottomColor: "transparent",
41 | backgroundColor: variables.tabBgColor
42 | },
43 | height: 45,
44 | flexDirection: "row",
45 | justifyContent: "space-around",
46 | borderWidth: 1,
47 | borderTopWidth: 0,
48 | borderLeftWidth: 0,
49 | borderRightWidth: 0,
50 | borderBottomColor: "#ccc",
51 | backgroundColor: variables.tabBgColor
52 | };
53 |
54 | return tabBarTheme;
55 | };
56 |
--------------------------------------------------------------------------------
/native-base-theme/components/TabContainer.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 | import { Platform } from "react-native";
3 |
4 | export default (variables = variable) => {
5 | const platformStyle = variables.platformStyle;
6 | const platform = variables.platform;
7 |
8 | const tabContainerTheme = {
9 | elevation: 3,
10 | height: 50,
11 | flexDirection: "row",
12 | shadowColor: platformStyle === "material" ? "#000" : undefined,
13 | shadowOffset: platformStyle === "material"
14 | ? { width: 0, height: 2 }
15 | : undefined,
16 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
17 | shadowRadius: platformStyle === "material" ? 1.2 : undefined,
18 | justifyContent: "space-around",
19 | borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
20 | borderColor: variables.topTabBarBorderColor
21 | };
22 |
23 | return tabContainerTheme;
24 | };
25 |
--------------------------------------------------------------------------------
/native-base-theme/components/TabHeading.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 |
6 | const tabHeadingTheme = {
7 | flexDirection: "row",
8 | backgroundColor: variables.tabDefaultBg,
9 | flex: 1,
10 | alignItems: "center",
11 | justifyContent: "center",
12 | ".scrollable": {
13 | paddingHorizontal: 20,
14 | flex: platform === "android" ? 0 : 1,
15 | minWidth: platform === "android" ? undefined : 60
16 | },
17 | "NativeBase.Text": {
18 | color: variables.topTabBarTextColor,
19 | marginHorizontal: 7
20 | },
21 | "NativeBase.Icon": {
22 | color: variables.topTabBarTextColor,
23 | fontSize: platform === "ios" ? 26 : undefined
24 | },
25 | ".active": {
26 | "NativeBase.Text": {
27 | color: variables.topTabBarActiveTextColor,
28 | fontWeight: "600"
29 | },
30 | "NativeBase.Icon": {
31 | color: variables.topTabBarActiveTextColor
32 | }
33 | }
34 | };
35 |
36 | return tabHeadingTheme;
37 | };
38 |
--------------------------------------------------------------------------------
/native-base-theme/components/Text.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const textTheme = {
5 | fontSize: variables.DefaultFontSize - 1,
6 | fontFamily: variables.fontFamily,
7 | color: variables.textColor,
8 | ".note": {
9 | color: "#a7a7a7",
10 | fontSize: variables.noteFontSize
11 | }
12 | };
13 |
14 | return textTheme;
15 | };
16 |
--------------------------------------------------------------------------------
/native-base-theme/components/Textarea.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const textAreaTheme = {
5 | ".underline": {
6 | borderBottomWidth: variables.borderWidth,
7 | marginTop: 5,
8 | borderColor: variables.inputBorderColor
9 | },
10 | ".bordered": {
11 | borderWidth: 1,
12 | marginTop: 5,
13 | borderColor: variables.inputBorderColor
14 | },
15 | color: variables.textColor,
16 | paddingLeft: 10,
17 | paddingRight: 5,
18 | fontSize: 15,
19 | textAlignVertical: "top"
20 | };
21 |
22 | return textAreaTheme;
23 | };
24 |
--------------------------------------------------------------------------------
/native-base-theme/components/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import variable from './../variables/platform';
2 |
3 | export default (variables = variable) => {
4 | const thumbnailTheme = {
5 | '.square': {
6 | borderRadius: 0,
7 | '.small': {
8 | width: 36,
9 | height: 36,
10 | borderRadius: 0,
11 | },
12 | '.large': {
13 | width: 80,
14 | height: 80,
15 | borderRadius: 0,
16 | },
17 | },
18 | '.small': {
19 | width: 36,
20 | height: 36,
21 | borderRadius: 18,
22 | '.square': {
23 | borderRadius: 0,
24 | },
25 | },
26 | '.large': {
27 | width: 80,
28 | height: 80,
29 | borderRadius: 40,
30 | '.square': {
31 | borderRadius: 0,
32 | },
33 | },
34 | width: 56,
35 | height: 56,
36 | borderRadius: 28,
37 | };
38 |
39 | return thumbnailTheme;
40 | };
41 |
--------------------------------------------------------------------------------
/native-base-theme/components/Title.js:
--------------------------------------------------------------------------------
1 | import { Platform } from "react-native";
2 |
3 | import variable from "./../variables/platform";
4 |
5 | export default (variables = variable) => {
6 | const titleTheme = {
7 | fontSize: variables.titleFontSize,
8 | fontFamily: variables.titleFontfamily,
9 | color: variables.titleFontColor,
10 | fontWeight: Platform.OS === "ios" ? "600" : undefined,
11 | textAlign: "center"
12 | };
13 |
14 | return titleTheme;
15 | };
16 |
--------------------------------------------------------------------------------
/native-base-theme/components/Toast.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const platform = variables.platform;
5 |
6 | const toastTheme = {
7 | ".danger": {
8 | backgroundColor: variables.brandDanger
9 | },
10 | ".warning": {
11 | backgroundColor: variables.brandWarning
12 | },
13 | ".success": {
14 | backgroundColor: variables.brandSuccess
15 | },
16 | backgroundColor: "rgba(0,0,0,0.8)",
17 | borderRadius: platform === "ios" ? 5 : 0,
18 | flexDirection: "row",
19 | justifyContent: "space-between",
20 | alignItems: "center",
21 | padding: 10,
22 | minHeight: 50,
23 | "NativeBase.Text": {
24 | color: "#fff",
25 | flex: 1
26 | },
27 | "NativeBase.Button": {
28 | backgroundColor: "transparent",
29 | height: 30,
30 | elevation: 0,
31 | "NativeBase.Text": {
32 | fontSize: 14
33 | }
34 | }
35 | };
36 |
37 | return toastTheme;
38 | };
39 |
--------------------------------------------------------------------------------
/native-base-theme/components/View.js:
--------------------------------------------------------------------------------
1 | import variable from "./../variables/platform";
2 |
3 | export default (variables = variable) => {
4 | const viewTheme = {
5 | ".padder": {
6 | padding: variables.contentPadding
7 | }
8 | };
9 |
10 | return viewTheme;
11 | };
12 |
--------------------------------------------------------------------------------
/native-base-theme/components/index.js:
--------------------------------------------------------------------------------
1 | import _ from "lodash";
2 | import bodyTheme from "./Body";
3 | import leftTheme from "./Left";
4 | import rightTheme from "./Right";
5 | import headerTheme from "./Header";
6 | import switchTheme from "./Switch";
7 | import thumbnailTheme from "./Thumbnail";
8 | import containerTheme from "./Container";
9 | import contentTheme from "./Content";
10 | import buttonTheme from "./Button";
11 | import titleTheme from "./Title";
12 | import subtitleTheme from "./Subtitle";
13 | import inputGroupTheme from "./InputGroup";
14 | import badgeTheme from "./Badge";
15 | import checkBoxTheme from "./CheckBox";
16 | import cardTheme from "./Card";
17 | import radioTheme from "./Radio";
18 | import h3Theme from "./H3";
19 | import h2Theme from "./H2";
20 | import h1Theme from "./H1";
21 | import footerTheme from "./Footer";
22 | import footerTabTheme from "./FooterTab";
23 | import fabTheme from "./Fab";
24 | import itemTheme from "./Item";
25 | import labelTheme from "./Label";
26 | import textAreaTheme from "./Textarea";
27 | import textTheme from "./Text";
28 | import toastTheme from "./Toast";
29 | import tabTheme from "./Tab";
30 | import tabBarTheme from "./TabBar";
31 | import tabContainerTheme from "./TabContainer";
32 | import viewTheme from "./View";
33 | import tabHeadingTheme from "./TabHeading";
34 | import iconTheme from "./Icon";
35 | import inputTheme from "./Input";
36 | import swipeRowTheme from "./SwipeRow";
37 | import segmentTheme from "./Segment";
38 | import spinnerTheme from "./Spinner";
39 | import cardItemTheme from "./CardItem";
40 | import listItemTheme from "./ListItem";
41 | import formTheme from "./Form";
42 | import separatorTheme from "./Separator";
43 | import variable from "./../variables/platform";
44 |
45 | export default (variables = variable) => {
46 | const theme = {
47 | variables,
48 | "NativeBase.Left": {
49 | ...leftTheme(variables)
50 | },
51 | "NativeBase.Right": {
52 | ...rightTheme(variables)
53 | },
54 | "NativeBase.Body": {
55 | ...bodyTheme(variables)
56 | },
57 |
58 | "NativeBase.Header": {
59 | ...headerTheme(variables)
60 | },
61 |
62 | "NativeBase.Button": {
63 | ...buttonTheme(variables)
64 | },
65 |
66 | "NativeBase.Title": {
67 | ...titleTheme(variables)
68 | },
69 | "NativeBase.Subtitle": {
70 | ...subtitleTheme(variables)
71 | },
72 |
73 | "NativeBase.InputGroup": {
74 | ...inputGroupTheme(variables)
75 | },
76 |
77 | "NativeBase.Input": {
78 | ...inputTheme(variables)
79 | },
80 |
81 | "NativeBase.Badge": {
82 | ...badgeTheme(variables)
83 | },
84 |
85 | "NativeBase.CheckBox": {
86 | ...checkBoxTheme(variables)
87 | },
88 |
89 | "NativeBase.Radio": {
90 | ...radioTheme(variables)
91 | },
92 |
93 | "NativeBase.Card": {
94 | ...cardTheme()
95 | },
96 |
97 | "NativeBase.CardItem": {
98 | ...cardItemTheme(variables)
99 | },
100 |
101 | "NativeBase.Toast": {
102 | ...toastTheme(variables)
103 | },
104 |
105 | "NativeBase.H1": {
106 | ...h1Theme(variables)
107 | },
108 | "NativeBase.H2": {
109 | ...h2Theme(variables)
110 | },
111 | "NativeBase.H3": {
112 | ...h3Theme(variables)
113 | },
114 | "NativeBase.Form": {
115 | ...formTheme(variables)
116 | },
117 |
118 | "NativeBase.Container": {
119 | ...containerTheme(variables)
120 | },
121 | "NativeBase.Content": {
122 | ...contentTheme(variables)
123 | },
124 |
125 | "NativeBase.Footer": {
126 | ...footerTheme(variables)
127 | },
128 |
129 | "NativeBase.Tabs": {
130 | flex: 1
131 | },
132 |
133 | "NativeBase.FooterTab": {
134 | ...footerTabTheme(variables)
135 | },
136 |
137 | "NativeBase.ListItem": {
138 | ...listItemTheme(variables)
139 | },
140 |
141 | "NativeBase.ListItem1": {
142 | ...listItemTheme(variables)
143 | },
144 |
145 | "NativeBase.Icon": {
146 | ...iconTheme(variables)
147 | },
148 | "NativeBase.IconNB": {
149 | ...iconTheme(variables)
150 | },
151 | "NativeBase.Text": {
152 | ...textTheme(variables)
153 | },
154 | "NativeBase.Spinner": {
155 | ...spinnerTheme(variables)
156 | },
157 |
158 | "NativeBase.Fab": {
159 | ...fabTheme(variables)
160 | },
161 |
162 | "NativeBase.Item": {
163 | ...itemTheme(variables)
164 | },
165 |
166 | "NativeBase.Label": {
167 | ...labelTheme(variables)
168 | },
169 |
170 | "NativeBase.Textarea": {
171 | ...textAreaTheme(variables)
172 | },
173 |
174 | "NativeBase.PickerNB": {
175 | "NativeBase.Button": {
176 | "NativeBase.Text": {}
177 | }
178 | },
179 |
180 | "NativeBase.Tab": {
181 | ...tabTheme(variables)
182 | },
183 |
184 | "NativeBase.Segment": {
185 | ...segmentTheme(variables)
186 | },
187 |
188 | "NativeBase.TabBar": {
189 | ...tabBarTheme(variables)
190 | },
191 | "NativeBase.ViewNB": {
192 | ...viewTheme(variables)
193 | },
194 | "NativeBase.TabHeading": {
195 | ...tabHeadingTheme(variables)
196 | },
197 | "NativeBase.TabContainer": {
198 | ...tabContainerTheme(variables)
199 | },
200 | "NativeBase.Switch": {
201 | ...switchTheme(variables)
202 | },
203 | "NativeBase.Separator": {
204 | ...separatorTheme(variables)
205 | },
206 | "NativeBase.SwipeRow": {
207 | ...swipeRowTheme(variables)
208 | },
209 | "NativeBase.Thumbnail": {
210 | ...thumbnailTheme(variables)
211 | }
212 | };
213 |
214 | const cssifyTheme = (grandparent, parent, parentKey) => {
215 | _.forEach(parent, (style, styleName) => {
216 | // console.log('styleName', styleName);
217 | // console.log('parentKey', parentKey);
218 | if (
219 | styleName.indexOf(".") === 0 &&
220 | parentKey &&
221 | parentKey.indexOf(".") === 0
222 | ) {
223 | if (grandparent) {
224 | if (!grandparent[styleName]) {
225 | grandparent[styleName] = {};
226 | } else {
227 | grandparent[styleName][parentKey] = style;
228 | }
229 | }
230 | }
231 | if (style && typeof style === "object") {
232 | cssifyTheme(parent, style, styleName);
233 | }
234 | });
235 | };
236 |
237 | cssifyTheme(null, theme, null);
238 |
239 | return theme;
240 | };
241 |
--------------------------------------------------------------------------------
/native-base-theme/variables/commonColor.js:
--------------------------------------------------------------------------------
1 | import color from "color";
2 |
3 | import { Platform, Dimensions, PixelRatio } from "react-native";
4 |
5 | const deviceHeight = Dimensions.get("window").height;
6 | const deviceWidth = Dimensions.get("window").width;
7 | const platform = Platform.OS;
8 | const platformStyle = undefined;
9 | const isIphoneX =
10 | platform === "ios" && deviceHeight === 812 && deviceWidth === 375;
11 |
12 | export default {
13 | platformStyle,
14 | platform,
15 |
16 | //Android
17 | androidRipple: true,
18 | androidRippleColor: "rgba(256, 256, 256, 0.3)",
19 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
20 | btnUppercaseAndroidText: true,
21 |
22 | // Badge
23 | badgeBg: "#ED1727",
24 | badgeColor: "#fff",
25 | badgePadding: platform === "ios" ? 3 : 0,
26 |
27 | // Button
28 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
29 | btnDisabledBg: "#b5b5b5",
30 | buttonPadding: 6,
31 | get btnPrimaryBg() {
32 | return this.brandPrimary;
33 | },
34 | get btnPrimaryColor() {
35 | return this.inverseTextColor;
36 | },
37 | get btnInfoBg() {
38 | return this.brandInfo;
39 | },
40 | get btnInfoColor() {
41 | return this.inverseTextColor;
42 | },
43 | get btnSuccessBg() {
44 | return this.brandSuccess;
45 | },
46 | get btnSuccessColor() {
47 | return this.inverseTextColor;
48 | },
49 | get btnDangerBg() {
50 | return this.brandDanger;
51 | },
52 | get btnDangerColor() {
53 | return this.inverseTextColor;
54 | },
55 | get btnWarningBg() {
56 | return this.brandWarning;
57 | },
58 | get btnWarningColor() {
59 | return this.inverseTextColor;
60 | },
61 | get btnTextSize() {
62 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
63 | },
64 | get btnTextSizeLarge() {
65 | return this.fontSizeBase * 1.5;
66 | },
67 | get btnTextSizeSmall() {
68 | return this.fontSizeBase * 0.8;
69 | },
70 | get borderRadiusLarge() {
71 | return this.fontSizeBase * 3.8;
72 | },
73 | get iconSizeLarge() {
74 | return this.iconFontSize * 1.5;
75 | },
76 | get iconSizeSmall() {
77 | return this.iconFontSize * 0.6;
78 | },
79 |
80 | // Card
81 | cardDefaultBg: "#fff",
82 | cardBorderColor: "#ccc",
83 |
84 | // CheckBox
85 | CheckboxRadius: platform === "ios" ? 13 : 0,
86 | CheckboxBorderWidth: platform === "ios" ? 1 : 2,
87 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
88 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
89 | CheckboxIconSize: platform === "ios" ? 21 : 14,
90 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
91 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
92 | DefaultFontSize: 17,
93 | checkboxBgColor: "#039BE5",
94 | checkboxSize: 20,
95 | checkboxTickColor: "#fff",
96 |
97 | // Color
98 | brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
99 | brandInfo: "#62B1F6",
100 | brandSuccess: "#5cb85c",
101 | brandDanger: "#d9534f",
102 | brandWarning: "#f0ad4e",
103 | brandDark: "#000",
104 | brandLight: "#f4f4f4",
105 |
106 | // Font
107 | fontFamily: platform === "ios" ? "System" : "Roboto",
108 | fontSizeBase: 15,
109 | get fontSizeH1() {
110 | return this.fontSizeBase * 1.8;
111 | },
112 | get fontSizeH2() {
113 | return this.fontSizeBase * 1.6;
114 | },
115 | get fontSizeH3() {
116 | return this.fontSizeBase * 1.4;
117 | },
118 |
119 | // Footer
120 | footerHeight: isIphoneX ? 89 : 55,
121 | footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
122 | footerPaddingBottom: isIphoneX ? 34 : 0,
123 |
124 | // FooterTab
125 | tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
126 | tabBarTextSize: platform === "ios" ? 14 : 11,
127 | activeTab: platform === "ios" ? "#007aff" : "#fff",
128 | sTabBarActiveTextColor: "#007aff",
129 | tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
130 | tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
131 |
132 | // Header
133 | toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
134 | toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
135 | toolbarHeight: platform === "ios" ? (isIphoneX ? 88 : 64) : 56,
136 | toolbarSearchIconSize: platform === "ios" ? 20 : 23,
137 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
138 | searchBarHeight: platform === "ios" ? 30 : 40,
139 | searchBarInputHeight: platform === "ios" ? 30 : 50,
140 | toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
141 | iosStatusbar: "dark-content",
142 | toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
143 | get statusBarColor() {
144 | return color(this.toolbarDefaultBg)
145 | .darken(0.2)
146 | .hex();
147 | },
148 | get darkenHeader() {
149 | return color(this.tabBgColor)
150 | .darken(0.03)
151 | .hex();
152 | },
153 |
154 | // Icon
155 | iconFamily: "Ionicons",
156 | iconFontSize: platform === "ios" ? 30 : 28,
157 | iconHeaderSize: platform === "ios" ? 33 : 24,
158 |
159 | // InputGroup
160 | inputFontSize: 17,
161 | inputBorderColor: "#D9D5DC",
162 | inputSuccessBorderColor: "#2b8339",
163 | inputErrorBorderColor: "#ed2f2f",
164 | inputHeightBase: 50,
165 | get inputColor() {
166 | return this.textColor;
167 | },
168 | get inputColorPlaceholder() {
169 | return "#575757";
170 | },
171 |
172 | // Line Height
173 | btnLineHeight: 19,
174 | lineHeightH1: 32,
175 | lineHeightH2: 27,
176 | lineHeightH3: 22,
177 | lineHeight: platform === "ios" ? 20 : 24,
178 |
179 | // List
180 | listBg: "transparent",
181 | listBorderColor: "#c9c9c9",
182 | listDividerBg: "#f4f4f4",
183 | listBtnUnderlayColor: "#DDD",
184 | listItemPadding: platform === "ios" ? 10 : 12,
185 | listNoteColor: "#808080",
186 | listNoteSize: 13,
187 |
188 | // Progress Bar
189 | defaultProgressColor: "#E4202D",
190 | inverseProgressColor: "#1A191B",
191 |
192 | // Radio Button
193 | radioBtnSize: platform === "ios" ? 25 : 23,
194 | radioSelectedColorAndroid: "#3F51B5",
195 | radioBtnLineHeight: platform === "ios" ? 29 : 24,
196 | radioColor: "#007aff",
197 |
198 | // Segment
199 | segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
200 | segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
201 | segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
202 | segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
203 | segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
204 | segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
205 |
206 | // Spinner
207 | defaultSpinnerColor: "#45D56E",
208 | inverseSpinnerColor: "#1A191B",
209 |
210 | // Tab
211 | tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
212 | topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
213 | topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
214 | topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
215 | topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
216 |
217 | // Tabs
218 | tabBgColor: "#F8F8F8",
219 | tabFontSize: 15,
220 |
221 | // Text
222 | textColor: "#000",
223 | inverseTextColor: "#fff",
224 | noteFontSize: 14,
225 | get defaultTextColor() {
226 | return this.textColor;
227 | },
228 |
229 | // Title
230 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
231 | titleFontSize: platform === "ios" ? 17 : 19,
232 | subTitleFontSize: platform === "ios" ? 12 : 14,
233 | subtitleColor: platform === "ios" ? "#000" : "#fff",
234 | titleFontColor: platform === "ios" ? "#000" : "#fff",
235 |
236 | // Other
237 | borderRadiusBase: platform === "ios" ? 5 : 2,
238 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
239 | contentPadding: 10,
240 | dropdownLinkColor: "#414142",
241 | inputLineHeight: 24,
242 | deviceWidth,
243 | deviceHeight,
244 | isIphoneX,
245 | inputGroupRoundedBorderRadius: 30
246 | };
247 |
--------------------------------------------------------------------------------
/native-base-theme/variables/material.js:
--------------------------------------------------------------------------------
1 | import color from "color";
2 |
3 | import { Platform, Dimensions, PixelRatio } from "react-native";
4 |
5 | const deviceHeight = Dimensions.get("window").height;
6 | const deviceWidth = Dimensions.get("window").width;
7 | const platform = Platform.OS;
8 | const platformStyle = "material";
9 | const isIphoneX =
10 | platform === "ios" && deviceHeight === 812 && deviceWidth === 375;
11 |
12 | export default {
13 | platformStyle,
14 | platform,
15 |
16 | // Android
17 | androidRipple: true,
18 | androidRippleColor: "rgba(256, 256, 256, 0.3)",
19 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
20 | btnUppercaseAndroidText: true,
21 |
22 | // Badge
23 | badgeBg: "#ED1727",
24 | badgeColor: "#fff",
25 | badgePadding: 0,
26 |
27 | // Button
28 | btnFontFamily: "Roboto",
29 | btnDisabledBg: "#b5b5b5",
30 | buttonPadding: 6,
31 | get btnPrimaryBg() {
32 | return this.brandPrimary;
33 | },
34 | get btnPrimaryColor() {
35 | return this.inverseTextColor;
36 | },
37 | get btnInfoBg() {
38 | return this.brandInfo;
39 | },
40 | get btnInfoColor() {
41 | return this.inverseTextColor;
42 | },
43 | get btnSuccessBg() {
44 | return this.brandSuccess;
45 | },
46 | get btnSuccessColor() {
47 | return this.inverseTextColor;
48 | },
49 | get btnDangerBg() {
50 | return this.brandDanger;
51 | },
52 | get btnDangerColor() {
53 | return this.inverseTextColor;
54 | },
55 | get btnWarningBg() {
56 | return this.brandWarning;
57 | },
58 | get btnWarningColor() {
59 | return this.inverseTextColor;
60 | },
61 | get btnTextSize() {
62 | return this.fontSizeBase - 1;
63 | },
64 | get btnTextSizeLarge() {
65 | return this.fontSizeBase * 1.5;
66 | },
67 | get btnTextSizeSmall() {
68 | return this.fontSizeBase * 0.8;
69 | },
70 | get borderRadiusLarge() {
71 | return this.fontSizeBase * 3.8;
72 | },
73 | get iconSizeLarge() {
74 | return this.iconFontSize * 1.5;
75 | },
76 | get iconSizeSmall() {
77 | return this.iconFontSize * 0.6;
78 | },
79 |
80 | // Card
81 | cardDefaultBg: "#fff",
82 | cardBorderColor: "#ccc",
83 |
84 | // CheckBox
85 | CheckboxRadius: 0,
86 | CheckboxBorderWidth: 2,
87 | CheckboxPaddingLeft: 2,
88 | CheckboxPaddingBottom: 5,
89 | CheckboxIconSize: 14,
90 | CheckboxIconMarginTop: 1,
91 | CheckboxFontSize: 18,
92 | DefaultFontSize: 17,
93 | checkboxBgColor: "#039BE5",
94 | checkboxSize: 20,
95 | checkboxTickColor: "#fff",
96 |
97 | // Color
98 | brandPrimary: "#3F51B5",
99 | brandInfo: "#3F57D3",
100 | brandSuccess: "#5cb85c",
101 | brandDanger: "#d9534f",
102 | brandWarning: "#f0ad4e",
103 | brandDark: "#000",
104 | brandLight: "#f4f4f4",
105 |
106 | // Font
107 | fontFamily: "Roboto",
108 | fontSizeBase: 15,
109 | get fontSizeH1() {
110 | return this.fontSizeBase * 1.8;
111 | },
112 | get fontSizeH2() {
113 | return this.fontSizeBase * 1.6;
114 | },
115 | get fontSizeH3() {
116 | return this.fontSizeBase * 1.4;
117 | },
118 |
119 | // Footer
120 | footerHeight: isIphoneX ? 89 : 55,
121 | footerDefaultBg: "#3F51B5",
122 | footerPaddingBottom: isIphoneX ? 34 : 0,
123 |
124 | // FooterTab
125 | tabBarTextColor: "#fff",
126 | tabBarTextSize: 11,
127 | activeTab: "#fff",
128 | sTabBarActiveTextColor: "#007aff",
129 | tabBarActiveTextColor: "#fff",
130 | tabActiveBgColor: "#3F51B5",
131 |
132 | // Header
133 | toolbarBtnColor: "#fff",
134 | toolbarDefaultBg: "#3F51B5",
135 | toolbarHeight: 56,
136 | toolbarSearchIconSize: 23,
137 | toolbarInputColor: "#fff",
138 | searchBarHeight: 40,
139 | searchBarInputHeight: 50,
140 | toolbarBtnTextColor: "#fff",
141 | toolbarDefaultBorder: "#3F51B5",
142 | iosStatusbar: "light-content",
143 | get statusBarColor() {
144 | return color(this.toolbarDefaultBg)
145 | .darken(0.2)
146 | .hex();
147 | },
148 | get darkenHeader() {
149 | return color(this.tabBgColor)
150 | .darken(0.03)
151 | .hex();
152 | },
153 |
154 | // Icon
155 | iconFamily: "Ionicons",
156 | iconFontSize: 28,
157 | iconHeaderSize: 24,
158 |
159 | // InputGroup
160 | inputFontSize: 17,
161 | inputBorderColor: "#D9D5DC",
162 | inputSuccessBorderColor: "#2b8339",
163 | inputErrorBorderColor: "#ed2f2f",
164 | inputHeightBase: 50,
165 | get inputColor() {
166 | return this.textColor;
167 | },
168 | get inputColorPlaceholder() {
169 | return "#575757";
170 | },
171 |
172 | // Line Height
173 | btnLineHeight: 19,
174 | lineHeightH1: 32,
175 | lineHeightH2: 27,
176 | lineHeightH3: 22,
177 | lineHeight: 24,
178 |
179 | // List
180 | listBg: "transparent",
181 | listBorderColor: "#c9c9c9",
182 | listDividerBg: "#f4f4f4",
183 | listBtnUnderlayColor: "#DDD",
184 | listItemPadding: 12,
185 | listNoteColor: "#808080",
186 | listNoteSize: 13,
187 |
188 | // Progress Bar
189 | defaultProgressColor: "#E4202D",
190 | inverseProgressColor: "#1A191B",
191 |
192 | // Radio Button
193 | radioBtnSize: 23,
194 | radioSelectedColorAndroid: "#5067FF",
195 | radioBtnLineHeight: 24,
196 | radioColor: this.brandPrimary,
197 |
198 | // Segment
199 | segmentBackgroundColor: "#3F51B5",
200 | segmentActiveBackgroundColor: "#fff",
201 | segmentTextColor: "#fff",
202 | segmentActiveTextColor: "#3F51B5",
203 | segmentBorderColor: "#fff",
204 | segmentBorderColorMain: "#3F51B5",
205 |
206 | // Spinner
207 | defaultSpinnerColor: "#45D56E",
208 | inverseSpinnerColor: "#1A191B",
209 |
210 | // Tab
211 | tabDefaultBg: "#3F51B5",
212 | topTabBarTextColor: "#b3c7f9",
213 | topTabBarActiveTextColor: "#fff",
214 | topTabBarBorderColor: "#fff",
215 | topTabBarActiveBorderColor: "#fff",
216 |
217 | // Tabs
218 | tabBgColor: "#F8F8F8",
219 | tabFontSize: 15,
220 |
221 | // Text
222 | textColor: "#000",
223 | inverseTextColor: "#fff",
224 | noteFontSize: 14,
225 | get defaultTextColor() {
226 | return this.textColor;
227 | },
228 |
229 | // Title
230 | titleFontfamily: "Roboto",
231 | titleFontSize: 19,
232 | subTitleFontSize: 14,
233 | subtitleColor: "#FFF",
234 | titleFontColor: "#FFF",
235 |
236 | // Other
237 | borderRadiusBase: 2,
238 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
239 | contentPadding: 10,
240 | dropdownLinkColor: "#414142",
241 | inputLineHeight: 24,
242 | deviceWidth,
243 | deviceHeight,
244 | isIphoneX,
245 | inputGroupRoundedBorderRadius: 30
246 | };
247 |
--------------------------------------------------------------------------------
/native-base-theme/variables/platform.js:
--------------------------------------------------------------------------------
1 | import color from "color";
2 |
3 | import { Platform, Dimensions, PixelRatio } from "react-native";
4 |
5 | const deviceHeight = Dimensions.get("window").height;
6 | const deviceWidth = Dimensions.get("window").width;
7 | const platform = Platform.OS;
8 | const platformStyle = undefined;
9 | const isIphoneX =
10 | platform === "ios" && deviceHeight === 812 && deviceWidth === 375;
11 |
12 | export default {
13 | platformStyle,
14 | platform,
15 |
16 | // Android
17 | androidRipple: true,
18 | androidRippleColor: "rgba(256, 256, 256, 0.3)",
19 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
20 | btnUppercaseAndroidText: true,
21 |
22 | // Badge
23 | badgeBg: "#ED1727",
24 | badgeColor: "#fff",
25 | badgePadding: platform === "ios" ? 3 : 0,
26 |
27 | // Button
28 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
29 | btnDisabledBg: "#b5b5b5",
30 | buttonPadding: 6,
31 | get btnPrimaryBg() {
32 | return this.brandPrimary;
33 | },
34 | get btnPrimaryColor() {
35 | return this.inverseTextColor;
36 | },
37 | get btnInfoBg() {
38 | return this.brandInfo;
39 | },
40 | get btnInfoColor() {
41 | return this.inverseTextColor;
42 | },
43 | get btnSuccessBg() {
44 | return this.brandSuccess;
45 | },
46 | get btnSuccessColor() {
47 | return this.inverseTextColor;
48 | },
49 | get btnDangerBg() {
50 | return this.brandDanger;
51 | },
52 | get btnDangerColor() {
53 | return this.inverseTextColor;
54 | },
55 | get btnWarningBg() {
56 | return this.brandWarning;
57 | },
58 | get btnWarningColor() {
59 | return this.inverseTextColor;
60 | },
61 | get btnTextSize() {
62 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
63 | },
64 | get btnTextSizeLarge() {
65 | return this.fontSizeBase * 1.5;
66 | },
67 | get btnTextSizeSmall() {
68 | return this.fontSizeBase * 0.8;
69 | },
70 | get borderRadiusLarge() {
71 | return this.fontSizeBase * 3.8;
72 | },
73 | get iconSizeLarge() {
74 | return this.iconFontSize * 1.5;
75 | },
76 | get iconSizeSmall() {
77 | return this.iconFontSize * 0.6;
78 | },
79 |
80 | // Card
81 | cardDefaultBg: "#fff",
82 | cardBorderColor: "#333",
83 |
84 | // CheckBox
85 | CheckboxRadius: platform === "ios" ? 13 : 0,
86 | CheckboxBorderWidth: platform === "ios" ? 1 : 2,
87 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
88 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
89 | CheckboxIconSize: platform === "ios" ? 21 : 14,
90 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
91 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
92 | DefaultFontSize: 17,
93 | checkboxBgColor: "#039BE5",
94 | checkboxSize: 20,
95 | checkboxTickColor: "#fff",
96 |
97 | // Color
98 | brandPrimary: "#007aff",
99 | brandInfo: "#62B1F6",
100 | brandSuccess: "#5cb85c",
101 | brandDanger: "#d9534f",
102 | brandWarning: "#f0ad4e",
103 | brandDark: "#000",
104 | brandLight: "#f4f4f4",
105 |
106 | // Font
107 | fontFamily: platform === "ios" ? "System" : "Roboto",
108 | fontSizeBase: 15,
109 | get fontSizeH1() {
110 | return this.fontSizeBase * 1.8;
111 | },
112 | get fontSizeH2() {
113 | return this.fontSizeBase * 1.6;
114 | },
115 | get fontSizeH3() {
116 | return this.fontSizeBase * 1.4;
117 | },
118 |
119 | // Footer
120 | footerHeight: isIphoneX ? 89 : 55,
121 | footerDefaultBg: "#fff",
122 | footerPaddingBottom: isIphoneX ? 34 : 0,
123 |
124 | // FooterTab
125 | tabBarTextColor: "#8d9fa8",
126 | tabBarTextSize: platform === "ios" ? 14 : 11,
127 | activeTab: "#fff",
128 | sTabBarActiveTextColor: "#007aff",
129 | tabBarActiveTextColor: "#07aeff",
130 | tabActiveBgColor: "#fff",
131 |
132 | // Header
133 | toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
134 | toolbarDefaultBg: "#fff",
135 | toolbarHeight: platform === "ios" ? (isIphoneX ? 88 : 64) : 56,
136 | toolbarSearchIconSize: platform === "ios" ? 20 : 23,
137 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
138 | searchBarHeight: platform === "ios" ? 30 : 40,
139 | searchBarInputHeight: platform === "ios" ? 30 : 50,
140 | toolbarBtnTextColor: "#000",
141 | toolbarDefaultBorder: "#a7a6ab",
142 | iosStatusbar: "dark-content",
143 | get statusBarColor() {
144 | return color(this.toolbarDefaultBg)
145 | .darken(0.2)
146 | .hex();
147 | },
148 | get darkenHeader() {
149 | return color(this.tabBgColor)
150 | .darken(0.03)
151 | .hex();
152 | },
153 |
154 | // Icon
155 | iconFamily: "Ionicons",
156 | iconFontSize: platform === "ios" ? 30 : 28,
157 | iconHeaderSize: platform === "ios" ? 33 : 24,
158 |
159 | // InputGroup
160 | inputFontSize: 17,
161 | inputBorderColor: "#D9D5DC",
162 | inputSuccessBorderColor: "#2b8339",
163 | inputErrorBorderColor: "#ed2f2f",
164 | inputHeightBase: 50,
165 | get inputColor() {
166 | return this.textColor;
167 | },
168 | get inputColorPlaceholder() {
169 | return "#575757";
170 | },
171 |
172 | // Line Height
173 | btnLineHeight: 19,
174 | lineHeightH1: 32,
175 | lineHeightH2: 27,
176 | lineHeightH3: 22,
177 | lineHeight: platform === "ios" ? 20 : 24,
178 |
179 | // List
180 | listBg: "transparent",
181 | listBorderColor: "#c9c9c9",
182 | listDividerBg: "#f4f4f4",
183 | listBtnUnderlayColor: "#DDD",
184 | listItemPadding: platform === "ios" ? 10 : 12,
185 | listNoteColor: "#808080",
186 | listNoteSize: 13,
187 |
188 | // Progress Bar
189 | defaultProgressColor: "#E4202D",
190 | inverseProgressColor: "#1A191B",
191 |
192 | // Radio Button
193 | radioBtnSize: platform === "ios" ? 25 : 23,
194 | radioSelectedColorAndroid: "#3F51B5",
195 | radioBtnLineHeight: platform === "ios" ? 29 : 24,
196 | radioColor: this.brandPrimary,
197 |
198 | // Segment
199 | segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
200 | segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
201 | segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
202 | segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
203 | segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
204 | segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
205 |
206 | // Spinner
207 | defaultSpinnerColor: "#45D56E",
208 | inverseSpinnerColor: "#1A191B",
209 |
210 | // Tab
211 | tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
212 | topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
213 | topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
214 | topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
215 | topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
216 |
217 | // Tabs
218 | tabBgColor: "#F8F8F8",
219 | tabFontSize: 15,
220 |
221 | // Text
222 | textColor: "#000",
223 | inverseTextColor: "#fff",
224 | noteFontSize: 14,
225 | get defaultTextColor() {
226 | return this.textColor;
227 | },
228 |
229 | // Title
230 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
231 | titleFontSize: platform === "ios" ? 17 : 19,
232 | subTitleFontSize: platform === "ios" ? 12 : 14,
233 | subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
234 | titleFontColor: platform === "ios" ? "#000" : "#FFF",
235 |
236 | // Other
237 | // borderRadiusBase: platform === "ios" ? 5 : 2,
238 | borderRadiusBase: 0,
239 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
240 | contentPadding: 10,
241 | dropdownLinkColor: "#414142",
242 | inputLineHeight: 24,
243 | deviceWidth,
244 | deviceHeight,
245 | isIphoneX,
246 | inputGroupRoundedBorderRadius: 30
247 | };
248 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "node_modules/expo/AppEntry.js",
3 | "private": true,
4 | "dependencies": {
5 | "@malik.aliyev.94/react-native-is-iphonex": "^1.0.0",
6 | "expo": "^25.0.0",
7 | "mobx": "^3.6.1",
8 | "mobx-react": "^4.4.2",
9 | "native-base": "^2.3.9",
10 | "react": "16.2.0",
11 | "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
12 | "react-native-navbar": "^2.1.0",
13 | "react-native-snap-carousel": "^3.6.0",
14 | "react-native-swiper": "^1.5.13",
15 | "react-native-vector-icons": "^4.5.0",
16 | "react-navigation": "^1.1.2"
17 | },
18 | "name": "React Native Starter",
19 | "version": "1.0.0",
20 | "description": "Hello Expo!",
21 | "author": "Malik Aliyev"
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Alphabet.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
3 | import { LinearGradient } from 'expo';
4 | import { withNavigation } from 'react-navigation';
5 |
6 | //https://uigradients.com/#DIMIGO
7 | const letters = [
8 | ['A', '#2b5876', '#4e4376'],
9 | ['B', '#e65c00', '#F9D423'],
10 | ['C', '#2193b0', '#6dd5ed'],
11 | ['D', '#cc2b5e', '#753a88'],
12 | ['E', '#ec008c', '#fc6767'],
13 | ['F', '#1488CC', '#2B32B2'],
14 | ['G', '#00467F', '#A5CC82'],
15 | ['H', '#636363', '#a2ab58'],
16 | ['I', '#ad5389', '#3c1053'],
17 | ['J', '#a8c0ff', '#3f2b96'],
18 | ['K', '#2b5876', '#4e4376'],
19 | ['L', '#e65c00', '#F9D423'],
20 | ['M', '#2193b0', '#6dd5ed'],
21 | ['N', '#cc2b5e', '#753a88'],
22 | ['O', '#ec008c', '#fc6767'],
23 | ['P', '#1488CC', '#2B32B2'],
24 | ['Q', '#00467F', '#A5CC82'],
25 | ['R', '#636363', '#a2ab58'],
26 | ['S', '#ad5389', '#3c1053'],
27 | ['T', '#a8c0ff', '#3f2b96'],
28 | ['U', '#2b5876', '#4e4376'],
29 | ['V', '#e65c00', '#F9D423'],
30 | ['W', '#2193b0', '#6dd5ed'],
31 | ['X', '#cc2b5e', '#753a88'],
32 | ['Y', '#ad5389', '#3c1053'],
33 | ['Z', '#a8c0ff', '#3f2b96'],
34 | ]
35 |
36 | const Alphabet = (props) => (
37 |
38 | {letters.map((item, index) => (
39 | props.navigation.navigate("Detail", {letter: item[0]}) }>
41 |
56 |
57 | {item[0]}
58 |
59 |
60 |
61 | ))}
62 |
63 | );
64 |
65 |
66 | export default withNavigation(Alphabet);
67 |
--------------------------------------------------------------------------------
/src/components/Carousel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Carousel from 'react-native-snap-carousel';
3 | import { Dimensions, View, Text, Image } from 'react-native';
4 |
5 | const deviceWidth = Dimensions.get("window").width;
6 | const entries = [
7 | {
8 | title: 'Title #1',
9 | subtitle: 'Description #1',
10 | illustration: 'https://i.imgur.com/UYiroysl.jpg'
11 | },
12 | {
13 | title: 'Title #2',
14 | subtitle: 'Description #2',
15 | illustration: 'https://i.imgur.com/UPrs1EWl.jpg'
16 | },
17 | {
18 | title: 'Title #3',
19 | subtitle: 'Description #3',
20 | illustration: 'https://i.imgur.com/MABUbpDl.jpg'
21 | },
22 | {
23 | title: 'Title #4',
24 | subtitle: 'Description #4',
25 | illustration: 'https://i.imgur.com/KZsmUi2l.jpg'
26 | },
27 | ];
28 |
29 | const renderItem = ({item, index}) => {
30 | return (
31 |
32 |
33 |
37 |
38 |
39 | { item.title }
40 | { item.subtitle }
41 |
42 |
43 | );
44 | }
45 |
46 | const CarouselSlider = () => (
47 | { this._carousel = c; }}
49 | data={entries}
50 | renderItem={renderItem}
51 | sliderWidth={deviceWidth}
52 | itemWidth={256}
53 | layout={'default'}
54 | firstItem={1}
55 | inactiveSlideScale={1}
56 | />
57 | );
58 |
59 | export default CarouselSlider;
60 |
--------------------------------------------------------------------------------
/src/components/Dashboard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, ImageBackground, Text, StyleSheet } from 'react-native';
3 | import AppStore from '../stores/AppStore.js';
4 | import {observer} from 'mobx-react';
5 |
6 | @observer
7 | export default class Dashboard extends React.Component {
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 | Users
15 | {AppStore.data.users}
16 |
17 |
18 | Posts
19 | {AppStore.data.posts}
20 |
21 |
22 |
23 |
24 | Comments
25 | {AppStore.data.comments}
26 |
27 |
28 |
29 | );
30 | }
31 |
32 | }
33 |
34 |
35 | const styles = StyleSheet.create({
36 | customCard: {
37 | backgroundColor: '#fff',
38 | padding: 10,
39 | margin: 10,
40 | borderRadius: 10,
41 | shadowOffset:{ width: 0, height: 10 },
42 | shadowColor: '#AAA',
43 | shadowOpacity: .3,
44 | shadowRadius: 5,
45 | flex: 1,
46 | flexDirection: 'column',
47 | justifyContent: 'space-between',
48 | backgroundColor: '#fff',
49 | },
50 | customHeader: {
51 | color: '#283e67',
52 | fontWeight: 'bold',
53 | fontSize: 20,
54 | marginBottom: 20
55 | },
56 | });
57 |
--------------------------------------------------------------------------------
/src/components/Modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, Modal, StyleSheet, TouchableOpacity } from 'react-native';
3 | import { Button, Text, Icon } from 'native-base';
4 | import Swiper from 'react-native-swiper';
5 | import AppStore from '../stores/AppStore.js';
6 | import {observer} from 'mobx-react';
7 |
8 | @observer
9 | export default class ModalWindow extends React.Component {
10 |
11 | setModalVisible(visible) {
12 | AppStore.modalVisible = visible;
13 | }
14 |
15 | render() {
16 | return (
17 |
18 | {
23 | alert('Modal has been closed.');
24 | }}>
25 | {
28 | this.setModalVisible(!AppStore.modalVisible);
29 | }}>
30 |
31 |
32 |
33 |
34 | Hello Swiper
35 |
36 |
37 | Beautiful
38 |
39 |
40 | And simple
41 |
42 |
43 |
44 |
45 | );
46 | }
47 | }
48 |
49 | const styles = StyleSheet.create({
50 | slide1: {
51 | flex: 1,
52 | justifyContent: 'center',
53 | alignItems: 'center',
54 | backgroundColor: '#9DD6EB',
55 | },
56 | slide2: {
57 | flex: 1,
58 | justifyContent: 'center',
59 | alignItems: 'center',
60 | backgroundColor: '#97CAE5',
61 | },
62 | slide3: {
63 | flex: 1,
64 | justifyContent: 'center',
65 | alignItems: 'center',
66 | backgroundColor: '#92BBD9',
67 | },
68 | text: {
69 | fontSize: 30
70 | }
71 | });
72 |
--------------------------------------------------------------------------------
/src/components/PageTitle.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text, StyleSheet } from 'react-native';
3 |
4 | const Title = (props) => (
5 | {props.title}
6 | );
7 |
8 | const styles = StyleSheet.create({
9 | title: {
10 | backgroundColor: '#f2f5f7',
11 | paddingLeft: 20,
12 | paddingTop: 20,
13 | fontSize: 40,
14 | fontWeight: 'bold',
15 | color: '#687793'
16 | }
17 | });
18 |
19 | export default Title;
20 |
--------------------------------------------------------------------------------
/src/components/StatusBarView.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Platform, Dimensions, PixelRatio, View } from "react-native";
3 |
4 | const deviceHeight = Dimensions.get("window").height;
5 | const deviceWidth = Dimensions.get("window").width;
6 | const platform = Platform.OS;
7 | const platformStyle = undefined;
8 | const isIphoneX =
9 | platform === "ios" && deviceHeight === 812 && deviceWidth === 375;
10 |
11 | export const StatusBarView = (props) => (
12 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/screens/DetailScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text, View } from 'native-base';
3 |
4 | const DetailScreen = (props) => (
5 |
6 | This is letter
7 | { props.navigation.state.params.letter }
8 |
9 | );
10 |
11 | export default DetailScreen;
12 |
--------------------------------------------------------------------------------
/src/screens/HomeScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Container, Content } from 'native-base';
3 |
4 | import { StatusBarView } from '../components/StatusBarView';
5 | import PageTitle from '../components/PageTitle';
6 | import ModalWindow from '../components/Modal';
7 | import Carousel from '../components/Carousel';
8 | import Alphabet from '../components/Alphabet'
9 | import Dashboard from '../components/Dashboard'
10 |
11 | export default class HomeScreen extends React.Component {
12 | // static navigationOptions = {
13 | // header: null
14 | // };
15 | render() {
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/screens/IntroScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ActivityIndicator, Image } from 'react-native';
3 | import { Button, Text, View } from 'native-base';
4 |
5 | const BackBtn = (props) => (
6 |
7 | tabBarNavigation is hidden in this screen.
8 |
13 |
14 | );
15 |
16 | export default class IntroScreen extends React.Component {
17 |
18 | constructor(props){
19 | super(props);
20 | this.state ={ isLoading: true}
21 | }
22 |
23 | componentDidMount(){
24 | return fetch('https://api.github.com/users/malik-aliyev-94')
25 | .then((response) => response.json())
26 | .then((responseJson) => {
27 |
28 | this.setState({
29 | isLoading: false,
30 | data: responseJson,
31 | }, function(){
32 |
33 | });
34 |
35 | })
36 | .catch((error) =>{
37 | console.error(error);
38 | });
39 | }
40 |
41 | render() {
42 | if(this.state.isLoading){
43 | return(
44 |
45 |
46 |
47 |
48 | )
49 | }
50 |
51 | return (
52 |
53 |
54 |
57 |
58 | {this.state.data.login}
59 |
60 |
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/screens/TestScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ImageBackground } from 'react-native';
3 | import { Container, Content, Button, Icon, Text, View } from 'native-base';
4 |
5 | import { StatusBarView } from '../components/StatusBarView';
6 | import PageTitle from '../components/PageTitle';
7 |
8 | export default class TestScreen extends React.Component {
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
20 | This is a text over an image
21 |
22 |
23 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
24 |
25 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/stores/AppStore.js:
--------------------------------------------------------------------------------
1 | import {observable} from 'mobx';
2 | class AppStore {
3 | @observable data = {
4 | 'users': 12,
5 | 'posts': 23,
6 | 'comments': 98,
7 | };
8 |
9 | @observable modalVisible = false;
10 |
11 | constructor() {
12 | super.constructor();
13 | setInterval(()=>{
14 | this.increment();
15 | }, 1000);
16 | }
17 |
18 | increment() {
19 | if (this.data.users < 1000) this.data.users += 1;
20 | if (this.data.posts < 1000) this.data.posts += 1;
21 | if (this.data.comments < 1000) this.data.comments += 1;
22 | }
23 |
24 | showModal() {
25 | this.modalVisible = true;
26 | }
27 |
28 | hideModal() {
29 | this.modalVisible = false;
30 | }
31 |
32 | }
33 | export default new AppStore();
34 |
--------------------------------------------------------------------------------