├── test.js
├── .gitignore
├── .babelrc
├── src
    └── index.js
├── README.md
└── package.json


/test.js:
--------------------------------------------------------------------------------
1 | // write tests!!!
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | *.log
4 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2", "react-native"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Platform } from 'react-native';
 2 | 
 3 | export function create(styles) {
 4 |   const platformStyles = {};
 5 |   Object.keys(styles).forEach((name) => {
 6 |     let { ios, android, ...style } = { ...styles[name] };
 7 |     if (ios && Platform.OS === 'ios') {
 8 |       style = { ...style, ...ios };
 9 |     }
10 |     if (android && Platform.OS === 'android') {
11 |       style = { ...style, ...android };
12 |     }
13 | 
14 |     if (name === 'ios' && Platform.OS === 'ios') {
15 |       Object.keys(style).forEach((styleName) => {
16 |         if (platformStyles[styleName]) {
17 |           platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
18 |         }
19 |       });
20 |     }
21 | 
22 |     if (name === 'android' && Platform.OS === 'android') {
23 |       Object.keys(style).forEach((styleName) => {
24 |         if (platformStyles[styleName]) {
25 |           platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
26 |         }
27 |       });
28 |     }
29 | 
30 |     if (name !== 'ios' && name !== 'android') {
31 |       platformStyles[name] = style;
32 |     }
33 |   });
34 | 
35 |   return StyleSheet.create(platformStyles);
36 | }
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React Native Platform Stylesheet
 2 | ===
 3 | 
 4 | Seperated out the [F8StyleSheet](https://github.com/fbsamples/f8app/blob/master/js/common/F8StyleSheet.js) to a module.
 5 | 
 6 | ### Get started
 7 | 
 8 | 1. `npm install react-native-platform-stylesheet`
 9 | 
10 | 2. Use it in your project:
11 | 
12 |   ```js
13 |   import { create } from 'react-native-platform-stylesheet';
14 |   
15 |   
16 |   const Profile = () => (
17 |     <View style={styles.container}>
18 |       {/* ... */}
19 |     </View>
20 |   );
21 |   
22 |   const styles = create({
23 |     container: {
24 |       flex: 1,
25 |       ios: {
26 |         backgroundColor: 'salmon'
27 |       },
28 |       android: {
29 |         backgroundColor: 'tomato'
30 |       }
31 |     }
32 |   });
33 |   ```
34 |   
35 |   or
36 |   
37 |   ```js
38 |   import { create } from 'react-native-platform-stylesheet';
39 |   
40 |   
41 |   const Profile = () => (
42 |     <View style={styles.container}>
43 |       {/* ... */}
44 |     </View>
45 |   );
46 |   
47 |   const styles = create({
48 |     container: {
49 |       flex: 1
50 |     },
51 |     ios: {
52 |       container: {
53 |         backgroundColor: 'salmon'
54 |       }
55 |     },
56 |     android: {
57 |       container: {
58 |         backgroundColor: 'tomato'
59 |       }
60 |     }
61 |   });
62 |   ```
63 |   
64 |   *Note: in the second example, make sure that `ios` and `android` styles are defined in the end of the object.*
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-platform-stylesheet",
 3 |   "version": "0.0.6",
 4 |   "description": "Platform Specific Stylesheet for React Native",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "prepublish": "./node_modules/.bin/babel --presets es2015,stage-2,react-native -d lib/ src/",
 8 |     "test": "npm run compile && mocha --compilers js:babel-core/register"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/knowbody/react-native-platform-stylesheet.git"
13 |   },
14 |   "keywords": [
15 |     "react-native",
16 |     "stylesheet",
17 |     "ios",
18 |     "android",
19 |     "platform",
20 |     "react"
21 |   ],
22 |   "files": [
23 |     "lib"
24 |   ],
25 |   "author": "Mateusz Zatorski <mateuszzatorski@gmail.com> (https://github.com/knowbody)",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/knowbody/react-native-platform-stylesheet/issues"
29 |   },
30 |   "homepage": "https://github.com/knowbody/react-native-platform-stylesheet#readme",
31 |   "peerDependencies": {
32 |     "react-native": ">=0.24.1"
33 |   },
34 |   "devDependencies": {
35 |     "babel-cli": "^6.8.0",
36 |     "babel-core": "^6.8.0",
37 |     "babel-preset-es2015": "^6.6.0",
38 |     "babel-preset-react-native": "^1.7.0",
39 |     "babel-preset-stage-2": "^6.5.0",
40 |     "mocha": "^2.4.5",
41 |     "react-native": "^0.24.1"
42 |   },
43 |   "dependencies": {
44 |     "babel-polyfill": "^6.8.0"
45 |   }
46 | }
47 | 


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