docs: fix docz + react-native example

Author: rakannimer

examples/react-native/doczrc.js

@@ -1,4 +1,3 @@
 export default {
   title: 'React Native',
-  native: true,
 }

examples/react-native/gatsby-node.js

@@ -0,0 +1,9 @@
+exports.onCreateWebpackConfig = args => {
+  args.actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        'react-native': 'react-native-web',
+      },
+    },
+  })
+}

examples/react-native/package.json

@@ -13,14 +13,12 @@
     "build": "docz build"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/primitives": "^10.0.14",
     "docz": "next",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-art": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-native-web": "^0.11.5",
+    "react-native-web": "^0.11.7",
     "scheduler": "^0.15.0"
   },
   "devDependencies": {

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

@@ -1,7 +1,6 @@
-import React, { Fragment } from 'react'
-import { Text as BaseText } from 'react-native'
-import styled from '@emotion/primitives'
-import * as t from 'prop-types'
+import React from 'react'
+import t from 'prop-types'
+import { View, Text } from 'react-native'
 
 const kinds = {
   info: '#5352ED',
@@ -10,21 +9,22 @@ const kinds = {
   warning: '#FFA502',
 }
 
-const AlertStyled = styled.View`
-  padding: 15px 20px;
-  background: white;
-  border-radius: 3px;
-  background: ${({ kind = 'info' }) => kinds[kind]};
-`
-
-export const Text = styled(BaseText)`
-  color: white;
-`
-
-export const Alert = ({ kind = 'info', ...props }) => (
-  <AlertStyled {...props} kind={kind} />
+const AlertStyled = ({ children, kind, ...rest }) => (
+  <View
+    style={{
+      padding: 20,
+      background: 'white',
+      borderRadius: 3,
+      background: kinds[kind],
+    }}
+    {...rest}
+  >
+    <Text style={{ color: 'white' }}>{children}</Text>
+  </View>
 )
 
+export const Alert = props => <AlertStyled {...props} />
+
 Alert.propTypes = {
   kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }

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

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, Props } from 'docz'
-import { Alert, Text } from './Alert'
+import { Alert } from './Alert'
 
 # Alert
 
@@ -15,28 +15,14 @@ import { Alert, Text } from './Alert'
 ## Basic usage
 
 <Playground>
-  <Alert>
-    <Text>Hello world</Text>
-  </Alert>
+  <Alert>Some message</Alert>
 </Playground>
 
 ## Using different kinds
 
 <Playground>
-  <Alert kind="info"><Text>Some message</Text></Alert>
-  <Alert kind="positive"><Text>Some message</Text></Alert>
-  <Alert kind="negative"><Text>Some message</Text></Alert>
-  <Alert kind="warning"><Text>Some message</Text></Alert>
-</Playground>
-
-
-## Use with children as a function
-
-<Playground>
-  {() => {
-    const message = 'Hello world'
-    return (
-      <Alert><Text>{message}</Text></Alert>
-    )
-  }}
-</Playground>
+  <Alert kind="info">Some message</Alert>
+  <Alert kind="positive">Some message</Alert>
+  <Alert kind="negative">Some message</Alert>
+  <Alert kind="warning">Some message</Alert>
+</Playground>