diff --git a/App.js b/App.js index 6cd0aa8fb..66359c1bf 100644 --- a/App.js +++ b/App.js @@ -1,13 +1,7 @@ import React, { Component } from 'react'; import { Provider } from 'react-redux'; -import { - AppRegistry, - AsyncStorage, - Image, - StyleSheet, - View, - LayoutAnimation, -} from 'react-native'; +import styled from 'styled-components/native'; +import { AppRegistry, AsyncStorage, LayoutAnimation } from 'react-native'; import { persistStore } from 'redux-persist'; import createEncryptor from 'redux-persist-transform-encrypt'; import DeviceInfo from 'react-native-device-info'; @@ -20,18 +14,17 @@ import { determineLanguage } from 'locale'; import { GitPoint } from './routes'; import { configureStore } from './root.store'; -const styles = StyleSheet.create({ - logoContainer: { - backgroundColor: colors.white, - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - logo: { - width: 100, - height: 100, - }, -}); +const Container = styled.View` + align-items: center; + background-color: ${() => colors.white} + flex: 1; + justify-content: center; +`; + +const Logo = styled.Image` + height: 100; + width: 100; +`; if (console) { console.disableYellowBox = true; // eslint-disable-line no-console @@ -88,12 +81,9 @@ class App extends Component { render() { if (!this.state.rehydrated) { return ( - - - + + + ); } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bc970a2e8..85f1c7c62 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -52,6 +52,9 @@ Translation contributions are always welcome! If you happen to speak/read any la 4. And lastly, in order for the language to be displayed in the options screen, we'll need to add a [two-letter code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) in lowercase (for example: _es_ for Spanish) and the native language name (for example: _EspaƱa_ for Spanish) to the [language-settings.js](https://github.com/gitpoint/git-point/blob/master/src/auth/screens/language-settings.js) file. Please make sure the two-letter code matches the code used for the `moment` library to allow for date/time compatibility (you can view the list [here](https://github.com/moment/moment/tree/develop/locale)). 5. Test out selecting your new translation and if it all looks good, submit that PR in! :smile: +## Styled Components +We're moving from React Native's styles implementation and we are start using [Styled Components](https://www.styled-components.com/) This will let us write the styles for the app in a more _css way_. If you like to know why we're taking this decision you can read [This issue](https://github.com/gitpoint/git-point/issues/480) + ## Troubleshooting If you happen to see an error like below when you try to run the application: diff --git a/package.json b/package.json index 1b8704df1..f55cc73ee 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,8 @@ "redux-persist-transform-encrypt": "^1.0.2", "redux-thunk": "^2.2.0", "reselect": "^3.0.1", - "rn-app-intro": "^0.0.4" + "rn-app-intro": "^0.0.4", + "styled-components": "^2.2.1" }, "devDependencies": { "@commitlint/cli": "^3.1.0", diff --git a/yarn.lock b/yarn.lock index 9a8d2bc96..b20ef19a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,7 +1171,7 @@ base64-js@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978" -base64-js@^1.1.2: +base64-js@^1.0.2, base64-js@^1.1.2: version "1.2.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886" @@ -1293,6 +1293,13 @@ buffer-crc32@~0.2.3: version "0.2.13" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" +buffer@^5.0.3: + version "5.0.8" + resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24" + dependencies: + base64-js "^1.0.2" + ieee754 "^1.1.4" + builtin-modules@^1.0.0, builtin-modules@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" @@ -1814,6 +1821,18 @@ csrf@~3.0.0: tsscmp "1.0.5" uid-safe "2.1.4" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + +css-to-react-native@^2.0.3: + version "2.0.4" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b" + dependencies: + css-color-keywords "^1.0.0" + fbjs "^0.8.5" + postcss-value-parser "^3.3.0" + cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": version "0.3.2" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b" @@ -2600,6 +2619,18 @@ fbjs@0.8.12: setimmediate "^1.0.5" ua-parser-js "^0.7.9" +fbjs@^0.8.16, fbjs@^0.8.5: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.9: version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" @@ -3072,6 +3103,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoist-non-react-statics@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" + hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.2.2.tgz#c0eca5a7d5a28c5ada3107eb763b01da6bfa81fb" @@ -3184,6 +3219,10 @@ iconv-lite@0.4.18, iconv-lite@^0.4.17, iconv-lite@~0.4.13: version "0.4.18" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" +ieee754@^1.1.4: + version "1.1.8" + resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4" + ignore@^3.2.0: version "3.3.3" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d" @@ -3410,6 +3449,10 @@ is-fullwidth-code-point@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" +is-function@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" + is-glob@^2.0.0, is-glob@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863" @@ -3461,6 +3504,12 @@ is-path-inside@^1.0.0: dependencies: path-is-inside "^1.0.1" +is-plain-object@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" + dependencies: + isobject "^3.0.1" + is-posix-bracket@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4" @@ -3529,6 +3578,10 @@ isobject@^2.0.0: dependencies: isarray "1.0.0" +isobject@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" + isomorphic-fetch@^2.1.1: version "2.2.1" resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" @@ -5092,6 +5145,10 @@ pos@^0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/pos/-/pos-0.4.2.tgz#20e9c77fbeedcc356823cea63c7585cace93be2a" +postcss-value-parser@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -5153,6 +5210,14 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" +prop-types@^15.5.4: + version "15.6.0" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + proxy-agent@2: version "2.1.0" resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-2.1.0.tgz#a3a2b3866debfeb79bb791f345dc9bc876e7ff86" @@ -6462,6 +6527,24 @@ structured-source@^3.0.2: dependencies: boundary "^1.0.1" +styled-components@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.1.tgz#f4835f1001c37bcc301ac3865b5d93466de4dd5b" + dependencies: + buffer "^5.0.3" + css-to-react-native "^2.0.3" + fbjs "^0.8.9" + hoist-non-react-statics "^1.2.0" + is-function "^1.0.1" + is-plain-object "^2.0.1" + prop-types "^15.5.4" + stylis "^3.2.1" + supports-color "^3.2.3" + +stylis@^3.2.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea" + superagent-proxy@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/superagent-proxy/-/superagent-proxy-1.0.2.tgz#92d3660578f618ed43a82cf8cac799fe2938ba2d"