<NME> react-native.md
<BEF> ## React Native

styled-components can be used with React Native in the same way and with the
same import. Try this example with [Snack by Expo](https://snack.expo.io/@danielmschmidt/styled-components).

> If you're not yet on v3 or higher, you will need to import styled-components
> on React Native from `styled-components/native`. This still works in v3
> but has been deprecated.

```jsx
import React from 'react'
import styled from 'styled-components'

const StyledView = styled.View`
  background-color: papayawhip;
`

const StyledText = styled.Text`
  color: palevioletred;
`

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    )
  }
}
```

We also support more complex styles (like `transform`), which would normally
be an array, and shorthands (e.g. for `margin`) thanks to
[`css-to-react-native`](https://github.com/styled-components/css-to-react-native)!

> Note that the `flex` property works like CSS shorthand, and not the legacy
> `flex` property in React Native. Setting `flex: 1` sets `flexShrink`
> to `1` in addition to setting `flexGrow` to `1` and `flexBasis` to `0`.

Imagine how you'd write the property in React Native, guess how you'd transfer
it to CSS, and you're probably right:

```jsx
const RotatedBox = styled.View`
  transform: rotate(90deg);
  text-shadow-offset: 10px 5px;
  font-variant: small-caps;
  margin: 5px 7px 2px;
`
```

Some of the differences to the web-version are, that you cannot use the
`keyframes` and `createGlobalStyle` helpers since React Native doesn't support
keyframes or global styles. We will also warn you if you use media queries or
nest your CSS.

> In v2 we support percentages. To make this possible we need to enforce units
> for all shorthands. If you're migrating to v2,
> [a codemod is available](https://github.com/styled-components/styled-components-native-code-mod).

<MSG> revise RN usage instruction

<DFF> @@ -3,13 +3,9 @@
 styled-components can be used with React Native in the same way and with the
 same import. Try this example with [Snack by Expo](https://snack.expo.io/@danielmschmidt/styled-components).
 
-> If you're not yet on v3 or higher, you will need to import styled-components
-> on React Native from `styled-components/native`. This still works in v3
-> but has been deprecated.
-
 ```jsx
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/native'
 
 const StyledView = styled.View`
   background-color: papayawhip;
@@ -58,3 +54,7 @@ nest your CSS.
 > In v2 we support percentages. To make this possible we need to enforce units
 > for all shorthands. If you're migrating to v2,
 > [a codemod is available](https://github.com/styled-components/styled-components-native-code-mod).
+
+### Simpler usage with the metro bundler
+
+If you'd prefer to just import `styled-components` instead of `styled-components/native`, you can add a [`resolverMainFields` configuration](https://facebook.github.io/metro/docs/en/configuration.html#resolver-options) that includes `"react-native"`. This used to be supported in metro by default (and currently does work in haul) but appears to have been removed at some point.

{'addition_count': 5, 'commit_subject': 'revise RN usage instruction', 'deletion_count': 5, 'file_extension': '.md', 'lang': 'md', 'license': 'mit', 'repo_name': 'styled-components/styled-components-website'}