Migrate GiftedChat to TypeScript

.circleci/config.yml

@@ -0,0 +1,55 @@
+version: 2
+
+test: &test
+  docker:
+    - image: circleci/node:11.10.1
+  steps:
+    - checkout
+
+    - restore_cache:
+        keys:
+          - v1-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          - v1-dependencies-
+
+    - run:
+        name: Installing codecov
+        command: sudo yarn global add codecov
+
+    - run:
+        name: Installing dependencies
+        command: yarn install
+
+    - run:
+        name: Check typescript
+        command: yarn tsc
+
+    - run:
+        name: Check tslint
+        command: yarn lint
+
+    - run:
+        name: Check tests
+        command: yarn test:coverage
+
+    - run:
+        name: codecov
+        command: codecov
+
+    - save_cache:
+        paths:
+          - node_modules
+          - ~/.cache/yarn
+        key: v1-dependencies-{{ .Branch }}-{{ checksum "yarn.lock" }}
+
+jobs:
+  test:
+    <<: *test
+
+workflows:
+  version: 2
+  watchdog_system:
+    jobs:
+      - test:
+          filters:
+            branches:
+              only: /^feature\/.*$|^release\/.*$|^hotfix\/.*$/

.eslintignore

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

.gitignore

@@ -8,3 +8,4 @@ TODO.md
 .vscode
 Exponent-*.app
 *.log
+lib/

.npmignore

@@ -1,7 +1,6 @@
 example/
 example-expo/
 example-slack-message/
-example-pusher-chatkit/
 TODO.md
 screenshots/
 .babelrc
@@ -10,3 +9,4 @@ README.md
 ISSUE_TEMPLATE.md
 circle.yml
 codecov.yml
+media/

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": true,
+  "printWidth": 80
+}

README.md

@@ -9,8 +9,7 @@
   💬 Gifted Chat
 </h3>
 <p align="center">
-  The most complete chat UI for React Native <br/>
-  <small>formerly known as Gifted Messenger</small>
+  The most complete chat UI for React Native
 </p>
 <p align="center">
   <a href="https://www.npmjs.com/package/react-native-gifted-chat">
@@ -34,6 +33,24 @@
   <a href="https://snack.expo.io/@xcarpentier/gifted-chat" target="_blank"><i>demo</i></a>
 </p>
 
+## Sponsor
+
+<p align="center">
+  <br/>
+  <a href="https://www.lereacteur.io" target="_blank">
+    <img src="https://github.com/raw/FaridSafi/react-native-gifted-chat/sponsor-lereacteur/media/logo_sponsor.png">
+  </a>
+  <br>
+  <p align="center">
+    Coding Bootcamp in Paris co-founded by Farid Safi
+  </p>
+  <a href="https://www.lereacteur.io" target="_blank">
+    <p align="center">
+      Click to learn more
+    </p>
+  </a>
+</p>
+
 ## Features
 
 - Fully customizable components
@@ -47,6 +64,7 @@
 - InputToolbar avoiding keyboard
 - Redux support
 - System message
+- Write with TypeScript [soon](https://github.com/FaridSafi/react-native-gifted-chat/pull/1190)
 
 ## Dependency
 
@@ -69,35 +87,35 @@
 ## Example
 
 ```jsx
-import React from 'react'
-import { GiftedChat } from 'react-native-gifted-chat'
+import React from "react";
+import { GiftedChat } from "react-native-gifted-chat";
 
 class Example extends React.Component {
   state = {
-    messages: [],
-  }
+    messages: []
+  };
 
   componentWillMount() {
     this.setState({
       messages: [
         {
           _id: 1,
-          text: 'Hello developer',
+          text: "Hello developer",
           createdAt: new Date(),
           user: {
             _id: 2,
-            name: 'React Native',
-            avatar: 'https://placeimg.com/140/140/any',
-          },
-        },
-      ],
-    })
+            name: "React Native",
+            avatar: "https://placeimg.com/140/140/any"
+          }
+        }
+      ]
+    });
   }
 
   onSend(messages = []) {
     this.setState(previousState => ({
-      messages: GiftedChat.append(previousState.messages, messages),
-    }))
+      messages: GiftedChat.append(previousState.messages, messages)
+    }));
   }
 
   render() {
@@ -106,10 +124,10 @@ class Example extends React.Component {
         messages={this.state.messages}
         onSend={messages => this.onSend(messages)}
         user={{
-          _id: 1,
+          _id: 1
         }}
       />
-    )
+    );
   }
 }
 ```
@@ -208,20 +226,23 @@ e.g. System Message
 - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`maxInputLength`** _(Integer)_ - Max message composer TextInput length
 - **`parsePatterns`** _(Function)_ - Custom parse patterns for [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) used to linkify message content (like URLs and phone numbers), e.g.:
- ```js
-  <GiftedChat
-    parsePatterns={(linkStyle) => [
-      { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
-      { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
-    ]}
-  />
-  ```
+
+```js
+ <GiftedChat
+   parsePatterns={(linkStyle) => [
+     { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
+     { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
+   ]}
+ />
+```
+
 - **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
 - **`minComposerHeight`** _(Object)_ - Custom min height of the composer.
 - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
-* **`scrollToBottom`** _(Bool)_ - Enables the scrollToBottom Component (Default is false)    
-* **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container  
-* **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)  
+
+* **`scrollToBottom`** _(Bool)_ - Enables the scrollToBottom Component (Default is false)
+* **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
+* **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
 * **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
 
 ## Imperative methods

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function(api) {
+  api.cache(true)
+  return {
+    presets: [
+      'module:metro-react-native-babel-preset',
+      '@babel/preset-typescript',
+    ],
+  }
+}