feat: init expo example app (#155)

* add example expo app

* fix lint

* update Button.tsx to match styles with example

* add example-expo to exclude in tsconfig.build.json

* Init default variants in example-expo (to be fixed)

* remove redundant space

* install gesture-handler & reanimated & notificated from repo link

* setup notificated default variants in example-expo

* remove tsconfig.json from example-expo

example-expo/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

example-expo/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

example-expo/App.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { SafeAreaView, StyleSheet } from 'react-native'
+import { DefaultExamples } from './src/screens/DefaultExamples'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { createNotifications } from 'react-native-notificated'
+
+const { NotificationsProvider } = createNotifications({
+  isNotch: true,
+})
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NotificationsProvider />
+      <SafeAreaView style={styles.container}>
+        <DefaultExamples />
+      </SafeAreaView>
+    </GestureHandlerRootView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+})

example-expo/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "example-expo",
+    "slug": "example-expo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

example-expo/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  }
+}

example-expo/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "example-expo",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~45.0.0",
+    "expo-status-bar": "~1.3.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-gesture-handler": "~2.2.1",
+    "react-native-notificated": "https://github.com/TheWidlarzGroup/react-native-notificated",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-web": "0.17.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.66.13",
+    "typescript": "~4.3.5"
+  },
+  "private": true
+}

example-expo/src/components/Button.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Text, StyleSheet } from 'react-native'
+
+interface ButtonProps {
+  variant: 'error' | 'success' | 'info' | 'warning' | 'primary'
+  onPress: () => void
+  title?: string
+}
+
+export const Button = (p: ButtonProps) => {
+  return (
+    <Text style={[s[p.variant], s.label]} onPress={p.onPress}>
+      {p.title ?? `Emit ${p.variant}`}
+    </Text>
+  )
+}
+
+const s = StyleSheet.create({
+  label: {
+    padding: 10,
+    borderWidth: 1,
+    backgroundColor: 'white',
+    marginHorizontal: 24,
+    borderRadius: 10,
+    textAlign: 'center',
+    marginVertical: 6,
+    color: 'black',
+    fontWeight: '600',
+  },
+  primary: {
+    borderColor: 'black',
+  },
+  error: {
+    borderColor: 'red',
+  },
+  warning: {
+    borderColor: 'orange',
+    color: 'orange',
+  },
+  info: {
+    borderColor: 'blue',
+  },
+  success: {
+    borderColor: 'green',
+  },
+})

example-expo/src/screens/DefaultExamples.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useNotifications } from 'react-native-notificated'
+import { Button } from '../components/Button'
+
+export const DefaultExamples = () => {
+  const { notify } = useNotifications()
+  return (
+    <>
+      <View style={s.container}>
+        <Button
+          variant="success"
+          onPress={() =>
+            notify('success', {
+              params: { title: 'Hello!', description: 'Some text goes here...' },
+            })
+          }
+        />
+        <Button
+          variant="error"
+          onPress={() =>
+            notify('error', { params: { title: 'Hello!', description: 'Some text goes here...' } })
+          }
+        />
+        <Button
+          variant="warning"
+          onPress={() =>
+            notify('warning', {
+              params: { title: 'Hello!', description: 'Some text goes here...' },
+            })
+          }
+        />
+        <Button
+          variant="info"
+          onPress={() =>
+            notify('info', { params: { title: 'Hello!', description: 'Some text goes here...' } })
+          }
+        />
+      </View>
+    </>
+  )
+}
+
+const s = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    marginBottom: 24,
+  },
+})