- Familiar CSS syntax: Using CSS syntax makes it easier to copy/paste code from devtools and the internet, and a huge productivity boost.
- SCSS like & shorhand: Super nice to write things like
&:hover
without having to write selectors again. - Nesting media queries: Nice to nest media queries inside a style block instead of having to declare it like plain CSS.
- Support for CSS animations: CSS animations are great :)
- No coupling to HTML tag: HTML tags have semantic meaning, and coupling styles to HTML tags makes it harder to re-use the same styles, for example, sometimes some of my buttons and links have similar styles and I don't wanna repeat them.
- Easy to override styles: Overriding styles is one of the main pain points. Many libs don't do anything special and just produce different class names for the styles I declare. Due to no class name having higher specificity, the styles depend on the declaration order which can produce inconsistent
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @flow */ | |
import React, { PureComponent, PropTypes } from 'react'; | |
import { | |
Animated, | |
View, | |
StyleSheet, | |
ScrollView, | |
} from 'react-native'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @flow */ | |
import types from 'ast-types'; | |
import { parse } from 'babylon'; | |
const config = { | |
"sourceType": "module", | |
"plugins": [ | |
"jsx", | |
"flow", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const dashify = text => text.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); | |
const unitless = { | |
animationIterationCount: true, | |
borderImageOutset: true, | |
borderImageSlice: true, | |
borderImageWidth: true, | |
boxFlex: true, | |
boxFlexGroup: true, | |
boxOrdinalGroup: true, | |
columnCount: true, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"extends": ["tslint:recommended", "tslint-config-prettier"], | |
"rulesDirectory": ["tslint-plugin-prettier", "tslint-microsoft-contrib"], | |
"rules": { | |
"prettier": true, | |
"deprecation": true, | |
"interface-over-type-literal": false, | |
"member-access": [true, "no-public"], | |
"no-default-export": false, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import { Animated, Keyboard, KeyboardEvent, Platform } from 'react-native'; | |
type Props = { | |
offset?: number; | |
}; | |
type State = { | |
keyboardHeightAnim: Animated.Value; | |
}; |
In React Navigation 5, we use conditional rendering to show auth screens when user is not logged in. This works well, but makes it difficult to use when using it with deep links.
Consider the following flow:
- User opens the app from a deep link to a screen which is only accessible to logged in users
- React Navigation tries to handle the deep link
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/android/build.gradle b/android/build.gradle | |
index 525cb31..6af104d 100644 | |
--- a/android/build.gradle | |
+++ b/android/build.gradle | |
@@ -36,7 +36,30 @@ def getExtOrIntegerDefault(name) { | |
return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["MyLib_" + name]).toInteger() | |
} | |
+def supportsNamespace() { | |
+ def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.') |