refactor(example): 🔨 move example and dependencies out of main package

.eslintignore

@@ -0,0 +1,2 @@
+
+example/*

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  // extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  rules: {
+    'member-access': 0,
+    'interface-name': 0,
+    'ordered-imports': 0,
+    'object-literal-sort-keys': 0,
+    'variable-name': 0,
+    'one-variable-per-declaration': 0,
+    'no-empty': 0,
+    'no-console': 0,
+    'no-shadowed-variable': 0,
+    'no-extra-boolean-cast': 0,
+  },
+}

.npmignore

@@ -26,3 +26,4 @@ flow-typedefs/
 yarn-error.log
 web-build/
 types.d.ts
+example

babel.config.js

@@ -1,6 +1,10 @@
 module.exports = function (api) {
   api.cache(true)
   return {
-    presets: ['babel-preset-expo', '@babel/preset-typescript'],
+    presets: ['module:metro-react-native-babel-preset'],
+    plugins: [
+      '@babel/plugin-transform-flow-strip-types',
+      '@babel/plugin-proposal-unicode-property-regex',
+    ],
   }
 }

example/.expo-shared/assets.json

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

example/.gitignore

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

App.tsx → example/App.tsx

@@ -1,16 +1,23 @@
-import { MaterialIcons } from '@expo/vector-icons'
-import { Asset, Linking } from 'expo'
+import MaterialIcons from '@expo/vector-icons/MaterialIcons'
+import * as Linking from 'expo-linking'
 import AppLoading from 'expo-app-loading'
 import React, { Component } from 'react'
 import { StyleSheet, View, Text, Platform } from 'react-native'
-import { Bubble, GiftedChat, SystemMessage, IMessage, Send, SendProps } from './src'
+import {
+  Bubble,
+  GiftedChat,
+  SystemMessage,
+  IMessage,
+  Send,
+  SendProps,
+} from 'react-native-gifted-chat'
 
 import AccessoryBar from './example-expo/AccessoryBar'
 import CustomActions from './example-expo/CustomActions'
 import CustomView from './example-expo/CustomView'
-import NavBar from './example-expo/NavBar'
 import messagesData from './example-expo/data/messages'
 import earlierMessages from './example-expo/data/earlierMessages'
+import { NavBar } from './components/navbar'
 
 const styles = StyleSheet.create({
   container: { flex: 1 },

example/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "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/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            'react-native-gifted-chat': '../src',
+          },
+        },
+      ],
+    ],
+  }
+}

example/components/navbar.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Text, Platform, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+export function NavBar() {
+  if (Platform.OS === 'web') {
+    return null
+  }
+  return (
+    <SafeAreaView
+      style={{
+        backgroundColor: '#f5f5f5',
+        alignItems: 'center',
+      }}
+    >
+      <Text>💬 Gifted Chat{'\n'}</Text>
+    </SafeAreaView>
+  )
+}

example-expo/CustomActions.tsx → example/example-expo/CustomActions.tsx

@@ -39,7 +39,7 @@ export default class CustomActions extends React.Component {
             return
           case 2:
             getLocationAsync(onSend)
-          default:
+            return
         }
       },
     )

example-expo/CustomView.tsx → example/example-expo/CustomView.tsx

@@ -1,4 +1,4 @@
-import { Linking } from 'expo'
+import * as Linking from 'expo-linking'
 import PropTypes from 'prop-types'
 import React from 'react'
 import {
@@ -9,8 +9,7 @@ import {
   View,
   Text,
 } from 'react-native'
-
-import MapView from './MapView'
+import MapView from 'react-native-maps'
 
 export default class CustomView extends React.Component<{
   currentMessage: any

example-expo/mediaUtils.ts → example/example-expo/mediaUtils.ts

@@ -1,11 +1,13 @@
-import { Linking } from 'expo'
+import * as Linking from 'expo-linking'
 import * as Location from 'expo-location'
 import * as Permissions from 'expo-permissions'
 import * as ImagePicker from 'expo-image-picker'
 
 import { Alert } from 'react-native'
 
-export default async function getPermissionAsync(permission) {
+export default async function getPermissionAsync(
+  permission: Permissions.PermissionType,
+) {
   const { status } = await Permissions.askAsync(permission)
   if (status !== 'granted') {
     const permissionName = permission.toLowerCase().replace('_', ' ')
@@ -27,7 +29,9 @@ export default async function getPermissionAsync(permission) {
   return true
 }
 
-export async function getLocationAsync(onSend) {
+export async function getLocationAsync(
+  onSend: (locations: { location: Location.LocationObjectCoords }[]) => void,
+) {
   if (await Location.requestForegroundPermissionsAsync()) {
     const location = await Location.getCurrentPositionAsync({})
     if (location) {
@@ -36,7 +40,9 @@ export async function getLocationAsync(onSend) {
   }
 }
 
-export async function pickImageAsync(onSend) {
+export async function pickImageAsync(
+  onSend: (images: { image: string }[]) => void,
+) {
   if (await ImagePicker.requestMediaLibraryPermissionsAsync()) {
     const result = await ImagePicker.launchImageLibraryAsync({
       allowsEditing: true,
@@ -50,7 +56,9 @@ export async function pickImageAsync(onSend) {
   }
 }
 
-export async function takePictureAsync(onSend) {
+export async function takePictureAsync(
+  onSend: (images: { image: string }[]) => void,
+) {
   if (await ImagePicker.requestCameraPermissionsAsync()) {
     const result = await ImagePicker.launchCameraAsync({
       allowsEditing: true,

example/metro.config.js

@@ -0,0 +1,26 @@
+const { getDefaultConfig } = require('@expo/metro-config')
+const path = require('path')
+
+const defaultConfig = getDefaultConfig(__dirname)
+
+defaultConfig.watchFolders = [
+  ...defaultConfig.watchFolders,
+  path.resolve(__dirname, '../src'),
+]
+
+defaultConfig.resolver.extraNodeModules = new Proxy(
+  {},
+  {
+    get: (target, name) => {
+      if (target.hasOwnProperty(name)) {
+        return target[name]
+      }
+      if (name === 'react-native-gifted-chat') {
+        return path.join(process.cwd(), `../src`)
+      }
+      return path.join(process.cwd(), `node_modules/${name}`)
+    },
+  },
+)
+
+module.exports = defaultConfig

example/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "example",
+  "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": "~44.0.0",
+    "expo-app-loading": "~1.3.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linking": "3.0.0",
+    "expo-location": "~14.0.1",
+    "expo-permissions": "~13.1.0",
+    "expo-status-bar": "~1.2.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-communications": "2.2.1",
+    "react-native-lightbox": "0.8.1",
+    "react-native-maps": "0.29.4",
+    "react-native-parsed-text": "0.0.22",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
+    "react-native-typing-animation": "0.1.7",
+    "react-native-web": "0.17.1",
+    "use-memo-one": "^1.1.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@expo/react-native-action-sheet": "3.13.0",
+    "@react-navigation/native": "6.0.10",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "babel-plugin-module-resolver": "4.1.0",
+    "typescript": "~4.3.5"
+  },
+  "private": true
+}

example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}