chore: add babel preset react native on examples

examples/react-native-flow/.babelrc

@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "@babel/preset-flow"
-  ]
+  "presets": ["react-native", "@babel/preset-flow"]
 }

examples/react-native-flow/package.json

@@ -9,10 +9,12 @@
   "dependencies": {
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-native": "^0.56.0",
     "styled-components": "^3.4.2"
   },
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "babel-preset-react-native": "^5.0.2",
     "docz": "^0.10.3",
     "flow-bin": "^0.79.1",
     "flow-typed": "^2.5.1"

examples/react-native-flow/src/components/Alert.jsx

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Fragment } from 'react'
+import { Text as BaseText } from 'react-native'
 import styled from 'styled-components/native'
 
 const kinds = {
@@ -23,11 +24,10 @@ const AlertStyled = styled.View`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
-  color: white;
   background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
-export const Text = styled.Text`
+export const Text = styled(BaseText)`
   color: white;
 `
 

examples/react-native-prop-types/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/react-native-prop-types/src/components/Alert.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react'
+import { Text as BaseText } from 'react-native'
 import styled from 'styled-components/native'
 import * as t from 'prop-types'
 
@@ -13,11 +14,10 @@ const AlertStyled = styled.View`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
-  color: white;
   background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
-export const Text = styled.Text`
+export const Text = styled(BaseText)`
   color: white;
 `
 

examples/react-native-prop-types/src/components/Alert.mdx

@@ -16,7 +16,7 @@ import { Alert, Text } from './Alert'
 
 <Playground>
   <Alert>
-    <Text>Some message</Text>
+    <Text>Hello world</Text>
   </Alert>
 </Playground>
 

packages/rehype-docz/src/index.ts

@@ -30,6 +30,7 @@ const removePlayground = (code: string) => {
 const addCodeProp = (imports: string[]) => async (node: any, idx: number) => {
   const name = componentName(node.value)
   const tagOpen = new RegExp(`^\\<${name}`)
+
   if (isPlayground(name)) {
     const formatted = await format(nodeToString(node))
     const code = formatted.slice(1, Infinity)