├── .DS_Store ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .vscode └── launch.json ├── .watchmanconfig ├── App.js ├── App.test.js ├── README.md ├── TODO ├── app.json ├── config.js ├── feathersServer ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── config │ ├── default.json │ └── production.json ├── new ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── app.hooks.js │ ├── app.js │ ├── authentication.js │ ├── hooks │ │ └── logger.js │ ├── index.js │ ├── middleware │ │ └── index.js │ ├── models │ │ └── users.model.js │ ├── mongodb.js │ └── services │ │ ├── index.js │ │ └── users │ │ ├── users.filters.js │ │ ├── users.hooks.js │ │ └── users.service.js ├── test │ ├── app.test.js │ └── services │ │ ├── user.test.js │ │ └── users.test.js └── yarn.lock ├── jsconfig.json ├── 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 ├── .DS_Store ├── app.js ├── boot │ ├── feathersApp.js │ ├── index.js │ ├── initAnalytics.js │ ├── initChat.js │ ├── initNotifications.js │ ├── mobx.js │ └── react.js ├── container │ ├── home.js │ ├── login.js │ ├── routes.js │ └── signup.js ├── models │ ├── list.js │ └── user.js └── stores │ ├── domain │ ├── list.js │ └── user.js │ ├── route.js │ └── view │ ├── home.js │ ├── login.js │ └── signup.js ├── storybook ├── addons.js ├── index.js └── stories │ ├── components │ └── Button │ │ ├── index.android.js │ │ └── index.ios.js │ ├── index.js │ └── screens │ ├── home.js │ ├── login.js │ └── signup.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Haakh/react-native-mobx-feathers/11af9b96fca42665f0589ee7c7b3235845e3ec10/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo", "flow"], 3 | "env": { 4 | "development": { 5 | "plugins": [ 6 | "transform-react-jsx-source", 7 | "transform-decorators-legacy", 8 | [ 9 | "module-resolver", 10 | { 11 | "root": ["./"], 12 | "alias": { 13 | "test": "./test", 14 | "underscore": "lodash", 15 | "app": "./src", 16 | "components": "./storybook/stories/components", 17 | "screens": "./storybook/stories/screens" 18 | }, 19 | "extensions": [".js"] 20 | } 21 | ] 22 | ] 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf 10 | # editorconfig-tools is unable to ignore longs strings or urls 11 | max_line_length = null -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "plugins": ["react-native"], 5 | "rules": { 6 | "no-underscore-dangle": "off", 7 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 8 | "react/forbid-prop-types": "off", 9 | "no-alert": "off", 10 | "no-console": "off", 11 | "no-unused-vars": "off", 12 | "react/prefer-stateless-function": "off", 13 | "class-methods-use-this": "off", 14 | "jsx-a11y/href-no-hash": "off" 15 | }, 16 | "settings": { 17 | "import/resolver": { 18 | "babel-module": {}, 19 | "node": { 20 | "extensions": [".js", ".android.js", ".ios.js"] 21 | } 22 | } 23 | }, 24 | "globals": { 25 | "fetch": true, 26 | "navigator": true, 27 | "window": true, 28 | "alert": true, 29 | "console": true, 30 | "unused-vars": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | ; Additional create-react-native-app ignores 18 | 19 | ; Ignore duplicate module providers 20 | .*/node_modules/fbemitter/lib/* 21 | 22 | ; Ignore misbehaving dev-dependencies 23 | .*/node_modules/xdl/build/* 24 | .*/node_modules/reqwest/tests/* 25 | 26 | ; Ignore missing expo-sdk dependencies (temporarily) 27 | ; https://github.com/expo/expo/issues/162 28 | .*/node_modules/expo/src/* 29 | 30 | ; Ignore react-native-fbads dependency of the expo sdk 31 | .*/node_modules/react-native-fbads/* 32 | 33 | [include] 34 | 35 | [libs] 36 | node_modules/react-native/Libraries/react-native/react-native-interface.js 37 | node_modules/react-native/flow 38 | flow/ 39 | 40 | [options] 41 | module.system=haste 42 | 43 | emoji=true 44 | 45 | experimental.strict_type_args=true 46 | 47 | munge_underscores=true 48 | 49 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 50 | 51 | suppress_type=$FlowIssue 52 | suppress_type=$FlowFixMe 53 | suppress_type=$FixMe 54 | 55 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) 56 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ 57 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 58 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 59 | 60 | unsafe.enable_getters_and_setters=true 61 | 62 | [version] 63 | ^0.45.0 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Debug Android", 6 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 7 | "type": "reactnative", 8 | "request": "launch", 9 | "platform": "android", 10 | "sourceMaps": true, 11 | "outDir": "${workspaceRoot}/.vscode/.react" 12 | }, 13 | { 14 | "name": "Debug iOS", 15 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 16 | "type": "reactnative", 17 | "request": "launch", 18 | "platform": "ios", 19 | "target": "iPhone 5s", 20 | "sourceMaps": true, 21 | "outDir": "${workspaceRoot}/.vscode/.react" 22 | }, 23 | { 24 | "name": "Attach to packager", 25 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 26 | "type": "reactnative", 27 | "request": "attach", 28 | "sourceMaps": true, 29 | "outDir": "${workspaceRoot}/.vscode/.react" 30 | }, 31 | { 32 | "name": "Debug in Exponent", 33 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 34 | "type": "reactnative", 35 | "request": "launch", 36 | "platform": "exponent", 37 | "sourceMaps": true, 38 | "outDir": "${workspaceRoot}/.vscode/.react" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | export default from './src/app'; 2 | 3 | // when working on UI: 4 | 5 | // export default from './storybook'; 6 | -------------------------------------------------------------------------------- /App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON(); 8 | expect(rendered).toBeTruthy(); 9 | }); 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). 2 | 3 | Below you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md). 4 | 5 | ## Table of Contents 6 | 7 | * [Updating to New Releases](#updating-to-new-releases) 8 | * [Available Scripts](#available-scripts) 9 | * [npm start](#npm-start) 10 | * [npm test](#npm-test) 11 | * [npm run ios](#npm-run-ios) 12 | * [npm run android](#npm-run-android) 13 | * [npm run eject](#npm-run-eject) 14 | * [Writing and Running Tests](#writing-and-running-tests) 15 | * [Environment Variables](#environment-variables) 16 | * [Configuring Packager IP Address](#configuring-packager-ip-address) 17 | * [Adding Flow](#adding-flow) 18 | * [Customizing App Display Name and Icon](#customizing-app-display-name-and-icon) 19 | * [Sharing and Deployment](#sharing-and-deployment) 20 | * [Publishing to Expo's React Native Community](#publishing-to-expos-react-native-community) 21 | * [Building an Expo "standalone" app](#building-an-expo-standalone-app) 22 | * [Ejecting from Create React Native App](#ejecting-from-create-react-native-app) 23 | * [Build Dependencies (Xcode & Android Studio)](#build-dependencies-xcode-android-studio) 24 | * [Should I Use ExpoKit?](#should-i-use-expokit) 25 | * [Troubleshooting](#troubleshooting) 26 | * [Networking](#networking) 27 | * [iOS Simulator won't open](#ios-simulator-wont-open) 28 | * [QR Code does not scan](#qr-code-does-not-scan) 29 | 30 | ## Updating to New Releases 31 | 32 | You should only need to update the global installation of `create-react-native-app` very rarely, ideally never. 33 | 34 | Updating the `react-native-scripts` dependency of your app should be as simple as bumping the version number in `package.json` and reinstalling your project's dependencies. 35 | 36 | Upgrading to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions, and setting the correct `sdkVersion` in `app.json`. See the [versioning guide](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) for up-to-date information about package version compatibility. 37 | 38 | ## Available Scripts 39 | 40 | If Yarn was installed when the project was initialized, then dependencies will have been installed via Yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for Yarn and NPM at the time of this writing. 41 | 42 | ### `npm start` 43 | 44 | Runs your app in development mode. 45 | 46 | Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. 47 | 48 | Sometimes you may need to reset or clear the React Native packager's cache. To do so, you can pass the `--reset-cache` flag to the start script: 49 | 50 | ``` 51 | npm start -- --reset-cache 52 | # or 53 | yarn start -- --reset-cache 54 | ``` 55 | 56 | #### `npm test` 57 | 58 | Runs the [jest](https://github.com/facebook/jest) test runner on your tests. 59 | 60 | #### `npm run ios` 61 | 62 | Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. 63 | 64 | #### `npm run android` 65 | 66 | Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). We also recommend installing Genymotion as your Android emulator. Once you've finished setting up the native build environment, there are two options for making the right copy of `adb` available to Create React Native App: 67 | 68 | ##### Using Android Studio's `adb` 69 | 70 | 1. Make sure that you can run adb from your terminal. 71 | 2. Open Genymotion and navigate to `Settings -> ADB`. Select “Use custom Android SDK tools” and update with your [Android SDK directory](https://stackoverflow.com/questions/25176594/android-sdk-location). 72 | 73 | ##### Using Genymotion's `adb` 74 | 75 | 1. Find Genymotion’s copy of adb. On macOS for example, this is normally `/Applications/Genymotion.app/Contents/MacOS/tools/`. 76 | 2. Add the Genymotion tools directory to your path (instructions for [Mac](http://osxdaily.com/2014/08/14/add-new-path-to-path-command-line/), [Linux](http://www.computerhope.com/issues/ch001647.htm), and [Windows](https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/)). 77 | 3. Make sure that you can run adb from your terminal. 78 | 79 | #### `npm run eject` 80 | 81 | This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project. 82 | 83 | **Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up. 84 | 85 | ## Customizing App Display Name and Icon 86 | 87 | You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key. 88 | 89 | To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string. 90 | 91 | To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency. 92 | 93 | ## Writing and Running Tests 94 | 95 | This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/tree/master/react-native-scripts/template/__tests__) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/tutorial-react-native.html). 96 | 97 | ## Environment Variables 98 | 99 | You can configure some of Create React Native App's behavior using environment variables. 100 | 101 | ### Configuring Packager IP Address 102 | 103 | When starting your project, you'll see something like this for your project URL: 104 | 105 | ``` 106 | exp://192.168.0.2:19000 107 | ``` 108 | 109 | The "manifest" at that URL tells the Expo app how to retrieve and load your app's JavaScript bundle, so even if you load it in the app via a URL like `exp://localhost:19000`, the Expo client app will still try to retrieve your app at the IP address that the start script provides. 110 | 111 | In some cases, this is less than ideal. This might be the case if you need to run your project inside of a virtual machine and you have to access the packager via a different IP address than the one which prints by default. In order to override the IP address or hostname that is detected by Create React Native App, you can specify your own hostname via the `REACT_NATIVE_PACKAGER_HOSTNAME` environment variable: 112 | 113 | Mac and Linux: 114 | 115 | ``` 116 | REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start 117 | ``` 118 | 119 | Windows: 120 | ``` 121 | set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' 122 | npm start 123 | ``` 124 | 125 | The above example would cause the development server to listen on `exp://my-custom-ip-address-or-hostname:19000`. 126 | 127 | ## Adding Flow 128 | 129 | Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept. 130 | 131 | React Native works with [Flow](http://flowtype.org/) out of the box, as long as your Flow version matches the one used in the version of React Native. 132 | 133 | To add a local dependency to the correct Flow version to a Create React Native App project, follow these steps: 134 | 135 | 1. Find the Flow `[version]` at the bottom of the included [.flowconfig](.flowconfig) 136 | 2. Run `npm install --save-dev flow-bin@x.y.z` (or `yarn add --dev flow-bin@x.y.z`), where `x.y.z` is the .flowconfig version number. 137 | 3. Add `"flow": "flow"` to the `scripts` section of your `package.json`. 138 | 4. Add `// @flow` to any files you want to type check (for example, to `App.js`). 139 | 140 | Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. 141 | You can optionally use a [plugin for your IDE or editor](https://flow.org/en/docs/editors/) for a better integrated experience. 142 | 143 | To learn more about Flow, check out [its documentation](https://flow.org/). 144 | 145 | ## Sharing and Deployment 146 | 147 | Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service. 148 | 149 | ### Publishing to Expo's React Native Community 150 | 151 | Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account. 152 | 153 | Install the `exp` command-line tool, and run the publish command: 154 | 155 | ``` 156 | $ npm i -g exp 157 | $ exp publish 158 | ``` 159 | 160 | ### Building an Expo "standalone" app 161 | 162 | You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself. 163 | 164 | ### Ejecting from Create React Native App 165 | 166 | If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio. 167 | 168 | This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html). 169 | 170 | #### Should I Use ExpoKit? 171 | 172 | If you have made use of Expo APIs while working on your project, then those API calls will stop working if you eject to a regular React Native project. If you want to continue using those APIs, you can eject to "React Native + ExpoKit" which will still allow you to build your own native code and continue using the Expo APIs. See the [ejecting guide](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md) for more details about this option. 173 | 174 | ## Troubleshooting 175 | 176 | ### Networking 177 | 178 | If you're unable to load your app on your phone due to a network timeout or a refused connection, a good first step is to verify that your phone and computer are on the same network and that they can reach each other. Create React Native App needs access to ports 19000 and 19001 so ensure that your network and firewall settings allow access from your device to your computer on both of these ports. 179 | 180 | Try opening a web browser on your phone and opening the URL that the packager script prints, replacing `exp://` with `http://`. So, for example, if underneath the QR code in your terminal you see: 181 | 182 | ``` 183 | exp://192.168.0.1:19000 184 | ``` 185 | 186 | Try opening Safari or Chrome on your phone and loading 187 | 188 | ``` 189 | http://192.168.0.1:19000 190 | ``` 191 | 192 | and 193 | 194 | ``` 195 | http://192.168.0.1:19001 196 | ``` 197 | 198 | If this works, but you're still unable to load your app by scanning the QR code, please open an issue on the [Create React Native App repository](https://github.com/react-community/create-react-native-app) with details about these steps and any other error messages you may have received. 199 | 200 | If you're not able to load the `http` URL in your phone's web browser, try using the tethering/mobile hotspot feature on your phone (beware of data usage, though), connecting your computer to that WiFi network, and restarting the packager. 201 | 202 | ### iOS Simulator won't open 203 | 204 | If you're on a Mac, there are a few errors that users sometimes see when attempting to `npm run ios`: 205 | 206 | * "non-zero exit code: 107" 207 | * "You may need to install Xcode" but it is already installed 208 | * and others 209 | 210 | There are a few steps you may want to take to troubleshoot these kinds of errors: 211 | 212 | 1. Make sure Xcode is installed and open it to accept the license agreement if it prompts you. You can install it from the Mac App Store. 213 | 2. Open Xcode's Preferences, the Locations tab, and make sure that the `Command Line Tools` menu option is set to something. Sometimes when the CLI tools are first installed by Homebrew this option is left blank, which can prevent Apple utilities from finding the simulator. Make sure to re-run `npm/yarn run ios` after doing so. 214 | 3. If that doesn't work, open the Simulator, and under the app menu select `Reset Contents and Settings...`. After that has finished, quit the Simulator, and re-run `npm/yarn run ios`. 215 | 216 | ### QR Code does not scan 217 | 218 | If you're not able to scan the QR code, make sure your phone's camera is focusing correctly, and also make sure that the contrast on the two colors in your terminal is high enough. For example, WebStorm's default themes may [not have enough contrast](https://github.com/react-community/create-react-native-app/issues/49) for terminal QR codes to be scannable with the system barcode scanners that the Expo app uses. 219 | 220 | If this causes problems for you, you may want to try changing your terminal's color theme to have more contrast, or running Create React Native App from a different terminal. You can also manually enter the URL printed by the packager script in the Expo app's search bar to load it manually. 221 | -------------------------------------------------------------------------------- /TODO: -------------------------------------------------------------------------------- 1 | 1. feathersApp folder containing backend code . including es6 features common Hooks. and authentication. 2 | 2. mobx structuring of the app. 3 | 3. app structure with oneSignal, app listeners and all websockets. in the boot folder. 4 | 4. stores. 5 | 5. models. 6 | 6. services. feathers using async await. 7 | 8 | Feathers 9 | 1. Basic services users, user data. 10 | 2. authentication 11 | 12 | RN 13 | 1. login page. async await. 14 | 2. user data / whatever that will be. 15 | 3. flatlist to show rerendering issue of mobx. 16 | 4. React navigation also. DONE 17 | 18 | mobx 19 | 1. domain and view stores. 20 | 2. async calls in actions mobx. 21 | 3. service folder for feathers backend calls and returns async data. 22 | 4. mobx cache 23 | 24 | Boot 25 | 1. mobx store initialize. 26 | 2. rn app initialize. 27 | 3. 3rd party function calls. 28 | 4. all the app listeners that change the stores. 29 | 30 | User Data 31 | • https://randomuser.me/ -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "20.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | Port: '3030', 3 | amplitudeApikey: '', 4 | pushNotificationToken: '', 5 | }; 6 | -------------------------------------------------------------------------------- /feathersServer/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /feathersServer/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "es6": true, 4 | "node": true, 5 | "mocha": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "rules": { 9 | "indent": [ 10 | "error", 11 | 2 12 | ], 13 | "linebreak-style": [ 14 | "error", 15 | "unix" 16 | ], 17 | "quotes": [ 18 | "error", 19 | "single" 20 | ], 21 | "semi": [ 22 | "error", 23 | "always" 24 | ] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /feathersServer/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | 30 | # IDEs and editors (shamelessly copied from @angular/cli's .gitignore) 31 | /.idea 32 | .project 33 | .classpath 34 | .c9/ 35 | *.launch 36 | .settings/ 37 | *.sublime-workspace 38 | 39 | # IDE - VSCode 40 | .vscode/* 41 | !.vscode/settings.json 42 | !.vscode/tasks.json 43 | !.vscode/launch.json 44 | !.vscode/extensions.json 45 | 46 | ### Linux ### 47 | *~ 48 | 49 | # temporary files which can be created if a process still has a handle open of a deleted file 50 | .fuse_hidden* 51 | 52 | # KDE directory preferences 53 | .directory 54 | 55 | # Linux trash folder which might appear on any partition or disk 56 | .Trash-* 57 | 58 | # .nfs files are created when an open file is removed but is still being accessed 59 | .nfs* 60 | 61 | ### OSX ### 62 | *.DS_Store 63 | .AppleDouble 64 | .LSOverride 65 | 66 | # Icon must end with two \r 67 | Icon 68 | 69 | 70 | # Thumbnails 71 | ._* 72 | 73 | # Files that might appear in the root of a volume 74 | .DocumentRevisions-V100 75 | .fseventsd 76 | .Spotlight-V100 77 | .TemporaryItems 78 | .Trashes 79 | .VolumeIcon.icns 80 | .com.apple.timemachine.donotpresent 81 | 82 | # Directories potentially created on remote AFP share 83 | .AppleDB 84 | .AppleDesktop 85 | Network Trash Folder 86 | Temporary Items 87 | .apdisk 88 | 89 | ### Windows ### 90 | # Windows thumbnail cache files 91 | Thumbs.db 92 | ehthumbs.db 93 | ehthumbs_vista.db 94 | 95 | # Folder config file 96 | Desktop.ini 97 | 98 | # Recycle Bin used on file shares 99 | $RECYCLE.BIN/ 100 | 101 | # Windows Installer files 102 | *.cab 103 | *.msi 104 | *.msm 105 | *.msp 106 | 107 | # Windows shortcuts 108 | *.lnk 109 | 110 | # Others 111 | lib/ 112 | data/ 113 | -------------------------------------------------------------------------------- /feathersServer/.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | 30 | data/ 31 | -------------------------------------------------------------------------------- /feathersServer/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Feathers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /feathersServer/README.md: -------------------------------------------------------------------------------- 1 | # react-native-mobx-feathers 2 | 3 | > Basic app using mobx + feathers 4 | 5 | ## About 6 | 7 | This project uses [Feathers](http://feathersjs.com). An open source web framework for building modern real-time applications. 8 | 9 | ## Getting Started 10 | 11 | Getting up and running is as easy as 1, 2, 3. 12 | 13 | 1. Make sure you have [NodeJS](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed. 14 | 2. Install your dependencies 15 | 16 | ``` 17 | cd path/to/react-native-mobx-feathers; npm install 18 | ``` 19 | 20 | 3. Start your app 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | ## Testing 27 | 28 | Simply run `npm test` and all your tests in the `test/` directory will be run. 29 | 30 | ## Scaffolding 31 | 32 | Feathers has a powerful command line interface. Here are a few things it can do: 33 | 34 | ``` 35 | $ npm install -g feathers-cli # Install Feathers CLI 36 | 37 | $ feathers generate service # Generate a new Service 38 | $ feathers generate hook # Generate a new Hook 39 | $ feathers generate model # Generate a new Model 40 | $ feathers help # Show all commands 41 | ``` 42 | 43 | ## Help 44 | 45 | For more information on all the things you can do with Feathers visit [docs.feathersjs.com](http://docs.feathersjs.com). 46 | 47 | ## Changelog 48 | 49 | __0.1.0__ 50 | 51 | - Initial release 52 | 53 | ## License 54 | 55 | Copyright (c) 2016 56 | 57 | Licensed under the [MIT license](LICENSE). 58 | -------------------------------------------------------------------------------- /feathersServer/config/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "host": "localhost", 3 | "port": 3030, 4 | "public": "../public/", 5 | "paginate": { 6 | "default": 10, 7 | "max": 50 8 | }, 9 | "mongodb": "mongodb://localhost:27017/react_native_mobx_feathers", 10 | "authentication": { 11 | "secret": "3f5e775037b09e29a44ec53638c164a52e7891d9ac486bc6ba07c3b0ae903f59abb72ce2a7c4dbbdc3714fdd175841f8df5fbf1ff15c14b199691dfbc96fc5b3613ba14fd85127b515caa0d7ab08350fd5fe2c7945b9dbc4a85e642460056e096b86047596f993fd0c43bace20db6b1ab9ca999c0288936007643a3bfaf0cb2a6f5e34847cee69dfd5d98508518efc3bbaddf43d88cddc17abc17f4da997da7f4a7ca8fae04c801462f1a5dc2e8d69cf95fb6266b491d1b8e3626118392d9620d8826c053b8f0545dd151697c144d9f0d2584feafbb11b1491bc4587f7260e88c2a8d4fae4f1b0db27ef63fb62a2f7f5117b28d3a37be776fcbd405690d3cf86", 12 | "strategies": [ 13 | "jwt", 14 | "local" 15 | ], 16 | "path": "/authentication", 17 | "service": "users", 18 | "jwt": { 19 | "header": { 20 | "type": "access" 21 | }, 22 | "audience": "https://yourdomain.com", 23 | "subject": "anonymous", 24 | "issuer": "feathers", 25 | "algorithm": "HS256", 26 | "expiresIn": "1d" 27 | }, 28 | "local": { 29 | "entity": "user", 30 | "service": "users", 31 | "usernameField": "email", 32 | "passwordField": "password" 33 | }, 34 | "google": { 35 | "clientID": "your google client id", 36 | "clientSecret": "your google client secret", 37 | "successRedirect": "/", 38 | "scope": [ 39 | "profile openid email" 40 | ] 41 | }, 42 | "facebook": { 43 | "clientID": "your facebook client id", 44 | "clientSecret": "your facebook client secret", 45 | "successRedirect": "/", 46 | "scope": [ 47 | "public_profile", 48 | "email" 49 | ], 50 | "profileFields": [ 51 | "id", 52 | "displayName", 53 | "first_name", 54 | "last_name", 55 | "email", 56 | "gender", 57 | "profileUrl", 58 | "birthday", 59 | "picture", 60 | "permissions" 61 | ] 62 | }, 63 | "github": { 64 | "clientID": "your github client id", 65 | "clientSecret": "your github client secret", 66 | "successRedirect": "/" 67 | }, 68 | "cookie": { 69 | "enabled": true, 70 | "name": "feathers-jwt", 71 | "httpOnly": false, 72 | "secure": false 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /feathersServer/config/production.json: -------------------------------------------------------------------------------- 1 | { 2 | "host": "react-native-mobx-feathers-app.feathersjs.com", 3 | "port": "PORT" 4 | } 5 | -------------------------------------------------------------------------------- /feathersServer/new: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [{ 4 | "name": "Launch", 5 | "type": "node", 6 | "request": "launch", 7 | "program": "${workspaceRoot}/src/index.js", 8 | "stopOnEntry": false, 9 | "args": [], 10 | "cwd": "${workspaceRoot}", 11 | "preLaunchTask": null, 12 | "runtimeExecutable": null, 13 | "runtimeArgs": [ 14 | "--nolazy" 15 | ], 16 | "env": { 17 | "NODE_ENV": "development" 18 | }, 19 | "externalConsole": false, 20 | "sourceMaps": false, 21 | "outDir": null 22 | }, 23 | { 24 | "name": "Attach", 25 | "type": "node", 26 | "request": "attach", 27 | "port": 5858, 28 | "address": "localhost", 29 | "restart": false, 30 | "sourceMaps": false, 31 | "outDir": null, 32 | "localRoot": "${workspaceRoot}", 33 | "remoteRoot": null 34 | }, 35 | { 36 | "name": "Attach to Process", 37 | "type": "node", 38 | "request": "attach", 39 | "processId": "${command.PickProcess}", 40 | "port": 5858, 41 | "sourceMaps": false, 42 | "outDir": null 43 | }, 44 | { 45 | "name": "Nodemon Launch Server", 46 | "type": "node", 47 | "request": "launch", 48 | "cwd": "${workspaceRoot}/", 49 | "runtimeExecutable": "nodemon", 50 | "runtimeArgs": [ 51 | "--debug=5858" 52 | ], 53 | "program": "${workspaceRoot}/src/index.js", 54 | "restart": true, 55 | "port": 5858, 56 | "console": "integratedTerminal", 57 | "internalConsoleOptions": "neverOpen" 58 | } 59 | ] 60 | } -------------------------------------------------------------------------------- /feathersServer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-mobx-feathers", 3 | "description": "Basic app using mobx + feathers", 4 | "version": "1.0.0", 5 | "homepage": "", 6 | "main": "src", 7 | "keywords": ["feathers"], 8 | "author": { 9 | "name": "", 10 | "email": "" 11 | }, 12 | "contributors": [], 13 | "bugs": {}, 14 | "directories": { 15 | "lib": "src" 16 | }, 17 | "engines": { 18 | "node": ">= 6.0.0", 19 | "yarn": ">= 0.18.0" 20 | }, 21 | "scripts": { 22 | "test": "npm run eslint && npm run mocha", 23 | "eslint": "eslint src/. test/. --config .eslintrc.json", 24 | "start": "node src/", 25 | "mocha": "mocha test/ --recursive" 26 | }, 27 | "dependencies": { 28 | "body-parser": "^1.17.2", 29 | "compression": "^1.7.0", 30 | "cors": "^2.8.4", 31 | "eslint": "^4.5.0", 32 | "feathers": "^2.1.7", 33 | "feathers-authentication": "^1.2.7", 34 | "feathers-authentication-hooks": "^0.1.4", 35 | "feathers-authentication-jwt": "^0.3.2", 36 | "feathers-authentication-local": "^0.4.4", 37 | "feathers-authentication-oauth2": "^0.2.5", 38 | "feathers-configuration": "^0.4.1", 39 | "feathers-errors": "^2.9.1", 40 | "feathers-hooks": "^2.0.2", 41 | "feathers-hooks-common": "^3.7.2", 42 | "feathers-mongoose": "^5.1.2", 43 | "feathers-rest": "^1.8.0", 44 | "feathers-socketio": "^2.0.0", 45 | "helmet": "^3.8.1", 46 | "mocha": "^3.5.0", 47 | "mongoose": "^4.11.8", 48 | "passport-facebook": "^2.1.1", 49 | "passport-github": "^1.1.0", 50 | "passport-google-oauth20": "^1.0.0", 51 | "request": "^2.81.0", 52 | "request-promise": "^4.2.1", 53 | "serve-favicon": "^2.4.3", 54 | "winston": "^2.3.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /feathersServer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Haakh/react-native-mobx-feathers/11af9b96fca42665f0589ee7c7b3235845e3ec10/feathersServer/public/favicon.ico -------------------------------------------------------------------------------- /feathersServer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Welcome to Feathers 4 | 62 | 63 | 64 |
65 | 66 |

A REST and realtime API layer for modern applications.

67 | 68 | 71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /feathersServer/src/app.hooks.js: -------------------------------------------------------------------------------- 1 | // Application hooks that run for every service 2 | const logger = require('./hooks/logger'); 3 | 4 | module.exports = { 5 | before: { 6 | all: [], 7 | find: [], 8 | get: [], 9 | create: [], 10 | update: [], 11 | patch: [], 12 | remove: [] 13 | }, 14 | 15 | after: { 16 | all: [ logger() ], 17 | find: [], 18 | get: [], 19 | create: [], 20 | update: [], 21 | patch: [], 22 | remove: [] 23 | }, 24 | 25 | error: { 26 | all: [ logger() ], 27 | find: [], 28 | get: [], 29 | create: [], 30 | update: [], 31 | patch: [], 32 | remove: [] 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /feathersServer/src/app.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const favicon = require('serve-favicon'); 3 | const compress = require('compression'); 4 | const cors = require('cors'); 5 | const helmet = require('helmet'); 6 | const bodyParser = require('body-parser'); 7 | 8 | const feathers = require('feathers'); 9 | const configuration = require('feathers-configuration'); 10 | const hooks = require('feathers-hooks'); 11 | const rest = require('feathers-rest'); 12 | const socketio = require('feathers-socketio'); 13 | 14 | const middleware = require('./middleware'); 15 | const services = require('./services'); 16 | const appHooks = require('./app.hooks'); 17 | 18 | const mongodb = require('./mongodb'); 19 | 20 | const authentication = require('./authentication'); 21 | 22 | const app = feathers(); 23 | 24 | // Load app configuration 25 | app.configure(configuration(path.join(__dirname, '..'))); 26 | // Enable CORS, security, compression, favicon and body parsing 27 | app.use(cors()); 28 | app.use(helmet()); 29 | app.use(compress()); 30 | app.use(bodyParser.json()); 31 | app.use(bodyParser.urlencoded({ extended: true })); 32 | app.use(favicon(path.join(app.get('public'), 'favicon.ico'))); 33 | // Host the public folder 34 | app.use('/', feathers.static(app.get('public'))); 35 | 36 | // Set up Plugins and providers 37 | app.configure(hooks()); 38 | app.configure(mongodb); 39 | app.configure(rest()); 40 | app.configure(socketio()); 41 | 42 | app.configure(authentication); 43 | 44 | // Set up our services (see `services/index.js`) 45 | app.configure(services); 46 | // Configure middleware (see `middleware/index.js`) - always has to be last 47 | app.configure(middleware); 48 | app.hooks(appHooks); 49 | 50 | module.exports = app; 51 | -------------------------------------------------------------------------------- /feathersServer/src/authentication.js: -------------------------------------------------------------------------------- 1 | const authentication = require('feathers-authentication'); 2 | const jwt = require('feathers-authentication-jwt'); 3 | const local = require('feathers-authentication-local'); 4 | const oauth2 = require('feathers-authentication-oauth2'); 5 | const GoogleStrategy = require('passport-google-oauth20'); 6 | const FacebookStrategy = require('passport-facebook'); 7 | const GithubStrategy = require('passport-github'); 8 | 9 | module.exports = function () { 10 | const app = this; 11 | const config = app.get('authentication'); 12 | 13 | // Set up authentication with the secret 14 | app.configure(authentication(config)); 15 | app.configure(jwt()); 16 | app.configure(local(config.local)); 17 | 18 | app.configure(oauth2(Object.assign({ 19 | name: 'google', 20 | Strategy: GoogleStrategy 21 | }, config.google))); 22 | 23 | app.configure(oauth2(Object.assign({ 24 | name: 'facebook', 25 | Strategy: FacebookStrategy 26 | }, config.facebook))); 27 | 28 | app.configure(oauth2(Object.assign({ 29 | name: 'github', 30 | Strategy: GithubStrategy 31 | }, config.github))); 32 | 33 | // The `authentication` service is used to create a JWT. 34 | // The before `create` hook registers strategies that can be used 35 | // to create a new valid JWT (e.g. local or oauth2) 36 | app.service('authentication').hooks({ 37 | before: { 38 | create: [ 39 | authentication.hooks.authenticate(config.strategies) 40 | ], 41 | remove: [ 42 | authentication.hooks.authenticate('jwt') 43 | ] 44 | } 45 | }); 46 | }; 47 | -------------------------------------------------------------------------------- /feathersServer/src/hooks/logger.js: -------------------------------------------------------------------------------- 1 | // A hook that logs service method before, after and error 2 | const logger = require('winston'); 3 | 4 | module.exports = function () { 5 | return function (hook) { 6 | let message = `${hook.type}: ${hook.path} - Method: ${hook.method}`; 7 | 8 | if (hook.type === 'error') { 9 | message += `: ${hook.error.message}`; 10 | } 11 | 12 | logger.info(message); 13 | logger.debug('hook.data', hook.data); 14 | logger.debug('hook.params', hook.params); 15 | 16 | if (hook.result) { 17 | logger.debug('hook.result', hook.result); 18 | } 19 | 20 | if (hook.error) { 21 | logger.error(hook.error); 22 | } 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /feathersServer/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | const logger = require('winston'); 3 | const app = require('./app'); 4 | const port = app.get('port'); 5 | const server = app.listen(port); 6 | 7 | process.on('unhandledRejection', (reason, p) => 8 | logger.error('Unhandled Rejection at: Promise ', p, reason) 9 | ); 10 | 11 | server.on('listening', () => 12 | logger.info(`Feathers application started on ${app.get('host')}:${port}`) 13 | ); 14 | -------------------------------------------------------------------------------- /feathersServer/src/middleware/index.js: -------------------------------------------------------------------------------- 1 | const handler = require('feathers-errors/handler'); 2 | const notFound = require('feathers-errors/not-found'); 3 | 4 | module.exports = function () { 5 | // Add your custom middleware here. Remember, that 6 | // in Express the order matters, `notFound` and 7 | // the error handler have to go last. 8 | const app = this; 9 | 10 | app.use(notFound()); 11 | app.use(handler()); 12 | }; 13 | -------------------------------------------------------------------------------- /feathersServer/src/models/users.model.js: -------------------------------------------------------------------------------- 1 | // users-model.js - A mongoose model 2 | // 3 | // See http://mongoosejs.com/docs/models.html 4 | // for more of what you can do here. 5 | module.exports = function (app) { 6 | const mongooseClient = app.get('mongooseClient'); 7 | const users = new mongooseClient.Schema({ 8 | 9 | email: {type: String, unique: true}, 10 | password: { type: String }, 11 | 12 | 13 | googleId: { type: String }, 14 | 15 | facebookId: { type: String }, 16 | 17 | githubId: { type: String }, 18 | 19 | createdAt: { type: Date, default: Date.now }, 20 | updatedAt: { type: Date, default: Date.now } 21 | }); 22 | 23 | return mongooseClient.model('users', users); 24 | }; 25 | -------------------------------------------------------------------------------- /feathersServer/src/mongodb.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | module.exports = function () { 4 | const app = this; 5 | 6 | mongoose.connect(app.get('mongodb')); 7 | mongoose.Promise = global.Promise; 8 | 9 | app.set('mongooseClient', mongoose); 10 | }; 11 | -------------------------------------------------------------------------------- /feathersServer/src/services/index.js: -------------------------------------------------------------------------------- 1 | const users = require('./users/users.service.js'); 2 | module.exports = function () { 3 | const app = this; // eslint-disable-line no-unused-vars 4 | app.configure(users); 5 | }; 6 | -------------------------------------------------------------------------------- /feathersServer/src/services/users/users.filters.js: -------------------------------------------------------------------------------- 1 | /* eslint no-console: 1 */ 2 | console.warn('You are using the default filter for the users service. For more information about event filters see https://docs.feathersjs.com/api/events.html#event-filtering'); // eslint-disable-line no-console 3 | 4 | module.exports = function (data, connection, hook) { // eslint-disable-line no-unused-vars 5 | return data; 6 | }; 7 | -------------------------------------------------------------------------------- /feathersServer/src/services/users/users.hooks.js: -------------------------------------------------------------------------------- 1 | const { authenticate } = require('feathers-authentication').hooks; 2 | const commonHooks = require('feathers-hooks-common'); 3 | const { restrictToOwner } = require('feathers-authentication-hooks'); 4 | 5 | const { hashPassword } = require('feathers-authentication-local').hooks; 6 | const restrict = [ 7 | authenticate('jwt'), 8 | restrictToOwner({ 9 | idField: '_id', 10 | ownerField: '_id' 11 | }) 12 | ]; 13 | 14 | module.exports = { 15 | before: { 16 | all: [], 17 | find: [ authenticate('jwt') ], 18 | get: [ ...restrict ], 19 | create: [ hashPassword() ], 20 | update: [ ...restrict, hashPassword() ], 21 | patch: [ ...restrict, hashPassword() ], 22 | remove: [ ...restrict ] 23 | }, 24 | 25 | after: { 26 | all: [ 27 | commonHooks.when( 28 | hook => hook.params.provider, 29 | commonHooks.discard('password') 30 | ) 31 | ], 32 | find: [], 33 | get: [], 34 | create: [], 35 | update: [], 36 | patch: [], 37 | remove: [] 38 | }, 39 | 40 | error: { 41 | all: [], 42 | find: [], 43 | get: [], 44 | create: [], 45 | update: [], 46 | patch: [], 47 | remove: [] 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /feathersServer/src/services/users/users.service.js: -------------------------------------------------------------------------------- 1 | // Initializes the `users` service on path `/users` 2 | const createService = require('feathers-mongoose'); 3 | const createModel = require('../../models/users.model'); 4 | const hooks = require('./users.hooks'); 5 | const filters = require('./users.filters'); 6 | 7 | module.exports = function () { 8 | const app = this; 9 | const Model = createModel(app); 10 | const paginate = app.get('paginate'); 11 | 12 | const options = { 13 | name: 'users', 14 | Model, 15 | paginate 16 | }; 17 | 18 | // Initialize our service with any options it requires 19 | app.use('/users', createService(options)); 20 | 21 | // Get our initialized service so that we can register hooks and filters 22 | const service = app.service('users'); 23 | 24 | service.hooks(hooks); 25 | 26 | if (service.filter) { 27 | service.filter(filters); 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /feathersServer/test/app.test.js: -------------------------------------------------------------------------------- 1 | const assert = require('assert'); 2 | const rp = require('request-promise'); 3 | const app = require('../src/app'); 4 | 5 | describe('Feathers application tests', () => { 6 | before(function(done) { 7 | this.server = app.listen(3030); 8 | this.server.once('listening', () => done()); 9 | }); 10 | 11 | after(function(done) { 12 | this.server.close(done); 13 | }); 14 | 15 | it('starts and shows the index page', () => { 16 | return rp('http://localhost:3030').then(body => 17 | assert.ok(body.indexOf('') !== -1) 18 | ); 19 | }); 20 | 21 | describe('404', function() { 22 | it('shows a 404 HTML page', () => { 23 | return rp({ 24 | url: 'http://localhost:3030/path/to/nowhere', 25 | headers: { 26 | 'Accept': 'text/html' 27 | } 28 | }).catch(res => { 29 | assert.equal(res.statusCode, 404); 30 | assert.ok(res.error.indexOf('') !== -1); 31 | }); 32 | }); 33 | 34 | it('shows a 404 JSON error without stack trace', () => { 35 | return rp({ 36 | url: 'http://localhost:3030/path/to/nowhere', 37 | json: true 38 | }).catch(res => { 39 | assert.equal(res.statusCode, 404); 40 | assert.equal(res.error.code, 404); 41 | assert.equal(res.error.message, 'Page not found'); 42 | assert.equal(res.error.name, 'NotFound'); 43 | }); 44 | }); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /feathersServer/test/services/user.test.js: -------------------------------------------------------------------------------- 1 | const assert = require('assert'); 2 | const app = require('../../src/app'); 3 | 4 | describe('\'user\' service', () => { 5 | it('registered the service', () => { 6 | const service = app.service('user'); 7 | 8 | assert.ok(service, 'Registered the service'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /feathersServer/test/services/users.test.js: -------------------------------------------------------------------------------- 1 | const assert = require('assert'); 2 | const app = require('../../src/app'); 3 | 4 | describe('\'users\' service', () => { 5 | it('registered the service', () => { 6 | const service = app.service('users'); 7 | 8 | assert.ok(service, 'Registered the service'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /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 | borderRadius: 13.5, 32 | height: 27 33 | }; 34 | return badgeTheme; 35 | }; 36 | -------------------------------------------------------------------------------- /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 | 7 | const buttonTheme = { 8 | ".disabled": { 9 | backgroundColor: variables.btnDisabledBg 10 | }, 11 | ".bordered": { 12 | ".dark": { 13 | "NativeBase.Text": { 14 | color: "#000" 15 | }, 16 | "NativeBase.Icon": { 17 | color: "#000" 18 | }, 19 | "NativeBase.IconNB": { 20 | color: "#000" 21 | }, 22 | backgroundColor: "transparent", 23 | borderColor: "#000", 24 | borderWidth: variables.borderWidth * 2 25 | }, 26 | ".light": { 27 | "NativeBase.Text": { 28 | color: "#f4f4f4" 29 | }, 30 | "NativeBase.Icon": { 31 | color: "#f4f4f4" 32 | }, 33 | "NativeBase.IconNB": { 34 | color: "#f4f4f4" 35 | }, 36 | backgroundColor: "transparent", 37 | borderColor: "#f4f4f4", 38 | borderWidth: variables.borderWidth * 2 39 | }, 40 | ".primary": { 41 | "NativeBase.Text": { 42 | color: variables.btnPrimaryBg 43 | }, 44 | "NativeBase.Icon": { 45 | color: variables.btnPrimaryBg 46 | }, 47 | "NativeBase.IconNB": { 48 | color: variables.btnPrimaryBg 49 | }, 50 | backgroundColor: "transparent", 51 | borderColor: variables.btnPrimaryBg, 52 | borderWidth: variables.borderWidth * 2 53 | }, 54 | ".success": { 55 | "NativeBase.Text": { 56 | color: variables.btnSuccessBg 57 | }, 58 | "NativeBase.Icon": { 59 | color: variables.btnSuccessBg 60 | }, 61 | "NativeBase.IconNB": { 62 | color: variables.btnSuccessBg 63 | }, 64 | backgroundColor: "transparent", 65 | borderColor: variables.btnSuccessBg, 66 | borderWidth: variables.borderWidth * 2 67 | }, 68 | ".info": { 69 | "NativeBase.Text": { 70 | color: variables.btnInfoBg 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.btnInfoBg 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.btnInfoBg 77 | }, 78 | backgroundColor: "transparent", 79 | borderColor: variables.btnInfoBg, 80 | borderWidth: variables.borderWidth * 2 81 | }, 82 | ".warning": { 83 | "NativeBase.Text": { 84 | color: variables.btnWarningBg 85 | }, 86 | "NativeBase.Icon": { 87 | color: variables.btnWarningBg 88 | }, 89 | "NativeBase.IconNB": { 90 | color: variables.btnWarningBg 91 | }, 92 | backgroundColor: "transparent", 93 | borderColor: variables.btnWarningBg, 94 | borderWidth: variables.borderWidth * 2 95 | }, 96 | ".danger": { 97 | "NativeBase.Text": { 98 | color: variables.btnDangerBg 99 | }, 100 | "NativeBase.Icon": { 101 | color: variables.btnDangerBg 102 | }, 103 | "NativeBase.IconNB": { 104 | color: variables.btnDangerBg 105 | }, 106 | backgroundColor: "transparent", 107 | borderColor: variables.btnDangerBg, 108 | borderWidth: variables.borderWidth * 2 109 | }, 110 | ".disabled": { 111 | backgroundColor: null, 112 | borderColor: variables.btnDisabledBg, 113 | borderWidth: variables.borderWidth * 2, 114 | "NativeBase.Text": { 115 | color: variables.btnDisabledBg 116 | } 117 | }, 118 | "NativeBase.Text": { 119 | color: variables.btnPrimaryBg 120 | }, 121 | "NativeBase.Icon": { 122 | color: variables.btnPrimaryBg 123 | }, 124 | "NativeBase.IconNB": { 125 | color: variables.btnPrimaryBg 126 | }, 127 | borderWidth: variables.borderWidth * 2, 128 | elevation: null, 129 | shadowColor: null, 130 | shadowOffset: null, 131 | shadowOpacity: null, 132 | shadowRadius: null, 133 | backgroundColor: "transparent" 134 | }, 135 | 136 | ".dark": { 137 | ".bordered": { 138 | "NativeBase.Text": { 139 | color: "#000" 140 | }, 141 | "NativeBase.Icon": { 142 | color: "#000" 143 | }, 144 | "NativeBase.IconNB": { 145 | color: "#000" 146 | } 147 | }, 148 | backgroundColor: "#000" 149 | }, 150 | ".light": { 151 | ".transparent": { 152 | "NativeBase.Text": { 153 | color: "#f4f4f4" 154 | }, 155 | "NativeBase.Icon": { 156 | color: "#f4f4f4" 157 | }, 158 | "NativeBase.IconNB": { 159 | color: "#f4f4f4" 160 | }, 161 | backgroundColor: null 162 | }, 163 | ".bordered": { 164 | "NativeBase.Text": { 165 | color: "#f4f4f4" 166 | }, 167 | "NativeBase.Icon": { 168 | color: "#f4f4f4" 169 | }, 170 | "NativeBase.IconNB": { 171 | color: "#f4f4f4" 172 | } 173 | }, 174 | "NativeBase.Text": { 175 | color: "#000" 176 | }, 177 | "NativeBase.Icon": { 178 | color: "#000" 179 | }, 180 | "NativeBase.IconNB": { 181 | color: "#000" 182 | }, 183 | backgroundColor: "#f4f4f4" 184 | }, 185 | 186 | ".primary": { 187 | ".bordered": { 188 | "NativeBase.Text": { 189 | color: variables.btnPrimaryBg 190 | }, 191 | "NativeBase.Icon": { 192 | color: variables.btnPrimaryBg 193 | }, 194 | "NativeBase.IconNB": { 195 | color: variables.btnPrimaryBg 196 | } 197 | }, 198 | backgroundColor: variables.btnPrimaryBg 199 | }, 200 | 201 | ".success": { 202 | ".bordered": { 203 | "NativeBase.Text": { 204 | color: variables.btnSuccessBg 205 | }, 206 | "NativeBase.Icon": { 207 | color: variables.btnSuccessBg 208 | }, 209 | "NativeBase.IconNB": { 210 | color: variables.btnSuccessBg 211 | } 212 | }, 213 | backgroundColor: variables.btnSuccessBg 214 | }, 215 | 216 | ".info": { 217 | ".bordered": { 218 | "NativeBase.Text": { 219 | color: variables.btnInfoBg 220 | }, 221 | "NativeBase.Icon": { 222 | color: variables.btnInfoBg 223 | }, 224 | "NativeBase.IconNB": { 225 | color: variables.btnInfoBg 226 | } 227 | }, 228 | backgroundColor: variables.btnInfoBg 229 | }, 230 | 231 | ".warning": { 232 | ".bordered": { 233 | "NativeBase.Text": { 234 | color: variables.btnWarningBg 235 | }, 236 | "NativeBase.Icon": { 237 | color: variables.btnWarningBg 238 | }, 239 | "NativeBase.IconNB": { 240 | color: variables.btnWarningBg 241 | } 242 | }, 243 | backgroundColor: variables.btnWarningBg 244 | }, 245 | 246 | ".danger": { 247 | ".bordered": { 248 | "NativeBase.Text": { 249 | color: variables.btnDangerBg 250 | }, 251 | "NativeBase.Icon": { 252 | color: variables.btnDangerBg 253 | }, 254 | "NativeBase.IconNB": { 255 | color: variables.btnDangerBg 256 | } 257 | }, 258 | backgroundColor: variables.btnDangerBg 259 | }, 260 | 261 | ".block": { 262 | justifyContent: "center", 263 | alignSelf: "stretch" 264 | }, 265 | 266 | ".full": { 267 | justifyContent: "center", 268 | alignSelf: "stretch", 269 | borderRadius: 0 270 | }, 271 | 272 | ".rounded": { 273 | paddingHorizontal: variables.buttonPadding + 20, 274 | borderRadius: variables.borderRadiusLarge 275 | }, 276 | 277 | ".transparent": { 278 | backgroundColor: "transparent", 279 | elevation: 0, 280 | shadowColor: null, 281 | shadowOffset: null, 282 | shadowRadius: null, 283 | shadowOpacity: null, 284 | 285 | "NativeBase.Text": { 286 | color: variables.btnPrimaryBg 287 | }, 288 | "NativeBase.Icon": { 289 | color: variables.btnPrimaryBg 290 | }, 291 | "NativeBase.IconNB": { 292 | color: variables.btnPrimaryBg 293 | }, 294 | ".dark": { 295 | "NativeBase.Text": { 296 | color: "#000" 297 | }, 298 | "NativeBase.IconNB": { 299 | color: "#000" 300 | }, 301 | "NativeBase.Icon": { 302 | color: "#000" 303 | }, 304 | backgroundColor: null 305 | }, 306 | ".danger": { 307 | "NativeBase.Text": { 308 | color: variables.btnDangerBg 309 | }, 310 | "NativeBase.IconNB": { 311 | color: variables.btnDangerBg 312 | }, 313 | "NativeBase.Icon": { 314 | color: variables.btnDangerBg 315 | }, 316 | backgroundColor: null 317 | }, 318 | ".warning": { 319 | "NativeBase.Text": { 320 | color: variables.btnWarningBg 321 | }, 322 | "NativeBase.IconNB": { 323 | color: variables.btnWarningBg 324 | }, 325 | "NativeBase.Icon": { 326 | color: variables.btnWarningBg 327 | }, 328 | backgroundColor: null 329 | }, 330 | ".info": { 331 | "NativeBase.Text": { 332 | color: variables.btnInfoBg 333 | }, 334 | "NativeBase.IconNB": { 335 | color: variables.btnInfoBg 336 | }, 337 | "NativeBase.Icon": { 338 | color: variables.btnInfoBg 339 | }, 340 | backgroundColor: null 341 | }, 342 | ".primary": { 343 | "NativeBase.Text": { 344 | color: variables.btnPrimaryBg 345 | }, 346 | "NativeBase.IconNB": { 347 | color: variables.btnPrimaryBg 348 | }, 349 | "NativeBase.Icon": { 350 | color: variables.btnPrimaryBg 351 | }, 352 | backgroundColor: null 353 | }, 354 | ".success": { 355 | "NativeBase.Text": { 356 | color: variables.btnSuccessBg 357 | }, 358 | "NativeBase.IconNB": { 359 | color: variables.btnSuccessBg 360 | }, 361 | "NativeBase.Icon": { 362 | color: variables.btnSuccessBg 363 | }, 364 | backgroundColor: null 365 | }, 366 | ".light": { 367 | "NativeBase.Text": { 368 | color: "#f4f4f4" 369 | }, 370 | "NativeBase.IconNB": { 371 | color: "#f4f4f4" 372 | }, 373 | "NativeBase.Icon": { 374 | color: "#f4f4f4" 375 | }, 376 | backgroundColor: null 377 | } 378 | }, 379 | 380 | ".small": { 381 | height: 30, 382 | "NativeBase.Text": { 383 | fontSize: 14 384 | } 385 | }, 386 | 387 | ".large": { 388 | height: 60, 389 | "NativeBase.Text": { 390 | fontSize: 22, 391 | lineHeight: 32 392 | } 393 | }, 394 | 395 | ".capitalize": {}, 396 | 397 | ".vertical": { 398 | flexDirection: "column", 399 | height: null 400 | }, 401 | 402 | "NativeBase.Text": { 403 | fontFamily: variables.btnFontFamily, 404 | marginLeft: 0, 405 | marginRight: 0, 406 | color: variables.inverseTextColor, 407 | fontSize: variables.btnTextSize, 408 | lineHeight: variables.btnLineHeight 409 | // childPosition: 1 410 | }, 411 | 412 | "NativeBase.Icon": { 413 | color: variables.inverseTextColor, 414 | fontSize: 24, 415 | marginHorizontal: 5, 416 | paddingTop: platform === "ios" ? 2 : undefined 417 | }, 418 | "NativeBase.IconNB": { 419 | color: variables.inverseTextColor, 420 | fontSize: 24, 421 | marginHorizontal: 5, 422 | paddingTop: platform === "ios" ? 2 : undefined 423 | }, 424 | 425 | ".iconLeft": { 426 | "NativeBase.Text": { 427 | marginLeft: variables.buttonPadding 428 | }, 429 | "NativeBase.IconNB": { 430 | marginRight: 10, 431 | marginLeft: 0 432 | }, 433 | "NativeBase.Icon": { 434 | marginRight: 10, 435 | marginLeft: 0 436 | } 437 | }, 438 | ".iconRight": { 439 | "NativeBase.Text": { 440 | marginRight: variables.buttonPadding 441 | }, 442 | "NativeBase.IconNB": { 443 | marginLeft: 10, 444 | marginRight: 0 445 | }, 446 | "NativeBase.Icon": { 447 | marginLeft: 10, 448 | marginRight: 0 449 | } 450 | }, 451 | ".picker": { 452 | "NativeBase.Text": { 453 | ".note": { 454 | fontSize: 16, 455 | lineHeight: null 456 | } 457 | } 458 | }, 459 | 460 | paddingVertical: variables.buttonPadding, 461 | paddingHorizontal: variables.buttonPadding + 10, 462 | backgroundColor: variables.btnPrimaryBg, 463 | borderRadius: variables.borderRadiusBase, 464 | borderColor: variables.btnPrimaryBg, 465 | borderWidth: null, 466 | height: 45, 467 | alignSelf: "flex-start", 468 | flexDirection: "row", 469 | elevation: 2, 470 | shadowColor: platformStyle === "material" ? "#000" : undefined, 471 | shadowOffset: 472 | platformStyle === "material" ? { width: 0, height: 2 } : undefined, 473 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 474 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 475 | alignItems: "center", 476 | justifyContent: "space-between" 477 | }; 478 | return buttonTheme; 479 | }; 480 | -------------------------------------------------------------------------------- /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: 2, 14 | flex: 1, 15 | borderWidth: variables.borderWidth, 16 | borderRadius: 2, 17 | borderColor: variables.cardBorderColor, 18 | flexWrap: "wrap", 19 | backgroundColor: variables.cardDefaultBg, 20 | shadowColor: "#000", 21 | shadowOffset: { width: 0, height: 2 }, 22 | shadowOpacity: 0.1, 23 | shadowRadius: 1.5, 24 | elevation: 3 25 | }; 26 | 27 | return cardTheme; 28 | }; 29 | -------------------------------------------------------------------------------- /native-base-theme/components/CardItem.js: -------------------------------------------------------------------------------- 1 | import variable from './../variables/platform'; 2 | 3 | export default (variables = variable) => { 4 | const platform = variables.platform; 5 | 6 | const cardItemTheme = { 7 | 'NativeBase.Left': { 8 | 'NativeBase.Body': { 9 | 'NativeBase.Text': { 10 | '.note': { 11 | color: variables.listNoteColor, 12 | fontWeight: '400', 13 | marginRight: 20, 14 | }, 15 | }, 16 | flex: 1, 17 | marginLeft: 10, 18 | alignItems: null, 19 | }, 20 | 'NativeBase.Icon': { 21 | fontSize: variables.iconFontSize, 22 | }, 23 | 'NativeBase.IconNB': { 24 | fontSize: variables.iconFontSize, 25 | }, 26 | 'NativeBase.Text': { 27 | marginLeft: 10, 28 | alignSelf: 'center', 29 | }, 30 | 'NativeBase.Button': { 31 | '.transparent': { 32 | 'NativeBase.Text': { 33 | fontSize: variables.DefaultFontSize - 4, 34 | color: variables.sTabBarActiveTextColor, 35 | }, 36 | 'NativeBase.Icon': { 37 | fontSize: variables.iconFontSize - 10, 38 | color: variables.sTabBarActiveTextColor, 39 | marginHorizontal: null, 40 | }, 41 | 'NativeBase.IconNB': { 42 | fontSize: variables.iconFontSize - 10, 43 | color: variables.sTabBarActiveTextColor, 44 | }, 45 | paddingVertical: null, 46 | paddingHorizontal: null, 47 | paddingRight: variables.listItemPadding + 5, 48 | }, 49 | }, 50 | flex: 1, 51 | flexDirection: 'row', 52 | alignItems: 'center', 53 | }, 54 | 55 | '.content': { 56 | 'NativeBase.Text': { 57 | color: platform === 'ios' ? '#555' : '#222', 58 | fontSize: variables.DefaultFontSize - 3, 59 | }, 60 | }, 61 | '.cardBody': { 62 | padding: -5, 63 | 'NativeBase.Text': { 64 | marginTop: 5, 65 | }, 66 | }, 67 | 'NativeBase.Body': { 68 | 'NativeBase.Text': { 69 | '.note': { 70 | color: variables.listNoteColor, 71 | fontWeight: '200', 72 | marginRight: 20, 73 | }, 74 | }, 75 | 'NativeBase.Button': { 76 | '.transparent': { 77 | 'NativeBase.Text': { 78 | fontSize: variables.DefaultFontSize - 4, 79 | color: variables.sTabBarActiveTextColor, 80 | }, 81 | 'NativeBase.Icon': { 82 | fontSize: variables.iconFontSize - 10, 83 | color: variables.sTabBarActiveTextColor, 84 | marginHorizontal: null, 85 | }, 86 | 'NativeBase.IconNB': { 87 | fontSize: variables.iconFontSize - 10, 88 | color: variables.sTabBarActiveTextColor, 89 | }, 90 | paddingVertical: null, 91 | paddingHorizontal: null, 92 | paddingRight: variables.listItemPadding + 5, 93 | alignSelf: 'stretch', 94 | }, 95 | }, 96 | flex: 1, 97 | alignSelf: 'stretch', 98 | alignItems: 'flex-start', 99 | }, 100 | 'NativeBase.Right': { 101 | 'NativeBase.Badge': { 102 | alignSelf: null, 103 | }, 104 | 'NativeBase.Button': { 105 | '.transparent': { 106 | 'NativeBase.Text': { 107 | fontSize: variables.DefaultFontSize - 4, 108 | color: variables.sTabBarActiveTextColor, 109 | }, 110 | 'NativeBase.Icon': { 111 | fontSize: variables.iconFontSize - 10, 112 | color: variables.sTabBarActiveTextColor, 113 | marginHorizontal: null, 114 | }, 115 | 'NativeBase.IconNB': { 116 | fontSize: variables.iconFontSize - 10, 117 | color: variables.sTabBarActiveTextColor, 118 | }, 119 | paddingVertical: null, 120 | paddingHorizontal: null, 121 | }, 122 | alignSelf: null, 123 | }, 124 | 'NativeBase.Icon': { 125 | alignSelf: null, 126 | fontSize: variables.iconFontSize - 8, 127 | color: variables.cardBorderColor, 128 | }, 129 | 'NativeBase.IconNB': { 130 | alignSelf: null, 131 | fontSize: variables.iconFontSize - 8, 132 | color: variables.cardBorderColor, 133 | }, 134 | 'NativeBase.Text': { 135 | fontSize: variables.DefaultFontSize - 2, 136 | alignSelf: null, 137 | }, 138 | 'NativeBase.Thumbnail': { 139 | alignSelf: null, 140 | }, 141 | 'NativeBase.Image': { 142 | alignSelf: null, 143 | }, 144 | 'NativeBase.Radio': { 145 | alignSelf: null, 146 | }, 147 | 'NativeBase.Checkbox': { 148 | alignSelf: null, 149 | }, 150 | 'NativeBase.Switch': { 151 | alignSelf: null, 152 | }, 153 | flex: 0.8, 154 | }, 155 | '.header': { 156 | 'NativeBase.Text': { 157 | fontSize: 16, 158 | fontWeight: platform === 'ios' ? '500' : undefined, 159 | }, 160 | '.bordered': { 161 | 'NativeBase.Text': { 162 | color: variables.sTabBarActiveTextColor, 163 | fontWeight: platform === 'ios' ? '500' : undefined, 164 | }, 165 | borderBottomWidth: platform === 'ios' ? variables.borderWidth : null, 166 | }, 167 | borderBottomWidth: null, 168 | paddingVertical: variables.listItemPadding + 5, 169 | }, 170 | '.footer': { 171 | 'NativeBase.Text': { 172 | fontSize: 16, 173 | fontWeight: platform === 'ios' ? '500' : undefined, 174 | }, 175 | '.bordered': { 176 | 'NativeBase.Text': { 177 | color: variables.activeTab, 178 | fontWeight: '500', 179 | }, 180 | borderTopWidth: platform === 'ios' ? variables.borderWidth : null, 181 | }, 182 | borderBottomWidth: null, 183 | }, 184 | 'NativeBase.Text': { 185 | '.note': { 186 | color: variables.listNoteColor, 187 | fontWeight: '200', 188 | }, 189 | }, 190 | 191 | 'NativeBase.Icon': { 192 | width: variables.iconFontSize + 5, 193 | fontSize: variables.iconFontSize - 2, 194 | }, 195 | 'NativeBase.IconNB': { 196 | width: variables.iconFontSize + 5, 197 | fontSize: variables.iconFontSize - 2, 198 | }, 199 | 200 | '.bordered': { 201 | borderBottomWidth: variables.borderWidth, 202 | borderColor: variables.cardBorderColor, 203 | }, 204 | flexDirection: 'row', 205 | alignItems: 'center', 206 | borderRadius: 2, 207 | padding: variables.listItemPadding + 5, 208 | paddingVertical: variables.listItemPadding, 209 | backgroundColor: variables.cardDefaultBg, 210 | }; 211 | 212 | return cardItemTheme; 213 | }; 214 | -------------------------------------------------------------------------------- /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: "transparent", 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 | }, 14 | "NativeBase.IconNB": { 15 | alignSelf: "center", 16 | fontSize: 20, 17 | lineHeight: platform === "ios" ? 24 : undefined 18 | } 19 | } 20 | }; 21 | 22 | return fabTheme; 23 | }; 24 | -------------------------------------------------------------------------------- /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 footerTheme = { 8 | "NativeBase.Left": { 9 | "NativeBase.Button": { 10 | ".transparent": { 11 | backgroundColor: "transparent", 12 | borderColor: null, 13 | elevation: 0, 14 | shadowColor: null, 15 | shadowOffset: null, 16 | shadowRadius: null, 17 | shadowOpacity: null 18 | }, 19 | "NativeBase.Icon": { 20 | color: variables.topTabBarActiveTextColor 21 | }, 22 | "NativeBase.IconNB": { 23 | color: variables.topTabBarActiveTextColor 24 | }, 25 | alignSelf: null 26 | }, 27 | flex: 1, 28 | alignSelf: "center", 29 | alignItems: "flex-start" 30 | }, 31 | "NativeBase.Body": { 32 | flex: 1, 33 | alignItems: "center", 34 | alignSelf: "center", 35 | flexDirection: "row", 36 | "NativeBase.Button": { 37 | alignSelf: "center", 38 | ".transparent": { 39 | backgroundColor: "transparent", 40 | borderColor: null, 41 | elevation: 0, 42 | shadowColor: null, 43 | shadowOffset: null, 44 | shadowRadius: null, 45 | shadowOpacity: null 46 | }, 47 | ".full": { 48 | height: variables.footerHeight, 49 | flex: 1 50 | }, 51 | "NativeBase.Icon": { 52 | color: variables.topTabBarActiveTextColor 53 | }, 54 | "NativeBase.IconNB": { 55 | color: variables.topTabBarActiveTextColor 56 | } 57 | } 58 | }, 59 | "NativeBase.Right": { 60 | "NativeBase.Button": { 61 | ".transparent": { 62 | backgroundColor: "transparent", 63 | borderColor: null, 64 | elevation: 0, 65 | shadowColor: null, 66 | shadowOffset: null, 67 | shadowRadius: null, 68 | shadowOpacity: null 69 | }, 70 | "NativeBase.Icon": { 71 | color: variables.topTabBarActiveTextColor 72 | }, 73 | "NativeBase.IconNB": { 74 | color: variables.topTabBarActiveTextColor 75 | }, 76 | alignSelf: null 77 | }, 78 | flex: 1, 79 | alignSelf: "center", 80 | alignItems: "flex-end" 81 | }, 82 | backgroundColor: variables.footerDefaultBg, 83 | flexDirection: "row", 84 | justifyContent: "center", 85 | borderTopWidth: platform === "ios" && platformStyle !== "material" 86 | ? variables.borderWidth 87 | : undefined, 88 | borderColor: platform === "ios" && platformStyle !== "material" 89 | ? "#cbcbcb" 90 | : undefined, 91 | height: variables.footerHeight, 92 | elevation: 3, 93 | left: 0, 94 | right: 0 95 | }; 96 | 97 | return footerTheme; 98 | }; 99 | -------------------------------------------------------------------------------- /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, 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: platform === "ios" ? undefined : -5 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: platform === "ios" ? undefined : -5 42 | }, 43 | "NativeBase.Label": { 44 | left: 0, 45 | top: 8 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 } 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 | }, 63 | "NativeBase.Button": { 64 | justifyContent: "center", 65 | alignSelf: "center", 66 | alignItems: "center", 67 | ".transparent": { 68 | "NativeBase.Text": { 69 | color: variables.toolbarBtnColor, 70 | fontWeight: "600" 71 | }, 72 | "NativeBase.Icon": { 73 | color: variables.toolbarBtnColor 74 | }, 75 | "NativeBase.IconNB": { 76 | color: variables.toolbarBtnColor 77 | }, 78 | paddingHorizontal: variables.buttonPadding 79 | }, 80 | paddingHorizontal: 15 81 | }, 82 | ".searchBar": { 83 | "NativeBase.Item": { 84 | "NativeBase.Icon": { 85 | backgroundColor: "transparent", 86 | color: variables.dropdownLinkColor, 87 | fontSize: variables.toolbarSearchIconSize, 88 | alignItems: "center", 89 | marginTop: 2, 90 | paddingRight: 10, 91 | paddingLeft: 10 92 | }, 93 | "NativeBase.IconNB": { 94 | backgroundColor: "transparent", 95 | color: null, 96 | alignSelf: "center" 97 | }, 98 | "NativeBase.Input": { 99 | alignSelf: "center", 100 | lineHeight: 24, 101 | height: variables.searchBarHeight 102 | }, 103 | alignSelf: "center", 104 | alignItems: "center", 105 | justifyContent: "flex-start", 106 | flex: 1, 107 | height: variables.searchBarHeight, 108 | borderColor: "transparent", 109 | backgroundColor: variables.toolbarInputColor 110 | }, 111 | "NativeBase.Button": { 112 | ".transparent": { 113 | "NativeBase.Text": { 114 | fontWeight: "500" 115 | }, 116 | paddingHorizontal: null, 117 | paddingLeft: platform === "ios" ? 10 : null 118 | }, 119 | paddingHorizontal: platform === "ios" ? undefined : null, 120 | width: platform === "ios" ? undefined : 0, 121 | height: platform === "ios" ? undefined : 0 122 | } 123 | }, 124 | ".rounded": { 125 | "NativeBase.Item": { 126 | borderRadius: platform === "ios" && platformStyle !== "material" 127 | ? 25 128 | : 3 129 | } 130 | }, 131 | "NativeBase.Left": { 132 | "NativeBase.Button": { 133 | ".hasText": { 134 | marginLeft: -10, 135 | height: 30, 136 | "NativeBase.Icon": { 137 | color: variables.toolbarBtnColor, 138 | fontSize: variables.iconHeaderSize, 139 | marginTop: 2, 140 | marginRight: 5, 141 | marginLeft: 2 142 | }, 143 | "NativeBase.Text": { 144 | color: variables.toolbarBtnColor, 145 | fontSize: 17, 146 | marginLeft: 2, 147 | lineHeight: 21 148 | }, 149 | "NativeBase.IconNB": { 150 | color: variables.toolbarBtnColor, 151 | fontSize: variables.iconHeaderSize, 152 | marginTop: 2, 153 | marginRight: 5, 154 | marginLeft: 2 155 | } 156 | }, 157 | ".transparent": { 158 | marginLeft: -3, 159 | "NativeBase.Icon": { 160 | color: variables.toolbarBtnColor, 161 | fontSize: variables.iconHeaderSize, 162 | marginTop: 2, 163 | marginRight: 2, 164 | marginLeft: 2 165 | }, 166 | "NativeBase.IconNB": { 167 | color: variables.toolbarBtnColor, 168 | fontSize: variables.iconHeaderSize, 169 | marginTop: 2, 170 | marginRight: 2, 171 | marginLeft: 2 172 | }, 173 | "NativeBase.Text": { 174 | color: variables.toolbarBtnColor, 175 | fontSize: 17, 176 | top: platform === "ios" ? undefined : -1.5 177 | }, 178 | backgroundColor: "transparent", 179 | borderColor: null, 180 | elevation: 0, 181 | shadowColor: null, 182 | shadowOffset: null, 183 | shadowRadius: null, 184 | shadowOpacity: null 185 | }, 186 | "NativeBase.Icon": { 187 | color: variables.toolbarBtnColor 188 | }, 189 | "NativeBase.IconNB": { 190 | color: variables.toolbarBtnColor 191 | }, 192 | alignSelf: null, 193 | paddingHorizontal: variables.buttonPadding 194 | }, 195 | flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5, 196 | alignSelf: "center", 197 | alignItems: "flex-start" 198 | }, 199 | "NativeBase.Body": { 200 | flex: 1, 201 | alignItems: platform === "ios" && platformStyle !== "material" 202 | ? "center" 203 | : "flex-start", 204 | alignSelf: "center", 205 | "NativeBase.Segment": { 206 | borderWidth: 0, 207 | alignSelf: "flex-end", 208 | marginRight: platform === "ios" ? -40 : -55 209 | }, 210 | "NativeBase.Button": { 211 | alignSelf: "center", 212 | ".transparent": { 213 | backgroundColor: "transparent" 214 | }, 215 | "NativeBase.Icon": { 216 | color: variables.toolbarBtnColor 217 | }, 218 | "NativeBase.IconNB": { 219 | color: variables.toolbarBtnColor 220 | }, 221 | "NativeBase.Text": { 222 | color: variables.inverseTextColor, 223 | backgroundColor: "transparent" 224 | } 225 | } 226 | }, 227 | "NativeBase.Right": { 228 | "NativeBase.Button": { 229 | ".hasText": { 230 | height: 30, 231 | "NativeBase.Icon": { 232 | color: variables.toolbarBtnColor, 233 | fontSize: variables.iconHeaderSize - 2, 234 | marginTop: 2, 235 | marginRight: 2, 236 | marginLeft: 5 237 | }, 238 | "NativeBase.Text": { 239 | color: variables.toolbarBtnColor, 240 | fontSize: 17, 241 | lineHeight: 21 242 | }, 243 | "NativeBase.IconNB": { 244 | color: variables.toolbarBtnColor, 245 | fontSize: variables.iconHeaderSize - 2, 246 | marginTop: 2, 247 | marginRight: 2, 248 | marginLeft: 5 249 | } 250 | }, 251 | ".transparent": { 252 | marginRight: -8, 253 | paddingHorizontal: 15, 254 | borderRadius: 50, 255 | "NativeBase.Icon": { 256 | color: variables.toolbarBtnColor, 257 | fontSize: platform === "ios" 258 | ? variables.iconHeaderSize - 6 259 | : variables.iconHeaderSize - 2, 260 | marginTop: 2, 261 | marginLeft: 2, 262 | marginRight: 2 263 | }, 264 | "NativeBase.IconNB": { 265 | color: variables.toolbarBtnColor, 266 | fontSize: platform === "ios" 267 | ? variables.iconHeaderSize - 6 268 | : variables.iconHeaderSize - 2, 269 | marginTop: 2, 270 | marginLeft: 2, 271 | marginRight: 2 272 | }, 273 | "NativeBase.Text": { 274 | color: variables.toolbarBtnColor, 275 | fontSize: 17, 276 | top: platform === "ios" ? undefined : -1.5 277 | }, 278 | backgroundColor: "transparent", 279 | borderColor: null, 280 | elevation: 0, 281 | shadowColor: null, 282 | shadowOffset: null, 283 | shadowRadius: null, 284 | shadowOpacity: null 285 | }, 286 | "NativeBase.Icon": { 287 | color: variables.toolbarBtnColor 288 | }, 289 | "NativeBase.IconNB": { 290 | color: variables.toolbarBtnColor 291 | }, 292 | alignSelf: null, 293 | paddingHorizontal: variables.buttonPadding 294 | }, 295 | flex: 1, 296 | alignSelf: "center", 297 | alignItems: "flex-end", 298 | flexDirection: "row", 299 | justifyContent: "flex-end" 300 | }, 301 | backgroundColor: variables.toolbarDefaultBg, 302 | flexDirection: "row", 303 | paddingHorizontal: 10, 304 | justifyContent: "center", 305 | paddingTop: platform === "ios" ? 15 : 0, 306 | borderBottomWidth: platform === "ios" 307 | ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) 308 | : 0, 309 | borderBottomColor: variables.toolbarDefaultBorder, 310 | height: variables.toolbarHeight, 311 | elevation: 3, 312 | shadowColor: platformStyle === "material" ? "#000" : undefined, 313 | shadowOffset: platformStyle === "material" 314 | ? { width: 0, height: 2 } 315 | : undefined, 316 | shadowOpacity: platformStyle === "material" ? 0.2 : undefined, 317 | shadowRadius: platformStyle === "material" ? 1.2 : undefined, 318 | top: 0, 319 | left: 0, 320 | right: 0 321 | }; 322 | 323 | return headerTheme; 324 | }; 325 | -------------------------------------------------------------------------------- /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: 60, 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 | }, 56 | '.inlineLabel': { 57 | 'NativeBase.Label': { 58 | position: null, 59 | top: null, 60 | left: null, 61 | right: null, 62 | paddingRight: 20, 63 | height: null, 64 | width: null, 65 | fontSize: variables.inputFontSize, 66 | }, 67 | 'NativeBase.Input': { 68 | paddingLeft: 5, 69 | fontSize: variables.inputFontSize, 70 | }, 71 | flexDirection: 'row', 72 | }, 73 | 'NativeBase.Label': { 74 | fontSize: variables.inputFontSize, 75 | color: variables.inputColorPlaceholder, 76 | paddingRight: 5, 77 | }, 78 | 'NativeBase.Icon': { 79 | fontSize: 24, 80 | paddingRight: 8, 81 | }, 82 | 'NativeBase.IconNB': { 83 | fontSize: 24, 84 | paddingRight: 8, 85 | }, 86 | 'NativeBase.Input': { 87 | '.multiline': { 88 | height: null, 89 | }, 90 | height: variables.inputHeightBase, 91 | color: variables.inputColor, 92 | flex: 1, 93 | top: Platform.OS === 'ios' ? 1.5 : undefined, 94 | fontSize: variables.inputFontSize, 95 | lineHeight: variables.inputLineHeight, 96 | }, 97 | '.underline': { 98 | 'NativeBase.Input': { 99 | paddingLeft: 15, 100 | }, 101 | '.success': { 102 | borderColor: variables.inputSuccessBorderColor, 103 | }, 104 | '.error': { 105 | borderColor: variables.inputErrorBorderColor, 106 | }, 107 | borderWidth: variables.borderWidth * 2, 108 | borderTopWidth: 0, 109 | borderRightWidth: 0, 110 | borderLeftWidth: 0, 111 | borderColor: variables.inputBorderColor, 112 | }, 113 | '.regular': { 114 | 'NativeBase.Input': { 115 | paddingLeft: 8, 116 | }, 117 | 'NativeBase.Icon': { 118 | paddingLeft: 10, 119 | }, 120 | '.success': { 121 | borderColor: variables.inputSuccessBorderColor, 122 | }, 123 | '.error': { 124 | borderColor: variables.inputErrorBorderColor, 125 | }, 126 | borderWidth: variables.borderWidth * 2, 127 | borderColor: variables.inputBorderColor, 128 | }, 129 | '.rounded': { 130 | 'NativeBase.Input': { 131 | paddingLeft: 8, 132 | }, 133 | 'NativeBase.Icon': { 134 | paddingLeft: 10, 135 | }, 136 | '.success': { 137 | borderColor: variables.inputSuccessBorderColor, 138 | }, 139 | '.error': { 140 | borderColor: variables.inputErrorBorderColor, 141 | }, 142 | borderWidth: variables.borderWidth * 2, 143 | borderRadius: 30, 144 | borderColor: variables.inputBorderColor, 145 | }, 146 | 147 | '.success': { 148 | 'NativeBase.Icon': { 149 | color: variables.inputSuccessBorderColor, 150 | }, 151 | 'NativeBase.IconNB': { 152 | color: variables.inputSuccessBorderColor, 153 | }, 154 | '.rounded': { 155 | borderRadius: 30, 156 | borderColor: variables.inputSuccessBorderColor, 157 | }, 158 | '.regular': { 159 | borderColor: variables.inputSuccessBorderColor, 160 | }, 161 | '.underline': { 162 | borderWidth: variables.borderWidth * 2, 163 | borderTopWidth: 0, 164 | borderRightWidth: 0, 165 | borderLeftWidth: 0, 166 | borderColor: variables.inputSuccessBorderColor, 167 | }, 168 | borderColor: variables.inputSuccessBorderColor, 169 | }, 170 | 171 | '.error': { 172 | 'NativeBase.Icon': { 173 | color: variables.inputErrorBorderColor, 174 | }, 175 | 'NativeBase.IconNB': { 176 | color: variables.inputErrorBorderColor, 177 | }, 178 | '.rounded': { 179 | borderRadius: 30, 180 | borderColor: variables.inputErrorBorderColor, 181 | }, 182 | '.regular': { 183 | borderColor: variables.inputErrorBorderColor, 184 | }, 185 | '.underline': { 186 | borderWidth: variables.borderWidth * 2, 187 | borderTopWidth: 0, 188 | borderRightWidth: 0, 189 | borderLeftWidth: 0, 190 | borderColor: variables.inputErrorBorderColor, 191 | }, 192 | borderColor: variables.inputErrorBorderColor, 193 | }, 194 | '.disabled': { 195 | 'NativeBase.Icon': { 196 | color: '#384850', 197 | }, 198 | 'NativeBase.IconNB': { 199 | color: '#384850', 200 | }, 201 | }, 202 | 203 | borderWidth: variables.borderWidth * 2, 204 | borderTopWidth: 0, 205 | borderRightWidth: 0, 206 | borderLeftWidth: 0, 207 | borderColor: variables.inputBorderColor, 208 | backgroundColor: 'transparent', 209 | flexDirection: 'row', 210 | alignItems: 'center', 211 | marginLeft: 2, 212 | }; 213 | 214 | return itemTheme; 215 | }; 216 | -------------------------------------------------------------------------------- /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.brandPrimary 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 | borderColor: variables.segmentBorderColor, 20 | elevation: 0, 21 | ".active": { 22 | backgroundColor: variables.segmentActiveBackgroundColor, 23 | "NativeBase.Text": { 24 | color: variables.segmentActiveTextColor 25 | } 26 | }, 27 | ".first": { 28 | borderTopLeftRadius: platform === "ios" ? 5 : undefined, 29 | borderBottomLeftRadius: platform === "ios" ? 5 : undefined, 30 | borderRightWidth: 0 31 | }, 32 | ".last": { 33 | borderTopRightRadius: platform === "ios" ? 5 : undefined, 34 | borderBottomRightRadius: platform === "ios" ? 5 : undefined, 35 | borderLeftWidth: 0 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 | backgroundColor: '#FFF', 7 | marginLeft: 0, 8 | }, 9 | 'NativeBase.Left': { 10 | flex: 0, 11 | alignSelf: null, 12 | alignItems: null, 13 | 'NativeBase.Button': { 14 | alignItems: 'center', 15 | justifyContent: 'center', 16 | alignSelf: 'stretch', 17 | borderRadius: 0, 18 | }, 19 | }, 20 | 'NativeBase.Right': { 21 | flex: 0, 22 | alignSelf: null, 23 | alignItems: null, 24 | 'NativeBase.Button': { 25 | alignItems: 'center', 26 | justifyContent: 'center', 27 | alignSelf: 'stretch', 28 | borderRadius: 0, 29 | }, 30 | }, 31 | 'NativeBase.Button': { 32 | alignItems: 'center', 33 | justifyContent: 'center', 34 | alignSelf: 'stretch', 35 | borderRadius: 0, 36 | }, 37 | }; 38 | 39 | return swipeRowTheme; 40 | }; 41 | -------------------------------------------------------------------------------- /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 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#3F51B5", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#3F51B5", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: "#2874F0", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#2874F0", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#8bb3f4", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#2874F0", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#2874F0", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | iosStatusbar: "light-content", 163 | toolbarDefaultBorder: "#2874F0", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hex(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 33 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#5067FF", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hex(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 251 | titleFontSize: platform === "ios" ? 17 : 19, 252 | subTitleFontSize: platform === "ios" ? 12 : 14, 253 | subtitleColor: "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: platform === "ios" ? 5 : 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hex(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /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 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "Roboto" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: 0, 31 | CheckboxBorderWidth: 2, 32 | CheckboxPaddingLeft: 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 18 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 21 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: "#3F51B5", 44 | segmentActiveBackgroundColor: "#fff", 45 | segmentTextColor: "#fff", 46 | segmentActiveTextColor: "#3F51B5", 47 | segmentBorderColor: "#fff", 48 | segmentBorderColorMain: "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: "#3F51B5", 112 | brandInfo: "#3F57D3", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: "#3F51B5", 135 | 136 | // FooterTab 137 | tabBarTextColor: "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: "#fff", 142 | tabActiveBgColor: undefined, 143 | 144 | // Tab 145 | tabDefaultBg: "#3F51B5", 146 | topTabBarTextColor: "#b3c7f9", 147 | topTabBarActiveTextColor: "#fff", 148 | topTabActiveBgColor: undefined, 149 | topTabBarBorderColor: "#fff", 150 | topTabBarActiveBorderColor: "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: "#fff", 154 | toolbarDefaultBg: "#3F51B5", 155 | toolbarHeight: platform === "ios" ? 76 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: "#fff", 162 | toolbarDefaultBorder: "#3F51B5", 163 | iosStatusbar: "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hex(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 29 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#5067FF", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hex(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "Roboto" : "Roboto_medium", 251 | titleFontSize: 19, 252 | subTitleFontSize: 14, 253 | subtitleColor: "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hex(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /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 | 10 | export default { 11 | platformStyle, 12 | platform, 13 | // AndroidRipple 14 | androidRipple: true, 15 | androidRippleColor: "rgba(256, 256, 256, 0.3)", 16 | androidRippleColorDark: "rgba(0, 0, 0, 0.15)", 17 | 18 | // Badge 19 | badgeBg: "#ED1727", 20 | badgeColor: "#fff", 21 | // New Variable 22 | badgePadding: platform === "ios" ? 3 : 0, 23 | 24 | // Button 25 | btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", 26 | btnDisabledBg: "#b5b5b5", 27 | btnDisabledClr: "#f1f1f1", 28 | 29 | // CheckBox 30 | CheckboxRadius: platform === "ios" ? 13 : 0, 31 | CheckboxBorderWidth: platform === "ios" ? 1 : 2, 32 | CheckboxPaddingLeft: platform === "ios" ? 4 : 2, 33 | CheckboxPaddingBottom: platform === "ios" ? 0 : 5, 34 | CheckboxIconSize: platform === "ios" ? 21 : 14, 35 | CheckboxIconMarginTop: platform === "ios" ? undefined : 1, 36 | CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, 37 | DefaultFontSize: 17, 38 | checkboxBgColor: "#039BE5", 39 | checkboxSize: 20, 40 | checkboxTickColor: "#fff", 41 | 42 | // Segment 43 | segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", 44 | segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", 45 | segmentTextColor: platform === "ios" ? "#007aff" : "#fff", 46 | segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", 47 | segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", 48 | segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", 49 | 50 | // New Variable 51 | get defaultTextColor() { 52 | return this.textColor; 53 | }, 54 | 55 | get btnPrimaryBg() { 56 | return this.brandPrimary; 57 | }, 58 | get btnPrimaryColor() { 59 | return this.inverseTextColor; 60 | }, 61 | get btnInfoBg() { 62 | return this.brandInfo; 63 | }, 64 | get btnInfoColor() { 65 | return this.inverseTextColor; 66 | }, 67 | get btnSuccessBg() { 68 | return this.brandSuccess; 69 | }, 70 | get btnSuccessColor() { 71 | return this.inverseTextColor; 72 | }, 73 | get btnDangerBg() { 74 | return this.brandDanger; 75 | }, 76 | get btnDangerColor() { 77 | return this.inverseTextColor; 78 | }, 79 | get btnWarningBg() { 80 | return this.brandWarning; 81 | }, 82 | get btnWarningColor() { 83 | return this.inverseTextColor; 84 | }, 85 | get btnTextSize() { 86 | return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; 87 | }, 88 | get btnTextSizeLarge() { 89 | return this.fontSizeBase * 1.5; 90 | }, 91 | get btnTextSizeSmall() { 92 | return this.fontSizeBase * 0.8; 93 | }, 94 | get borderRadiusLarge() { 95 | return this.fontSizeBase * 3.8; 96 | }, 97 | 98 | buttonPadding: 6, 99 | 100 | get iconSizeLarge() { 101 | return this.iconFontSize * 1.5; 102 | }, 103 | get iconSizeSmall() { 104 | return this.iconFontSize * 0.6; 105 | }, 106 | 107 | // Card 108 | cardDefaultBg: "#fff", 109 | 110 | // Color 111 | brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", 112 | brandInfo: "#62B1F6", 113 | brandSuccess: "#5cb85c", 114 | brandDanger: "#d9534f", 115 | brandWarning: "#f0ad4e", 116 | brandSidebar: "#252932", 117 | 118 | // Font 119 | fontFamily: platform === "ios" ? "System" : "Roboto", 120 | fontSizeBase: 15, 121 | 122 | get fontSizeH1() { 123 | return this.fontSizeBase * 1.8; 124 | }, 125 | get fontSizeH2() { 126 | return this.fontSizeBase * 1.6; 127 | }, 128 | get fontSizeH3() { 129 | return this.fontSizeBase * 1.4; 130 | }, 131 | 132 | // Footer 133 | footerHeight: 55, 134 | footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#4179F7", 135 | 136 | // FooterTab 137 | tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 138 | tabBarTextSize: platform === "ios" ? 14 : 11, 139 | activeTab: platform === "ios" ? "#007aff" : "#fff", 140 | sTabBarActiveTextColor: "#007aff", 141 | tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 142 | tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", 143 | 144 | // Tab 145 | tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 146 | topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", 147 | topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", 148 | topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined, 149 | topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", 150 | topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", 151 | 152 | // Header 153 | toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", 154 | toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", 155 | toolbarHeight: platform === "ios" ? 64 : 56, 156 | toolbarIconSize: platform === "ios" ? 20 : 22, 157 | toolbarSearchIconSize: platform === "ios" ? 20 : 23, 158 | toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", 159 | searchBarHeight: platform === "ios" ? 30 : 40, 160 | toolbarInverseBg: "#222", 161 | toolbarTextColor: platform === "ios" ? "#000" : "#fff", 162 | toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", 163 | iosStatusbar: platform === "ios" ? "dark-content" : "light-content", 164 | get statusBarColor() { 165 | return color(this.toolbarDefaultBg).darken(0.2).hex(); 166 | }, 167 | 168 | // Icon 169 | iconFamily: "Ionicons", 170 | iconFontSize: platform === "ios" ? 30 : 28, 171 | iconMargin: 7, 172 | iconHeaderSize: platform === "ios" ? 33 : 24, 173 | 174 | // InputGroup 175 | inputFontSize: 17, 176 | inputBorderColor: "#D9D5DC", 177 | inputSuccessBorderColor: "#2b8339", 178 | inputErrorBorderColor: "#ed2f2f", 179 | 180 | get inputColor() { 181 | return this.textColor; 182 | }, 183 | get inputColorPlaceholder() { 184 | return "#575757"; 185 | }, 186 | 187 | inputGroupMarginBottom: 10, 188 | inputHeightBase: 50, 189 | inputPaddingLeft: 5, 190 | 191 | get inputPaddingLeftIcon() { 192 | return this.inputPaddingLeft * 8; 193 | }, 194 | 195 | // Line Height 196 | btnLineHeight: 19, 197 | lineHeightH1: 32, 198 | lineHeightH2: 27, 199 | lineHeightH3: 22, 200 | iconLineHeight: platform === "ios" ? 37 : 30, 201 | lineHeight: platform === "ios" ? 20 : 24, 202 | 203 | // List 204 | listBorderColor: "#c9c9c9", 205 | listDividerBg: "#f4f4f4", 206 | listItemHeight: 45, 207 | listBtnUnderlayColor: "#DDD", 208 | 209 | // Card 210 | cardBorderColor: "#ccc", 211 | 212 | // Changed Variable 213 | listItemPadding: platform === "ios" ? 10 : 12, 214 | 215 | listNoteColor: "#808080", 216 | listNoteSize: 13, 217 | 218 | // Progress Bar 219 | defaultProgressColor: "#E4202D", 220 | inverseProgressColor: "#1A191B", 221 | 222 | // Radio Button 223 | radioBtnSize: platform === "ios" ? 25 : 23, 224 | radioSelectedColorAndroid: "#3F51B5", 225 | 226 | // New Variable 227 | radioBtnLineHeight: platform === "ios" ? 29 : 24, 228 | 229 | radioColor: "#7e7e7e", 230 | 231 | get radioSelectedColor() { 232 | return color(this.radioColor).darken(0.2).hex(); 233 | }, 234 | 235 | // Spinner 236 | defaultSpinnerColor: "#45D56E", 237 | inverseSpinnerColor: "#1A191B", 238 | 239 | // Tabs 240 | tabBgColor: "#F8F8F8", 241 | tabFontSize: 15, 242 | tabTextColor: "#222222", 243 | 244 | // Text 245 | textColor: "#000", 246 | inverseTextColor: "#fff", 247 | noteFontSize: 14, 248 | 249 | // Title 250 | titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", 251 | titleFontSize: platform === "ios" ? 17 : 19, 252 | subTitleFontSize: platform === "ios" ? 12 : 14, 253 | subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", 254 | 255 | // New Variable 256 | titleFontColor: platform === "ios" ? "#000" : "#FFF", 257 | 258 | // Other 259 | borderRadiusBase: platform === "ios" ? 5 : 2, 260 | borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), 261 | contentPadding: 10, 262 | 263 | get darkenHeader() { 264 | return color(this.tabBgColor).darken(0.03).hex(); 265 | }, 266 | 267 | dropdownBg: "#000", 268 | dropdownLinkColor: "#414142", 269 | inputLineHeight: 24, 270 | jumbotronBg: "#C9C9CE", 271 | jumbotronPadding: 30, 272 | deviceWidth, 273 | deviceHeight, 274 | 275 | // New Variable 276 | inputGroupRoundedBorderRadius: 30 277 | }; 278 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-mobx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@storybook/react-native": "^3.2.8", 7 | "babel-cli": "^6.26.0", 8 | "babel-eslint": "^7.2.3", 9 | "babel-plugin-module-resolver": "^2.7.1", 10 | "babel-preset-flow": "^6.23.0", 11 | "eslint": "^4.5.0", 12 | "eslint-config-airbnb": "^15.1.0", 13 | "eslint-import-resolver-babel-module": "^3.0.0", 14 | "eslint-plugin-import": "^2.7.0", 15 | "eslint-plugin-jsx-a11y": "^6.0.2", 16 | "eslint-plugin-react": "^7.3.0", 17 | "eslint-plugin-react-native": "^3.0.1", 18 | "flow-bin": "^0.53.1", 19 | "jest-expo": "~20.0.0", 20 | "react-dom": "16.0.0-alpha.12", 21 | "react-native-scripts": "0.0.40", 22 | "react-test-renderer": "16.0.0-alpha.12" 23 | }, 24 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 25 | "scripts": { 26 | "start": "react-native-scripts start", 27 | "eject": "react-native-scripts eject", 28 | "android": "react-native-scripts android", 29 | "ios": "react-native-scripts ios", 30 | "test": "node node_modules/jest/bin/jest.js --watch", 31 | "storybook": "storybook start -p 7007" 32 | }, 33 | "jest": { 34 | "preset": "jest-expo" 35 | }, 36 | "dependencies": { 37 | "babel-preset-es2015": "^6.24.1", 38 | "color": "2.0.0", 39 | "expo": "^20.0.0", 40 | "mobx": "^3.1.16", 41 | "mobx-react": "^4.2.2", 42 | "native-base": "^2.2.0", 43 | "prettier": "^1.5.2", 44 | "prop-types": "^15.5.10", 45 | "react": "16.0.0-alpha.12", 46 | "react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz", 47 | "react-navigation": "^1.0.0-beta.11" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Haakh/react-native-mobx-feathers/11af9b96fca42665f0589ee7c7b3235845e3ec10/src/.DS_Store -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import boot from './boot/index'; 2 | 3 | const app = boot(); 4 | 5 | export default app; 6 | -------------------------------------------------------------------------------- /src/boot/feathersApp.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // Feathers : 3 | // ======================================== 4 | import feathers from 'feathers/client'; 5 | import hooks from 'feathers-hooks'; 6 | import socketio from 'feathers-socketio/client'; 7 | import config from '../../config'; 8 | 9 | if (!global._babelPolyfill) { 10 | require('babel-polyfill'); 11 | } 12 | 13 | if (window.navigator && Object.keys(window.navigator).length === 0) { 14 | window = Object.assign(window, { navigator: { userAgent: 'ReactNative' } }); 15 | } 16 | 17 | require('socket.io-client'); 18 | 19 | const io = require('socket.io-client'); 20 | 21 | const host = `${config.apiEndpoint}:${config.apiPort}`; 22 | const options = { transports: ['websocket'] }; 23 | const socket = io(host, options); 24 | 25 | // Set up Feathers client side 26 | const app = feathers().configure(socketio(socket)).configure(hooks()); 27 | // ======================================================= 28 | 29 | export default function Feathers() { 30 | return app; 31 | } 32 | -------------------------------------------------------------------------------- /src/boot/index.js: -------------------------------------------------------------------------------- 1 | import mobx from './mobx'; 2 | import components from './react'; 3 | // import initFeathersApp from './feathersApp'; 4 | // import initChat from './initChat'; 5 | // import initNotifications from './initNotifications'; 6 | import initAnalytics from './initAnalytics'; 7 | 8 | export default function () { 9 | // const initFeathers = initFeathersApp(); 10 | const stores = mobx(); 11 | // initAnalytics(); 12 | // initNotifications(stores); 13 | // initChat(stores, initFeathers); 14 | return components(stores); 15 | } 16 | -------------------------------------------------------------------------------- /src/boot/initAnalytics.js: -------------------------------------------------------------------------------- 1 | import Expo from 'expo'; 2 | import React from 'react'; 3 | import { toJS } from 'mobx'; 4 | import config from '../../config'; 5 | 6 | export default function (stores) { 7 | Expo.Amplitude.initialize(config.amplitudeApikey); 8 | Expo.Amplitude.setUserProperties(toJS(stores.domainUser.user)); 9 | } 10 | -------------------------------------------------------------------------------- /src/boot/initChat.js: -------------------------------------------------------------------------------- 1 | import * as Expo from 'expo'; 2 | import React from 'react'; 3 | import { toJS } from 'mobx'; 4 | import config from '../../config'; 5 | 6 | // Chat Socket Listener 7 | export default function (stores, initFeathers) { 8 | const chat = initFeathers.service('groupsmessages'); 9 | chat.on('created', (msg) => { 10 | if (stores.viewChat.initialID !== msg._id) { 11 | if ( 12 | stores.viewChat.buildingGroupId !== 0 && 13 | msg.groupId === stores.viewChat.buildingGroupId && 14 | msg.user._id !== stores.domainUser.user._id 15 | ) { 16 | if (stores.viewView.appTabScreen !== 'chat') { 17 | stores.viewChat.increaseBuildingChatCount(); 18 | } 19 | } 20 | stores.domainChat.newMessage(msg); 21 | } 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /src/boot/initNotifications.js: -------------------------------------------------------------------------------- 1 | import * as Expo from 'expo'; 2 | import React from 'react'; 3 | import { toJS } from 'mobx'; 4 | import config from '../../config'; 5 | 6 | export default async function (stores) { 7 | const token = await Expo.Notifications.getExponentPushTokenAsync(); 8 | stores.viewView.isReadyApp(true); 9 | stores.domainUser.setExpoToken(token); 10 | // TO REMOVE 11 | stores.domainUser.setDeviceId('000'); 12 | function listener(notification) { 13 | console.log('NOTI', notification); 14 | if (notification.origin === 'selected') { 15 | Expo.Amplitude.logEvent('Selected Notification'); 16 | console.log('NOTIF', notification.data.groupid, ' ', stores.viewChat.buildingGroupId); 17 | // Check for which group then link accordingly. 18 | if (notification.data.groupid === stores.viewChat.buildingGroupId) { 19 | console.log('Building Not'); 20 | stores.viewView.toggleTab('chat'); 21 | stores.viewChat.resetBuildingChatCount(); 22 | stores.viewChat.toggleChatGroup(notification.data.groupid); 23 | stores.domainGroups.getUserGroups(notification.data.groupid); 24 | stores.viewChat.toggleChat(1); 25 | } else { 26 | console.log('Not BUilding: ', notification.data.groupname); 27 | stores.domainGroups.getUserGroups(notification.data.groupid); 28 | stores.viewChat.toggleChatGroup(notification.data.groupid); 29 | stores.viewFeed.changeTab('chat'); 30 | stores.viewView.toggleAccess('globalchat'); 31 | } 32 | } else { 33 | Expo.Amplitude.logEvent('Recieved Notification'); 34 | console.log('not yett'); 35 | } 36 | } 37 | Expo.Notifications.addListener(listener); 38 | } 39 | -------------------------------------------------------------------------------- /src/boot/mobx.js: -------------------------------------------------------------------------------- 1 | import UserDomainStore from '../stores/domain/user'; 2 | import ListDomainStore from '../stores/domain/list'; 3 | 4 | import HomeViewStore from '../stores/view/home'; 5 | import LoginViewStore from '../stores/view/login'; 6 | import SignUpViewStore from '../stores/view/signup'; 7 | 8 | export default function () { 9 | const viewHome = new HomeViewStore(); 10 | const viewSignUp = new LoginViewStore(); 11 | const viewLogin = new SignUpViewStore(); 12 | 13 | const domainUser = new UserDomainStore(); 14 | const domainList = new ListDomainStore(); 15 | 16 | return { 17 | viewHome, 18 | viewSignUp, 19 | viewLogin, 20 | domainUser, 21 | domainList, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /src/boot/react.js: -------------------------------------------------------------------------------- 1 | import Expo from 'expo'; 2 | import React from 'react'; 3 | import { Provider } from 'mobx-react/native'; 4 | import { AppRegistry, View, BackAndroid, StatusBar } from 'react-native'; 5 | import { StyleProvider } from 'native-base'; 6 | import getTheme from '../../native-base-theme/components'; 7 | 8 | import Routes from '../container/routes'; 9 | import platform from '../../native-base-theme/variables/platform'; 10 | 11 | // import { enableLogging } from 'mobx-logger'; 12 | 13 | // if (process.env.NODE_ENV === 'development') { 14 | // enableLogging(); 15 | // } else { 16 | // console.log = function () {}; 17 | // } 18 | 19 | export default function (stores) { 20 | return class Root extends React.Component { 21 | constructor() { 22 | super(); 23 | this.state = { 24 | isLoading: false, 25 | isReady: false, 26 | }; 27 | } 28 | 29 | async componentWillMount() { 30 | await Expo.Font.loadAsync({ 31 | Roboto: require('native-base/Fonts/Roboto.ttf'), 32 | Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), 33 | Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'), 34 | }); 35 | this.setState({ isReady: true }); 36 | } 37 | 38 | render() { 39 | if (!this.state.isReady || this.state.isLoading) { 40 | return ; 41 | } 42 | 43 | return ( 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | } 53 | }; 54 | } 55 | -------------------------------------------------------------------------------- /src/container/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, FlatList } from 'react-native'; 3 | import { observer, inject } from 'mobx-react/native'; 4 | import { toJS } from 'mobx'; 5 | import { StackNavigator } from 'react-navigation'; 6 | import { Container, Content, Header, Footer, FooterTab, Button, ListItem } from 'native-base'; 7 | 8 | @inject('viewHome', 'domainList') 9 | @observer 10 | class Home extends Component { 11 | componentDidMount() { 12 | this.props.domainList.changeList({ 13 | id: 123, 14 | title: 'feed1', 15 | data: 'random text', 16 | live: true, 17 | }); 18 | } 19 | 20 | keyExtractor = item => item.id; 21 | 22 | render() { 23 | return ( 24 | 25 | 26 | 27 | Chat with me Sydney 28 | 29 | 33 | ( this.props.domainList.toggleLive(index)}> 34 | 35 | {item.title} 36 | 37 | {item.live 38 | ? 39 | : } 40 | )} 41 | /> 42 | 43 |
44 | 45 | 48 | 49 |
50 | 51 | ); 52 | } 53 | } 54 | 55 | Home.propTypes = {}; 56 | 57 | export default Home; 58 | -------------------------------------------------------------------------------- /src/container/login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, Button } from 'react-native'; 3 | import { Content, Form, Item, Input, Label, Icon } from 'native-base'; 4 | import { observer, inject } from 'mobx-react/native'; 5 | import { StackNavigator } from 'react-navigation'; 6 | import PropTypes from 'prop-types'; 7 | import LoginScreen from 'screens/login'; 8 | 9 | @inject('viewLogin', 'domainUser') 10 | @observer 11 | export default class Login extends React.Component { 12 | render() { 13 | const { navigate } = this.props.navigation; 14 | return navigate('Home')} onSignup={() => navigate('SignUp')} />; 15 | } 16 | } 17 | 18 | Login.propTypes = { 19 | navigation: PropTypes.object.isRequired, 20 | }; 21 | -------------------------------------------------------------------------------- /src/container/routes.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, Button } from 'react-native'; 3 | import { observer, inject } from 'mobx-react/native'; 4 | import { StackNavigator } from 'react-navigation'; 5 | import Login from './login'; 6 | import Home from './home'; 7 | import SignUp from './signup'; 8 | 9 | const stackNavigatorConfig = { 10 | initialRouteName: 'Login', 11 | }; 12 | 13 | export default (SimpleApp = StackNavigator( 14 | { 15 | Login: { screen: Login }, 16 | Home: { screen: Home }, 17 | SignUp: { screen: SignUp }, 18 | }, 19 | stackNavigatorConfig, 20 | )); 21 | -------------------------------------------------------------------------------- /src/container/signup.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, Button } from 'react-native'; 3 | import { Content, Form, Item, Input, Label, Icon } from 'native-base'; 4 | import { observer, inject } from 'mobx-react/native'; 5 | import { StackNavigator } from 'react-navigation'; 6 | import PropTypes from 'prop-types'; 7 | import SignUpScreen from '../../storybook/stories/screens/signup'; 8 | 9 | @inject('viewSignUp') 10 | @observer 11 | export default class SignUp extends React.Component { 12 | render() { 13 | const { navigate } = this.props.navigation; 14 | return navigate('Home')} />; 15 | } 16 | } 17 | 18 | SignUp.propTypes = { 19 | navigation: PropTypes.object.isRequired, 20 | }; 21 | -------------------------------------------------------------------------------- /src/models/list.js: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | 3 | export default class ListModel { 4 | @observable id; 5 | @observable title; 6 | @observable data; 7 | @observable live; 8 | 9 | constructor(obj) { 10 | this.id = obj.id; 11 | this.title = obj.title; 12 | this.data = obj.data; 13 | this.live = obj.live; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/models/user.js: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | 3 | export default class AuthUserModel { 4 | @observable _id; 5 | @observable name; 6 | @observable phoneNumber; 7 | @observable flatNo; 8 | @observable floorNo; 9 | @observable buildingNo; 10 | @observable deviceId; 11 | @observable expoToken; 12 | @observable image = ''; 13 | otp; 14 | verified; 15 | constructor(obj) { 16 | this.name = obj.name; 17 | this._id = obj._id; 18 | this.flatNo = obj.flatNo; 19 | this.floorNo = obj.floorNo; 20 | this.phoneNumber = obj.phoneNumber; 21 | this.buildingNo = obj.buildingNo; 22 | this.deviceId = obj.deviceId; 23 | this.otp = obj.otp; 24 | this.verified = obj.verified; 25 | this.image = obj.image; 26 | this.expoToken = obj.expoToken; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/stores/domain/list.js: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | import ListModel from '../../models/list'; 3 | 4 | export default class { 5 | @observable list = []; 6 | 7 | getData = async () => { 8 | const response = await fetch('http://'); 9 | const data = response.json; 10 | }; 11 | 12 | changeList = (data) => { 13 | const obj = new ListModel(data); 14 | this.setList(obj); 15 | }; 16 | 17 | @action 18 | toggleLive = (index) => { 19 | this.list[index].live = !this.list[index].live; 20 | }; 21 | 22 | @action 23 | setToggle(data) { 24 | this.list = data; 25 | } 26 | 27 | @action 28 | setList(data) { 29 | this.list.push(data); 30 | console.log(this.list); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/stores/domain/user.js: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | 3 | class AboutViewStore { 4 | @observable card1 = true; 5 | @observable card2 = false; 6 | @observable card3 = false; 7 | @observable text2 = ''; 8 | @observable text3 = ''; 9 | @action 10 | setCard1(data) { 11 | this.card1 = data; 12 | } 13 | @action 14 | setCard2(data) { 15 | this.card2 = data; 16 | } 17 | } 18 | // const AboutViewStore = new AboutviewStore(); 19 | export default AboutViewStore; 20 | -------------------------------------------------------------------------------- /src/stores/route.js: -------------------------------------------------------------------------------- 1 | class NavigationStore { 2 | @observable headerTitle = 'Index'; 3 | @observable.ref 4 | navigationState = { 5 | index: 0, 6 | routes: [{ key: 'Index', routeName: 'Index' }], 7 | }; 8 | 9 | // NOTE: the second param, is to avoid stacking and reset the nav state 10 | @action 11 | dispatch = (action, stackNavState = true) => { 12 | const previousNavState = stackNavState ? this.navigationState : null; 13 | return (this.navigationState = AppNavigator.router.getStateForAction(action, previousNavState)); 14 | }; 15 | } 16 | 17 | // NOTE: the top level component must be a reactive component 18 | @observer 19 | class App extends React.Component { 20 | constructor(props, context) { 21 | super(props, context); 22 | // initialize the navigation store 23 | this.store = new NavigationStore(); 24 | } 25 | 26 | render() { 27 | // patch over the navigation property with the new dispatch and mobx observed state 28 | return ( 29 | 35 | ); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/stores/view/home.js: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | 3 | export default class HomeViewStore { 4 | @observable card1 = true; 5 | 6 | @action 7 | customaction(data) { 8 | this.card1 = data; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/stores/view/login.js: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | 3 | export default class LoginViewStore { 4 | @observable card1 = true; 5 | 6 | @action 7 | customaction(data) { 8 | this.card1 = data; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/stores/view/signup.js: -------------------------------------------------------------------------------- 1 | import { observable, action } from 'mobx'; 2 | 3 | export default class SignUpViewStore { 4 | @observable card1 = true; 5 | 6 | @action 7 | customaction(data) { 8 | this.card1 = data; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | -------------------------------------------------------------------------------- /storybook/index.js: -------------------------------------------------------------------------------- 1 | import { getStorybookUI, configure } from '@storybook/react-native'; 2 | 3 | // import stories 4 | configure(() => { 5 | require('./stories'); 6 | }, module); 7 | 8 | // This assumes that storybook is running on the same host as your RN packager, 9 | // to set manually use, e.g. host: 'localhost' option 10 | const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true }); 11 | export default StorybookUI; 12 | -------------------------------------------------------------------------------- /storybook/stories/components/Button/index.android.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { TouchableNativeFeedback } from 'react-native'; 4 | 5 | const Button = props => 6 | 7 | {props.children} 8 | ; 9 | 10 | Button.propTypes = { 11 | children: PropTypes.node.isRequired, 12 | onPress: PropTypes.func, 13 | }; 14 | Button.defaultProps = { 15 | onPress: () => {}, 16 | }; 17 | 18 | export { Button as default }; 19 | -------------------------------------------------------------------------------- /storybook/stories/components/Button/index.ios.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { TouchableHighlight } from 'react-native'; 4 | 5 | const Button = props => 6 | 7 | {props.children} 8 | ; 9 | 10 | Button.propTypes = { 11 | children: PropTypes.node.isRequired, 12 | onPress: PropTypes.func, 13 | }; 14 | Button.defaultProps = { 15 | onPress: () => {}, 16 | }; 17 | 18 | export { Button as default }; 19 | -------------------------------------------------------------------------------- /storybook/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from 'react-native'; 3 | 4 | import { storiesOf } from '@storybook/react-native'; 5 | import { action } from '@storybook/addon-actions'; 6 | import { linkTo } from '@storybook/addon-links'; 7 | 8 | import Button from './components/Button'; 9 | import LoginScreen from './screens/login'; 10 | import HomeScreen from './screens/home'; 11 | import SignUpScreen from './screens/signup'; 12 | 13 | storiesOf('Login', module).add('Login', () => ); 14 | storiesOf('Home', module).add('Home', () => ); 15 | storiesOf('SignUp', module).add('SignUp', () => ); 16 | 17 | storiesOf('Button', module) 18 | .add('with text', () => 19 | (), 22 | ) 23 | .add('with some emoji', () => 24 | (), 27 | ); 28 | -------------------------------------------------------------------------------- /storybook/stories/screens/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { PropTypes, View, Text, Button } from 'react-native'; 3 | import { Content, Form, Item, Input, Label, Icon } from 'native-base'; 4 | 5 | const HomeScreen = props => 6 | ( 7 | Chat with me Sydney 8 | ); 9 | 10 | export default HomeScreen; 11 | -------------------------------------------------------------------------------- /storybook/stories/screens/login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, Button } from 'react-native'; 3 | import { Content, Form, Item, Input, Label, Icon } from 'native-base'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const Login = props => 7 | ( 8 | 9 |
10 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |