Modified for flatlist (from FaridSafi#629) (FaridSafi#705)

Modified for FlatList

.eslintignore

@@ -3,3 +3,4 @@ android
 ios
 example
 example-slack-message
+example-expo

.gitignore

@@ -6,4 +6,5 @@ TODO.md
 
 .idea
 .vscode
-*.log
+Exponent-*.app
+*.log

.npmignore

@@ -1,8 +1,10 @@
 example/
 example-expo/
 example-slack-message/
-TODO.md
 screenshots/
 .babelrc
 tests/
+README.md
+ISSUE_TEMPLATE.md
+circle.yml
 codecov.yml

.travis.yml

@@ -3,8 +3,8 @@ node_js:
   - "node"
 cache: false
 before_install:
-  - yarn global add exp
+  - yarn global add exp@50.0.0
 script:
-  - 'export BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then echo "$TRAVIS_REPO_SLUG"; else echo "$TRAVIS_PULL_REQUEST_SLUG#$TRAVIS_PULL_REQUEST_BRANCH"; fi)'
-  - 'echo "BRANCH=$BRANCH"'
-  - 'export BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then yarn deploy; else yarn appr; fi)'
+  - 'export BRANCH="$TRAVIS_PULL_REQUEST_SLUG#$TRAVIS_PULL_REQUEST_BRANCH"'
+  - 'echo $BRANCH'
+  - 'if [ "$TRAVIS_PULL_REQUEST_SLUG" != "FaridSafi/react-native-gifted-chat" ]; then echo "No appr because external PR"; else yarn appr; fi'

.watchmanconfig

@@ -1,3 +1,3 @@
 {
-  "ignore_dirs": [".git", "node_modules", "example"]
+  "ignore_dirs": [".git", "node_modules"]
 }

example-expo/App.js

@@ -1,14 +1,16 @@
-/* eslint no-alert: 0, jsx-a11y/accessible-emoji: 0  */
-
 import React, { Component } from 'react';
+import { Asset, AppLoading } from 'expo';
 import { View, StyleSheet, Linking } from 'react-native';
 
 import { GiftedChat } from 'react-native-gifted-chat';
+import Sentry from 'sentry-expo';
 
 import messagesData from './data';
 import NavBar from './NavBar';
 import CustomView from './CustomView';
 
+Sentry.config('https://[email protected]/276804').install();
+
 const styles = StyleSheet.create({
   container: { flex: 1 },
 });
@@ -20,18 +22,21 @@ export default class App extends Component {
 
   constructor(props) {
     super(props);
+
     this.state = {
       messages: [],
       step: 0,
+      appIsReady: false,
     };
 
     this.onSend = this.onSend.bind(this);
     this.parsePatterns = this.parsePatterns.bind(this);
   }
 
-  componentWillMount() {
+  async componentWillMount() {
     // init with only system messages
-    this.setState({ messages: messagesData.filter((message) => message.system) });
+    await Asset.fromModule(require('./assets/avatar.png')).downloadAsync();
+    this.setState({ messages: messagesData.filter((message) => message.system), appIsReady: true });
   }
 
   onSend(messages = []) {
@@ -40,7 +45,7 @@ export default class App extends Component {
       messages: GiftedChat.append(previousState.messages, [{ ...messages[0], sent: true, received: true }]),
       step,
     }));
-    setTimeout(() => this.botSend(step), 1500 + Math.round(Math.random() * 1000));
+    setTimeout(() => this.botSend(step), 1200 + Math.round(Math.random() * 1000));
   }
 
   botSend(step = 0) {
@@ -59,19 +64,23 @@ export default class App extends Component {
     return [
       {
         pattern: /#(\w+)/,
-        style: { ...linkStyle, color: 'orange' },
+        style: { ...linkStyle, color: 'darkorange' },
         onPress: () => Linking.openURL('http://gifted.chat'),
       },
     ];
   }
   render() {
+    if (!this.state.appIsReady) {
+      return <AppLoading />;
+    }
     return (
-      <View style={styles.container}>
+      <View style={styles.container} accessible accessibilityLabel="main" testID="main">
         <NavBar />
         <GiftedChat
           messages={this.state.messages}
           onSend={this.onSend}
           renderCustomView={CustomView}
+          keyboardShouldPersistTaps="never"
           user={{
             _id: 1,
           }}

example-expo/CustomView.js

@@ -29,7 +29,6 @@ export default function CustomView(props) {
           zoomEnabled={false}
         >
           <MapView.Marker
-            pinColor={'#fff'}
             coordinate={{
               latitude: props.currentMessage.location.latitude,
               longitude: props.currentMessage.location.longitude,

example-expo/NavBar.js

@@ -1,12 +1,17 @@
 /* eslint jsx-a11y/accessible-emoji: 0 */
 import React from 'react';
+import { Text } from 'react-native';
 import NavBar, { NavTitle, NavButton } from 'react-native-nav';
+import app from './app.json';
 
 export default function NavBarCustom() {
   return (
     <NavBar>
       <NavButton />
-      <NavTitle>💬 Gifted Chat</NavTitle>
+      <NavTitle>
+        💬 Gifted Chat{'\n'}
+        <Text style={{ fontSize: 10, color: '#aaa' }}>({app.expo.version})</Text>
+      </NavTitle>
       <NavButton />
     </NavBar>
   );

example-expo/app.json

@@ -1,12 +1,12 @@
 {
   "expo": {
-    "name": "example-expo",
-    "description": "This project is really great.",
+    "name": "gifted-chat-example",
+    "description": "Gifted Chat Expo Example",
     "slug": "example-expo",
     "privacy": "public",
-    "sdkVersion": "24.0.0",
+    "sdkVersion": "25.0.0",
     "platforms": ["ios", "android"],
-    "version": "1.0.0",
+    "version": "0.4.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -19,6 +19,18 @@
     },
     "androidStatusBar": {
       "backgroundColor": "#000000"
+    },
+    "hooks": {
+      "postPublish": [
+        {
+          "file": "sentry-expo/upload-sourcemaps",
+          "config": {
+            "organization": "xavier-carpentier-sas",
+            "project": "giftedchat",
+            "authToken": "d32ac87517964ac2b5b778bf5c7b544e59dcab60d1df4fafb6fab65a9d8019ff"
+          }
+        }
+      ]
     }
   }
 }

example-expo/data.js

@@ -15,6 +15,7 @@ export default [
     user: {
       _id: 2,
       name: 'React Native',
+      avatar: require('./assets/avatar.png'),
     },
     image: 'https://lh3.googleusercontent.com/-uXipYA5hSKc/VVWKiFIvo-I/AAAAAAAAAhQ/vkjLyZNEzUA/w800-h800/1.jpg',
     sent: true,
@@ -36,6 +37,7 @@ export default [
     user: {
       _id: 2,
       name: 'React Native',
+      avatar: require('./assets/avatar.png'),
     },
     sent: true,
     received: true,
@@ -60,6 +62,7 @@ export default [
     user: {
       _id: 2,
       name: 'React Native',
+      avatar: require('./assets/avatar.png'),
     },
     sent: true,
     received: true,

example-expo/e2e/config.json

@@ -0,0 +1,3 @@
+{
+  "setupTestFrameworkScriptFile": "./init.js"
+}

example-expo/e2e/e2e.spec.js

@@ -0,0 +1,52 @@
+const { reloadApp } = require('detox-expo-helpers');
+
+const composerId = 'Type a message...';
+const sendId = 'send';
+const timeout = 3000;
+
+async function expectTypeText(text) {
+  await waitFor(element(by.id(composerId)))
+    .toBeVisible()
+    .withTimeout(timeout);
+  await element(by.id(composerId)).tap();
+  await element(by.id(composerId)).typeText(text);
+  await waitFor(element(by.id(sendId)))
+    .toBeVisible()
+    .withTimeout(timeout);
+  await element(by.id(sendId)).tap();
+  await waitFor(element(by.text(text)))
+    .toBeVisible()
+    .withTimeout(timeout);
+}
+
+describe('GiftedChat', () => {
+  beforeAll(async () => {
+    await reloadApp();
+  });
+
+  it('should have main screen', async () => {
+    await waitFor(element(by.id('main')))
+      .toBeVisible()
+      .withTimeout(timeout);
+  });
+
+  it('should type text 1', async () => {
+    await expectTypeText('Are you building a chat app?');
+  });
+
+  it('should type text 2', async () => {
+    await expectTypeText('Where are you?');
+  });
+
+  it('should type text 3', async () => {
+    await expectTypeText('Send me a picture!');
+  });
+
+  it('should type text 4', async () => {
+    await expectTypeText('#awesome !!!');
+  });
+
+  it('should type text 5', async () => {
+    await expectTypeText("Will *Star GiftedChat's repo!");
+  });
+});

example-expo/e2e/init.js

@@ -0,0 +1,12 @@
+const detox = require('detox');
+const config = require('../package.json').detox;
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 500000;
+
+beforeAll(async () => {
+  await detox.init(config);
+});
+
+afterAll(async () => {
+  await detox.cleanup();
+});

example-expo/e2e/init.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+set -e
+
+if [[ -z "$1" ]]
+then
+  echo "No arguments supplied!"
+  echo "Please specified expo versions..."
+  versions=`ls -l ~/.expo/ios-simulator-app-cache | rev | cut -d' ' -f 1 | rev | grep Exponent | cut -d'-' -f 2 | tr ap " "`
+  echo "${versions}"
+  exit 1
+fi
+
+rm -rf e2e/Exponent-*.app
+DEST="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )/../e2e/"
+EXPO_APP_PATH="$HOME/.expo/ios-simulator-app-cache/Exponent-$1.app"
+
+echo "Copy file from $EXPO_APP_PATH to $DEST"
+
+cp -r $EXPO_APP_PATH $DEST
+
+exit 0

example-expo/package.json

@@ -1,18 +1,37 @@
 {
   "name": "react-native-gifted-chat-expo",
   "main": "node_modules/expo/AppEntry.js",
+  "version": "0.4.1",
   "private": true,
   "scripts": {
-    "cleaning": "watchman watch-del-all && rm -f yarn.lock && rm -rf node_modules && rm -rf $TMPDIR/react-* && yarn cache clean"
+    "e2e:init": "./e2e/init.sh 2.3.0",
+    "test:e2e": "exp r -c & detox test -c ios.sim; pkill -f exp",
+    "cleaning":
+      "watchman watch-del-all && rm -f yarn.lock && rm -rf node_modules && rm -rf $TMPDIR/react-* && yarn cache clean"
   },
   "dependencies": {
-    "expo": "^24.0.0",
-    "react": "16.0.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
-    "react-native-gifted-chat": "https://github.com/FaridSafi/react-native-gifted-chat.git",
-    "react-native-nav": "2.0.2"
+    "expo": "^25.0.0",
+    "react": "16.2.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
+    "react-native-gifted-chat": "FaridSafi/react-native-gifted-chat",
+    "react-native-nav": "2.0.2",
+    "sentry-expo": "1.7.0"
   },
   "devDependencies": {
-    "appr": "xcarpentier/appr"
+    "appr": "xcarpentier/appr",
+    "detox": "7.0.0-alpha.1",
+    "detox-expo-helpers": "0.2.0",
+    "jest": "22.1.4"
+  },
+  "detox": {
+    "test-runner": "jest",
+    "runner-config": "e2e/config.json",
+    "configurations": {
+      "ios.sim": {
+        "binaryPath": "./e2e/Exponent-2.3.0.app",
+        "type": "ios.simulator",
+        "name": "iPhone 7"
+      }
+    }
   }
 }

example-expo/setPRVersion.js

@@ -2,11 +2,15 @@
 
 /* eslint-disable */
 
-const fs = require('fs')
-const pkg = require('./package.json')
+const fs = require('fs');
+const pkg = require('./package.json');
+const app = require('./app.json');
+const { TRAVIS_BUILD_NUMBER, BRANCH } = process.env;
 
-pkg.dependencies['react-native-gifted-chat'] = process.env.BRANCH
+pkg.dependencies['react-native-gifted-chat'] = BRANCH;
+app.expo['version'] = `${pkg.version}.${TRAVIS_BUILD_NUMBER || 'dev'}`;
 
-fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2), 'utf8')
+fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 1), 'utf8');
+fs.writeFileSync('./app.json', JSON.stringify(app, null, 1), 'utf8');
 
-process.exit()
+process.exit();