├── .eslintignore
├── example
    ├── .env
    ├── public
    │   ├── favicon.ico
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── App.test.js
    │   ├── index.css
    │   ├── index.js
    │   ├── App.js
    │   └── serviceWorker.js
    ├── config
    │   ├── jest
    │   │   ├── cssTransform.js
    │   │   └── fileTransform.js
    │   ├── paths.js
    │   ├── env.js
    │   ├── webpackDevServer.config.js
    │   ├── webpack.config.dev.js
    │   └── webpack.config.prod.js
    ├── .gitignore
    ├── scripts
    │   ├── test.js
    │   ├── start.js
    │   └── build.js
    ├── README.md
    └── package.json
├── src
    ├── index.js
    ├── Constant.js
    ├── Color.js
    ├── GiftedChatInteractionManager.js
    ├── utils.js
    ├── SystemMessage.js
    ├── MessageVideo.js
    ├── WebScrollView.js
    ├── Send.js
    ├── TouchableOpacity.js
    ├── Day.js
    ├── Time.js
    ├── ParsedText.js
    ├── Actions.js
    ├── LoadEarlier.js
    ├── TextExtraction.js
    ├── MessageImage.js
    ├── Composer.js
    ├── InputToolbar.js
    ├── Avatar.js
    ├── GiftedAvatar.js
    ├── Message.js
    ├── MessageText.js
    ├── MessageContainer.js
    ├── Bubble.js
    └── GiftedChat.js
├── .babelrc
├── .npmignore
├── .watchmanconfig
├── .editorconfig
├── screenshots
    ├── gifted-chat-1.png
    └── gifted-chat-2.png
├── .gitignore
├── ISSUE_TEMPLATE.md
├── rollup.config.js
├── LICENSE
├── .eslintrc
├── .github
    └── stale.yml
├── package.json
├── README.md
└── index.d.ts


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/example/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './GiftedChat';
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["react-app"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | example/
2 | TODO.md
3 | screenshots/
4 | 
5 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 |   "ignore_dirs": [".git", "node_modules"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_style = space
5 | indent_size = 2


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johniak/react-web-gifted-chat/HEAD/example/public/favicon.ico


--------------------------------------------------------------------------------
/screenshots/gifted-chat-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johniak/react-web-gifted-chat/HEAD/screenshots/gifted-chat-1.png


--------------------------------------------------------------------------------
/screenshots/gifted-chat-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johniak/react-web-gifted-chat/HEAD/screenshots/gifted-chat-2.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | .expo/
 4 | npm-debug.log
 5 | TODO.md
 6 | dist/
 7 | .idea
 8 | .vscode
 9 | Exponent-*.app
10 | *.log
11 | 


--------------------------------------------------------------------------------
/src/Constant.js:
--------------------------------------------------------------------------------
1 | export const MIN_COMPOSER_HEIGHT = 41;
2 | export const MAX_COMPOSER_HEIGHT = 41;
3 | export const DEFAULT_PLACEHOLDER = 'Type a message...';
4 | export const DATE_FORMAT = 'll';
5 | export const TIME_FORMAT = 'LT';
6 | 


--------------------------------------------------------------------------------
/example/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/example/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | #### Issue Description
 2 | 
 3 | [FILL THIS OUT]
 4 | 
 5 | #### Steps to Reproduce / Code Snippets
 6 | 
 7 | [FILL THIS OUT]
 8 | 
 9 | #### Expected Results
10 | 
11 | [FILL THIS OUT]
12 | 
13 | #### Additional Information
14 | 
15 | * Nodejs version: [FILL THIS OUT]
16 | * React version: [FILL THIS OUT]
17 | * react-web-gifted-chat version: [FILL THIS OUT]
18 | * Browser(s) (Chrome, etc.): [FILL THIS OUT]
19 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 5 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/Color.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   defaultColor: '#b2b2b2',
 3 |   backgroundTransparent: 'transparent',
 4 |   defaultBlue: '#0084ff',
 5 |   leftBubbleBackground: '#f0f0f0',
 6 |   black: '#000',
 7 |   white: '#fff',
 8 |   carrot: '#e67e22',
 9 |   emerald: '#2ecc71',
10 |   peterRiver: '#3498db',
11 |   wisteria: '#8e44ad',
12 |   alizarin: '#e74c3c',
13 |   turquoise: '#1abc9c',
14 |   midnightBlue: '#2c3e50',
15 |   optionTintColor: '#007AFF',
16 |   timeTextColor: '#aaa',
17 | };
18 | 


--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: http://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/GiftedChatInteractionManager.js:
--------------------------------------------------------------------------------
 1 | import { InteractionManager } from 'react-native';
 2 | 
 3 | export default {
 4 |   ...InteractionManager,
 5 |   runAfterInteractions: (f) => {
 6 |     // ensure f get called, timeout at 500ms
 7 |     // @gre workaround https://github.com/facebook/react-native/issues/8624
 8 |     let called = false;
 9 |     const timeout = setTimeout(() => {
10 |       called = true;
11 |       f();
12 |     }, 500);
13 |     InteractionManager.runAfterInteractions(() => {
14 |       if (called) return;
15 |       clearTimeout(timeout);
16 |       f();
17 |     });
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import moment from 'moment';
 2 | 
 3 | export function isSameDay(currentMessage = {}, diffMessage = {}) {
 4 |   if (!diffMessage.createdAt) {
 5 |     return false;
 6 |   }
 7 | 
 8 |   const currentCreatedAt = moment(currentMessage.createdAt);
 9 |   const diffCreatedAt = moment(diffMessage.createdAt);
10 | 
11 |   if (!currentCreatedAt.isValid() || !diffCreatedAt.isValid()) {
12 |     return false;
13 |   }
14 | 
15 |   return currentCreatedAt.isSame(diffCreatedAt, 'day');
16 | }
17 | 
18 | export function isSameUser(currentMessage = {}, diffMessage = {}) {
19 |   return !!(diffMessage.user && currentMessage.user && diffMessage.user.id === currentMessage.user.id);
20 | }
21 | 


--------------------------------------------------------------------------------
/example/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     const assetFilename = JSON.stringify(path.basename(filename));
11 | 
12 |     if (filename.match(/\.svg$/)) {
13 |       return `module.exports = {
14 |         __esModule: true,
15 |         default: ${assetFilename},
16 |         ReactComponent: (props) => ({
17 |           $$typeof: Symbol.for('react.element'),
18 |           type: 'svg',
19 |           ref: null,
20 |           key: null,
21 |           props: Object.assign({}, props, {
22 |             children: ${assetFilename}
23 |           })
24 |         }),
25 |       };`;
26 |     }
27 | 
28 |     return `module.exports = ${assetFilename};`;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import babel from 'rollup-plugin-babel';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import postcss from 'rollup-plugin-postcss';
 5 | import fs from 'fs';
 6 | 
 7 | 
 8 | const pkg = JSON.parse(fs.readFileSync('./package.json'));
 9 | 
10 | 
11 | const external = Object.keys(pkg.dependencies || {});
12 | export default {
13 |   input: 'src/index.js',
14 |   output: {
15 |     file: 'dist/bundle.js',
16 |     format: 'cjs',
17 |   },
18 |   // All the used libs needs to be here
19 |   external: [
20 |     ...external,
21 |     'prop-types',
22 |     'react-native',
23 |     'moment/min/moment-with-locales.min',
24 |   ],
25 |   plugins: [
26 |     resolve(),
27 |     commonjs({
28 |       // non-CommonJS modules will be ignored, but you can also
29 |       // specifically include/exclude files
30 |       include: 'node_modules/**',
31 |     }),
32 |     babel({
33 |       runtimeHelpers: true,
34 |       exclude: 'node_modules/**',
35 |     }),
36 |     postcss({
37 |       plugins: [],
38 |     }),
39 |   ],
40 | };
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Farid from Safi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/SystemMessage.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
 2 | 
 3 | import React from 'react';
 4 | import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 5 | import PropTypes from 'prop-types';
 6 | import Color from './Color';
 7 | 
 8 | export default function SystemMessage({ currentMessage, containerStyle, wrapperStyle, textStyle }) {
 9 |   return (
10 |     <View style={[styles.container, containerStyle]}>
11 |       <View style={[styles.wrapper, wrapperStyle]}>
12 |         <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
13 |       </View>
14 |     </View>
15 |   );
16 | }
17 | 
18 | const styles = StyleSheet.create({
19 |   container: {
20 |     alignItems: 'center',
21 |     justifyContent: 'center',
22 |     flex: 1,
23 |     marginTop: 5,
24 |     marginBottom: 10,
25 |   },
26 |   text: {
27 |     backgroundColor: Color.backgroundTransparent,
28 |     color: Color.defaultColor,
29 |     fontSize: 12,
30 |     fontWeight: '300',
31 |   },
32 | });
33 | 
34 | SystemMessage.defaultProps = {
35 |   currentMessage: {
36 |     system: false,
37 |   },
38 |   containerStyle: {},
39 |   wrapperStyle: {},
40 |   textStyle: {},
41 | };
42 | 
43 | SystemMessage.propTypes = {
44 |   currentMessage: PropTypes.object,
45 |   containerStyle: ViewPropTypes.style,
46 |   wrapperStyle: ViewPropTypes.style,
47 |   textStyle: Text.propTypes.style,
48 | };
49 | 


--------------------------------------------------------------------------------
/src/MessageVideo.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React from 'react';
 3 | import { StyleSheet, View, ViewPropTypes } from 'react-native';
 4 | //import Video from 'react-native-video';
 5 | 
 6 | 
 7 | export default function MessageVideo({
 8 |   containerStyle,
 9 |   videoProps,
10 |   videoStyle,
11 |   currentMessage,
12 | }) {
13 |   return (
14 |     // eslint-disable-next-line no-use-before-define
15 |     <View style={[styles.container, containerStyle]}>
16 | {/* 
17 |       <Video
18 |         {...videoProps}
19 |         ref={(r) => { this.player = r; }}
20 |         source={{ uri: currentMessage.video }}
21 |         style={videoStyle}
22 |         resizeMode="cover"
23 |         onBuffer={this.onBuffer}
24 |         onLoadStart={this.onLoadStart}
25 |         onLoad={this.onLoad}
26 |       /> */}
27 |     </View>
28 |   );
29 | }
30 | 
31 | const styles = StyleSheet.create({
32 |   container: {
33 |   },
34 | });
35 | 
36 | MessageVideo.defaultProps = {
37 |   currentMessage: {
38 |     // video: null,
39 |   },
40 |   containerStyle: {},
41 |   videoStyle: {
42 |     width: 150,
43 |     height: 100,
44 |     borderRadius: 13,
45 |     margin: 3,
46 |   },
47 |   videoProps: {},
48 | };
49 | 
50 | MessageVideo.propTypes = {
51 |   currentMessage: PropTypes.object,
52 |   containerStyle: ViewPropTypes.style,
53 |   videoStyle: ViewPropTypes.style,
54 |   videoProps: PropTypes.object,
55 | };
56 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "node": true,
 4 |     "browser": true,
 5 |     "es6": true,
 6 |     "mocha": true,
 7 |     "jest": true
 8 |   },
 9 |   "parser": "babel-eslint",
10 |   "extends": "airbnb",
11 |   "plugins": [
12 |     "mocha"
13 |   ],
14 |   "globals": {
15 |     "__DEV__": false,
16 |     "babelHelpers": false
17 |   },
18 |   "rules": {
19 |     "no-underscore-dangle": 0,
20 |     "no-return-assign": 0,
21 |     "max-len": 0,
22 |     "no-shadow": 0,
23 |     "react/jsx-filename-extension": 0,
24 |     "react/forbid-prop-types": 0,
25 |     "no-use-before-define": 0,
26 |     "no-unused-vars": 1,
27 |     "eqeqeq": 1,
28 |     "global-require": 0,
29 |     "class-methods-use-this": 0,
30 |     "react/sort-comp": 0,
31 |     "react/require-default-props": 0,
32 |     "react/jsx-tag-spacing": {
33 |       "closingSlash": "never",
34 |       "beforeSelfClosing": "always",
35 |       "afterOpening": "never",
36 |       "beforeClosing": "allow"
37 |     },
38 |     "radix": 0,
39 |     "react/prefer-stateless-function": 0,
40 |     "no-plusplus": 0,
41 |     "no-console": 0,
42 |     "no-restricted-syntax": 0,
43 |     "no-continue": 0,
44 |     "guard-for-in": 0,
45 |     "no-debugger": 0,
46 |     "prefer-destructuring": 0,
47 |     "react/destructuring-assignment": 1,
48 |     "object-curly-newline": ["warn", {
49 |       "consistent": true,
50 |       "multiline": true
51 |     }]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/example/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI, in coverage mode, or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--coverage') === -1 &&
45 |   argv.indexOf('--watchAll') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <meta name="theme-color" content="#000000">
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>Web GiftedChat</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/WebScrollView.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | import React, { Component } from 'react';
 3 | 
 4 | import { FlatList, View, StyleSheet, Keyboard, TouchableOpacity, Text } from 'react-native';
 5 | 
 6 | export default class WebScrollView extends Component {
 7 |   renderItem =(item, index) => {
 8 |     const { renderItem } = this.props;
 9 |     return renderItem({ item, index });
10 |   }
11 | 
12 |   render() {
13 |     const { ListHeaderComponent, ListFooterComponent, data, inverted } = this.props;
14 |     let messages = data;
15 |     if (!inverted) {
16 |       messages = data.slice().reverse();
17 |     }
18 |     return (
19 |       <div style={styles.container}>
20 |         {ListHeaderComponent()}
21 |         {messages.map(this.renderItem)}
22 |         {ListFooterComponent()}
23 |       </div>
24 |     );
25 |   }
26 | }
27 | 
28 | const styles = {
29 |   container: {
30 |     height: '100%',
31 |     minHeight: '100%',
32 |     width: '100%',
33 |     overflow: 'auto',
34 |     display: 'flex',
35 |     flexDirection: 'column-reverse',
36 |     flex: 1,
37 |     alignItems: 'stretch',
38 |   },
39 | };
40 | 
41 | WebScrollView.defaultProps = {
42 |   data: [],
43 |   extraData: {},
44 |   ListHeaderComponent: () => {},
45 |   ListFooterComponent: () => {},
46 |   inverted: false,
47 | };
48 | 
49 | WebScrollView.propTypes = {
50 |   data: PropTypes.arrayOf(PropTypes.object),
51 |   extraData: PropTypes.object,
52 |   inverted: PropTypes.bool,
53 |   renderFooter: PropTypes.func,
54 |   keyExtractor: PropTypes.func,
55 |   enableEmptySections: PropTypes.bool,
56 |   automaticallyAdjustContentInsets: PropTypes.bool,
57 |   contentContainerStyle: PropTypes.object,
58 |   renderItem: PropTypes.func,
59 |   ListHeaderComponent: PropTypes.func,
60 |   ListFooterComponent: PropTypes.func,
61 | };
62 | 


--------------------------------------------------------------------------------
/src/Send.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
 2 | 
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 6 | import Color from './Color';
 7 | import TouchableOpacity from './TouchableOpacity';
 8 | 
 9 | export default function Send({ text, containerStyle, onSend, children, textStyle, label, alwaysShowSend }) {
10 |   if (alwaysShowSend || text.trim().length > 0) {
11 |     return (
12 |       <TouchableOpacity
13 |         testID="send"
14 |         accessible
15 |         accessibilityLabel="send"
16 |         style={{ ...styles.container, ...containerStyle }}
17 |         onPress={() => {
18 |           console.log('asdasdasd')
19 |           onSend({ text: text.trim() }, true);
20 |         }}
21 |         accessibilityTraits="button"
22 |       >
23 |         <View>{children || <Text style={[styles.text, textStyle]}>{label}</Text>}</View>
24 |       </TouchableOpacity>
25 |     );
26 |   }
27 |   return <View />;
28 | }
29 | 
30 | const styles = StyleSheet.create({
31 |   container: {
32 |     height: 44,
33 |     justifyContent: 'flex-end',
34 |   },
35 |   text: {
36 |     color: Color.defaultBlue,
37 |     fontWeight: '600',
38 |     fontSize: 17,
39 |     backgroundColor: Color.backgroundTransparent,
40 |     marginBottom: 12,
41 |     marginLeft: 10,
42 |     marginRight: 10,
43 |   },
44 | });
45 | 
46 | Send.defaultProps = {
47 |   text: '',
48 |   onSend: () => {},
49 |   label: 'Send',
50 |   containerStyle: {},
51 |   textStyle: {},
52 |   children: null,
53 |   alwaysShowSend: false,
54 | };
55 | 
56 | Send.propTypes = {
57 |   text: PropTypes.string,
58 |   onSend: PropTypes.func,
59 |   label: PropTypes.string,
60 |   containerStyle: ViewPropTypes.style,
61 |   textStyle: Text.propTypes.style,
62 |   children: PropTypes.element,
63 |   alwaysShowSend: PropTypes.bool,
64 | };
65 | 


--------------------------------------------------------------------------------
/.github/stale.yml:
--------------------------------------------------------------------------------
 1 | # Configuration for probot-stale - https://github.com/probot/stale
 2 | 
 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale
 4 | daysUntilStale: 60
 5 | 
 6 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
 7 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
 8 | daysUntilClose: 7
 9 | 
10 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
11 | exemptLabels:
12 |   - pinned
13 |   - security
14 |   - "[Status] Maybe Later"
15 | 
16 | # Set to true to ignore issues in a project (defaults to false)
17 | exemptProjects: false
18 | 
19 | # Set to true to ignore issues in a milestone (defaults to false)
20 | exemptMilestones: false
21 | 
22 | # Label to use when marking as stale
23 | staleLabel: wontfix
24 | 
25 | # Comment to post when marking as stale. Set to `false` to disable
26 | markComment: >
27 |   This issue has been automatically marked as stale because it has not had
28 |   recent activity. It will be closed if no further activity occurs. Thank you
29 |   for your contributions.
30 | 
31 | # Comment to post when removing the stale label.
32 | # unmarkComment: >
33 | #   Your comment here.
34 | 
35 | # Comment to post when closing a stale Issue or Pull Request.
36 | # closeComment: >
37 | #   Your comment here.
38 | 
39 | # Limit the number of actions per hour, from 1-30. Default is 30
40 | limitPerRun: 30
41 | 
42 | # Limit to only `issues` or `pulls`
43 | # only: issues
44 | 
45 | # Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
46 | # pulls:
47 | #   daysUntilStale: 30
48 | #   markComment: >
49 | #     This pull request has been automatically marked as stale because it has not had
50 | #     recent activity. It will be closed if no further activity occurs. Thank you
51 | #     for your contributions.
52 | 
53 | # issues:
54 | #   exemptLabels:
55 | #     - confirmed


--------------------------------------------------------------------------------
/src/TouchableOpacity.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/click-events-have-key-events */
 2 | /* eslint-disable jsx-a11y/no-static-element-interactions */
 3 | import PropTypes from 'prop-types';
 4 | import React, { Component } from 'react';
 5 | 
 6 | 
 7 | export default class TouchableOpacity extends Component {
 8 |   state={
 9 |     pressed: false,
10 |   }
11 | 
12 |   handleButtonPress= () => {
13 |     const { onLongPress, withoutFeedback } = this.props;
14 |     this.setState({ pressed: true });
15 |     this.buttonPressTimer = setTimeout(onLongPress, 500);
16 |   }
17 | 
18 |   handleButtonRelease= () => {
19 |     this.setState({ pressed: false });
20 |     clearTimeout(this.buttonPressTimer);
21 |   }
22 | 
23 | 
24 |   render() {
25 |     const { children, onPress, withoutFeedback } = this.props;
26 |     const { pressed } = this.state;
27 |     let { style } = this.props;
28 |     if (!withoutFeedback) {
29 |       style = { ...styles.container, ...(pressed ? styles.containerPressed : styles.containerNotPressed), ...style };
30 |     }
31 |     return (
32 |       <div
33 |         style={style}
34 |         onClick={onPress}
35 |         onTouchStart={this.handleButtonPress}
36 |         onTouchEnd={this.handleButtonRelease}
37 |         onMouseDown={this.handleButtonPress}
38 |         onMouseUp={this.handleButtonRelease}
39 |         onMouseLeave={this.handleButtonRelease}
40 |       >
41 |         {children}
42 |       </div>
43 |     );
44 |   }
45 | }
46 | 
47 | const styles = {
48 |   container: {
49 |     cursor: 'pointer',
50 |   },
51 |   containerNotPressed: {
52 |     opacity: 1,
53 |   },
54 |   containerPressed: {
55 |     opacity: 0.5,
56 |   },
57 | };
58 | 
59 | TouchableOpacity.defaultProps = {
60 |   onPress: () => {},
61 |   onLongPress: () => {},
62 |   withoutFeedback: false,
63 |   style: {},
64 | };
65 | 
66 | TouchableOpacity.propTypes = {
67 |   onPress: PropTypes.func,
68 |   onLongPress: PropTypes.func,
69 |   children: PropTypes.node,
70 |   withoutFeedback: PropTypes.bool,
71 |   style: PropTypes.object,
72 | };
73 | 


--------------------------------------------------------------------------------
/src/Day.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
 2 | 
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 6 | import moment from 'moment';
 7 | 
 8 | import Color from './Color';
 9 | 
10 | import { isSameDay } from './utils';
11 | import { DATE_FORMAT } from './Constant';
12 | 
13 | export default function Day(
14 |   { dateFormat, currentMessage, previousMessage, nextMessage, containerStyle, wrapperStyle, textStyle, inverted },
15 |   context,
16 | ) {
17 |   if (!isSameDay(currentMessage, inverted ? previousMessage : nextMessage)) {
18 |     return (
19 |       <View style={[styles.container, containerStyle]}>
20 |         <View style={wrapperStyle}>
21 |           <Text style={[styles.text, textStyle]}>
22 |             {moment(currentMessage.createdAt)
23 |               .locale(context.getLocale())
24 |               .format(dateFormat)
25 |               .toUpperCase()}
26 |           </Text>
27 |         </View>
28 |       </View>
29 |     );
30 |   }
31 |   return null;
32 | }
33 | 
34 | const styles = StyleSheet.create({
35 |   container: {
36 |     alignItems: 'center',
37 |     justifyContent: 'center',
38 |     marginTop: 5,
39 |     marginBottom: 10,
40 |   },
41 |   text: {
42 |     backgroundColor: Color.backgroundTransparent,
43 |     color: Color.defaultColor,
44 |     fontSize: 12,
45 |     fontWeight: '600',
46 |   },
47 | });
48 | 
49 | Day.contextTypes = {
50 |   getLocale: PropTypes.func,
51 | };
52 | 
53 | Day.defaultProps = {
54 |   currentMessage: {
55 |     // TODO: test if crash when createdAt === null
56 |     createdAt: null,
57 |   },
58 |   previousMessage: {},
59 |   nextMessage: {},
60 |   containerStyle: {},
61 |   wrapperStyle: {},
62 |   textStyle: {},
63 |   dateFormat: DATE_FORMAT,
64 | };
65 | 
66 | Day.propTypes = {
67 |   currentMessage: PropTypes.object,
68 |   previousMessage: PropTypes.object,
69 |   nextMessage: PropTypes.object,
70 |   inverted: PropTypes.bool,
71 |   containerStyle: ViewPropTypes.style,
72 |   wrapperStyle: ViewPropTypes.style,
73 |   textStyle: Text.propTypes.style,
74 |   dateFormat: PropTypes.string,
75 | };
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-web-gifted-chat",
 3 |   "version": "0.6.7",
 4 |   "description": "The most complete chat UI for React Web",
 5 |   "main": "dist/index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/johniak/react-web-gifted-chat.git"
 9 |   },
10 |   "keywords": [
11 |     "react",
12 |     "react-component",
13 |     "messenger",
14 |     "message",
15 |     "chat"
16 |   ],
17 |   "author": "Jan Romaniak",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/johniak/react-web-gifted-chat/issues"
21 |   },
22 |   "homepage": "https://github.com/johniak/react-web-gifted-chat#readme",
23 |   "scripts": {
24 |     "lint": "eslint . --ext .js,.jsx",
25 |     "compile": "export BABEL_ENV='production' && rm -rf ./dist && mkdir dist &&  rollup -c -i src/index.js -o dist/index.js"
26 |   },
27 |   "devDependencies": {
28 |     "@babel/cli": "^7.1.5",
29 |     "@babel/core": "7.1.0",
30 |     "@babel/runtime": "7.1.5",
31 |     "babel-core": "7.0.0-bridge.0",
32 |     "babel-eslint": "9.0.0",
33 |     "babel-jest": "23.6.0",
34 |     "babel-loader": "8.0.4",
35 |     "babel-plugin-named-asset-import": "^0.2.3",
36 |     "babel-preset-react-app": "^6.1.0",
37 |     "eslint": "5.9.0",
38 |     "eslint-config-airbnb": "17.1.0",
39 |     "eslint-config-cooperka": "0.3.1",
40 |     "eslint-plugin-import": "2.14.0",
41 |     "eslint-plugin-jsx-a11y": "6.1.2",
42 |     "eslint-plugin-mocha": "^5.2.1",
43 |     "eslint-plugin-react": "7.11.1",
44 |     "eslint-plugin-react-native": "3.5.0",
45 |     "rollup": "^0.67.4",
46 |     "rollup-plugin-babel": "^4.0.3",
47 |     "rollup-plugin-commonjs": "^9.2.0",
48 |     "rollup-plugin-node-resolve": "^3.4.0",
49 |     "rollup-plugin-postcss": "^1.6.3"
50 |   },
51 |   "dependencies": {
52 |     "md5": "2.2.1",
53 |     "moment": "2.22.2",
54 |     "prop-types": "^15.6.2",
55 |     "react": "^16.6.3",
56 |     "react-app-polyfill": "^0.1.3",
57 |     "react-art": "^16.6.3",
58 |     "react-dev-utils": "^6.1.1",
59 |     "react-dom": "^16.6.3",
60 |     "react-image-lightbox": "^5.1.0",
61 |     "react-native-web": "0.9.9",
62 |     "shallowequal": "1.1.0",
63 |     "uuid": "3.3.2"
64 |   },
65 |   "peerDependencies": {}
66 | }
67 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `npm start`
 8 | 
 9 | Runs the app in the development mode.<br>
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br>
13 | You will also see any lint errors in the console.
14 | 
15 | ### `npm test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br>
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `npm run build`
21 | 
22 | Builds the app for production to the `build` folder.<br>
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br>
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `npm run eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 


--------------------------------------------------------------------------------
/src/Time.js:
--------------------------------------------------------------------------------
 1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
 2 | 
 3 | import PropTypes from 'prop-types';
 4 | import React from 'react';
 5 | import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 6 | 
 7 | import moment from 'moment';
 8 | 
 9 | import Color from './Color';
10 | import { TIME_FORMAT } from './Constant';
11 | 
12 | export default function Time(
13 |   { position, containerStyle, currentMessage, timeFormat, textStyle, timeTextStyle },
14 |   context,
15 | ) {
16 |   return (
17 |     <View style={[styles[position].container, containerStyle[position]]}>
18 |       <Text style={[styles[position].text, textStyle[position], timeTextStyle[position]]}>
19 |         {moment(currentMessage.createdAt)
20 |           .locale(context.getLocale())
21 |           .format(timeFormat)}
22 |       </Text>
23 |     </View>
24 |   );
25 | }
26 | 
27 | const containerStyle = {
28 |   marginLeft: 10,
29 |   marginRight: 10,
30 |   marginBottom: 5,
31 | };
32 | 
33 | const textStyle = {
34 |   fontSize: 10,
35 |   backgroundColor: 'transparent',
36 |   textAlign: 'right',
37 | };
38 | 
39 | const styles = {
40 |   left: StyleSheet.create({
41 |     container: {
42 |       ...containerStyle,
43 |     },
44 |     text: {
45 |       color: Color.timeTextColor,
46 |       ...textStyle,
47 |     },
48 |   }),
49 |   right: StyleSheet.create({
50 |     container: {
51 |       ...containerStyle,
52 |     },
53 |     text: {
54 |       color: Color.white,
55 |       ...textStyle,
56 |     },
57 |   }),
58 | };
59 | 
60 | Time.contextTypes = {
61 |   getLocale: PropTypes.func,
62 | };
63 | 
64 | Time.defaultProps = {
65 |   position: 'left',
66 |   currentMessage: {
67 |     createdAt: null,
68 |   },
69 |   containerStyle: {},
70 |   textStyle: {},
71 |   timeFormat: TIME_FORMAT,
72 |   timeTextStyle: {},
73 | };
74 | 
75 | Time.propTypes = {
76 |   position: PropTypes.oneOf(['left', 'right']),
77 |   currentMessage: PropTypes.object,
78 |   containerStyle: PropTypes.shape({
79 |     left: ViewPropTypes.style,
80 |     right: ViewPropTypes.style,
81 |   }),
82 |   textStyle: PropTypes.shape({
83 |     left: Text.propTypes.style,
84 |     right: Text.propTypes.style,
85 |   }),
86 |   timeFormat: PropTypes.string,
87 |   timeTextStyle: PropTypes.shape({
88 |     left: Text.propTypes.style,
89 |     right: Text.propTypes.style,
90 |   }),
91 | };
92 | 


--------------------------------------------------------------------------------
/src/ParsedText.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactNative from 'react-native';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | import TextExtraction from './TextExtraction';
 6 | 
 7 | const PATTERNS = {
 8 |   url: /(https?:\/\/|www\.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/i,
 9 |   phone: /[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}/,
10 |   email: /\S+@\S+\.\S+/,
11 | };
12 | 
13 | const defaultParseShape = PropTypes.shape({
14 |   ...ReactNative.Text.propTypes,
15 |   type: PropTypes.oneOf(Object.keys(PATTERNS)).isRequired,
16 | });
17 | 
18 | const customParseShape = PropTypes.shape({
19 |   ...ReactNative.Text.propTypes,
20 |   pattern: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]).isRequired,
21 | });
22 | 
23 | class ParsedText extends React.Component {
24 |   static displayName = 'ParsedText';
25 | 
26 |   static propTypes = {
27 |     ...ReactNative.Text.propTypes,
28 |     parse: PropTypes.arrayOf(
29 |       PropTypes.oneOfType([defaultParseShape, customParseShape]),
30 |     ),
31 |     childrenProps: PropTypes.shape(ReactNative.Text.propTypes),
32 |   };
33 | 
34 |   static defaultProps = {
35 |     parse: null,
36 |   };
37 | 
38 |   setNativeProps(nativeProps) {
39 |     this._root.setNativeProps(nativeProps);
40 |   }
41 | 
42 |   getPatterns() {
43 |     return this.props.parse.map((option) => {
44 |       const { type, ...patternOption } = option;
45 |       if (type) {
46 |         if (!PATTERNS[type]) {
47 |           throw new Error(`${option.type} is not a supported type`);
48 |         }
49 |         patternOption.pattern = PATTERNS[type];
50 |       }
51 | 
52 |       return patternOption;
53 |     });
54 |   }
55 | 
56 |   getParsedText() {
57 |     if (!this.props.parse) { return this.props.children; }
58 |     if (typeof this.props.children !== 'string') { return this.props.children; }
59 | 
60 |     const textExtraction = new TextExtraction(this.props.children, this.getPatterns());
61 |     const childrenProps = this.props.childrenProps || {};
62 |     const props = { ...this.props };
63 |     delete props.childrenProps;
64 |     return textExtraction.parse().map((props, index) => (
65 |       <ReactNative.Text
66 |         key={`parsedText-${index}`}
67 |         {...childrenProps}
68 |         {...props}
69 |       />
70 |     ));
71 |   }
72 | 
73 |   render() {
74 |     const props = { ...this.props };
75 |     delete props.childrenProps;
76 |     return (
77 |       <ReactNative.Text
78 |         ref={ref => this._root = ref}
79 |         {...props}
80 |       >
81 |         {this.getParsedText()}
82 |       </ReactNative.Text>
83 |     );
84 |   }
85 | }
86 | 
87 | export default ParsedText;
88 | 


--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {GiftedChat} from 'react-web-gifted-chat'
 3 | 
 4 | const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum';
 5 | 
 6 | 
 7 | const messages = [];
 8 | messages.push(generateMessage(`Idylla 2`, 3,  {image:'https://www.wykop.pl/cdn/c3201142/comment_Sc8p2KAVLx3EyNIpXuOXngk3ZYJ0g8eq.jpg'}));
 9 | messages.push(generateMessage(`Goood 1`, 2, {image:'http://img2.dmty.pl//uploads/201010/1286036107_by_julia2332_600.jpg'}));
10 | messages.push(generateMessage(`This is a great example of system message`, 2, {system: true}));
11 | 
12 | for (let i = 0; i < 30; i++) {
13 |   messages.push(generateMessage(loremIpsum.substring(0,(Math.random() * 100000)%loremIpsum.length), i))
14 | }
15 | 
16 | 
17 | 
18 | function generateMessage(text, index, additionalData) {
19 |   return {
20 |     id: Math.round(Math.random() * 1000000),
21 |     text: text,
22 |     createdAt: new Date(),
23 |     user: {
24 |       id: index % 3 === 0 ? 1 : 2,
25 |       name: 'Johniak',
26 |     },
27 |     ...additionalData,
28 |   }
29 | }
30 | 
31 | class App extends Component {
32 |   constructor() {
33 |     super()
34 |     this.state = {
35 |       messages: messages
36 |     }
37 |     this.onSend = this.onSend.bind(this)
38 |   }
39 | 
40 |   renderLoading() {
41 |     return (<div>Loading...</div>)
42 |   }
43 | 
44 |   onSend(messages) {
45 |     for(let message of messages){
46 |       this.setState({messages: [message,...this.state.messages]})
47 |     }
48 |   }
49 | 
50 |   render() {
51 |     return (
52 |       <div className="App" style={styles.container}>
53 |         <div style={styles.conversationList}>
54 |         Converstions
55 |         </div>
56 |         <div style={styles.chat}>
57 |           <GiftedChat user={{id: 1,}}
58 |                       messages={this.state.messages}
59 |                       onSend={this.onSend}/>
60 |           </div>
61 |         <div style={styles.converationDetails}>
62 |         Conversation details
63 |         </div>
64 |       </div>
65 |     );
66 |   }
67 | }
68 | const styles = {
69 |   container: {
70 |     flex: 1,
71 |     display: "flex",
72 |     flexDirection: "row",
73 |     height: "100vh",
74 |   },
75 |   conversationList: {
76 |     display:'flex',
77 |     flex: 1,
78 |   },
79 |   chat: {
80 |     display: "flex",
81 |     flex: 3,
82 |     flexDirection: "column",
83 |     borderWidth: "1px",
84 |     borderColor: "#ccc",
85 |     borderRightStyle: "solid",
86 |     borderLeftStyle: "solid",
87 |   },
88 |   converationDetails: {
89 |     display:'flex',
90 |     flex: 1,
91 |   }
92 | }
93 | 
94 | export default App;
95 | 


--------------------------------------------------------------------------------
/src/Actions.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import { StyleSheet, Text, TouchableOpacity, View, ViewPropTypes } from 'react-native';
  6 | import Color from './Color';
  7 | 
  8 | export default class Actions extends React.Component {
  9 | 
 10 |   constructor(props) {
 11 |     super(props);
 12 |     this.onActionsPress = this.onActionsPress.bind(this);
 13 |   }
 14 | 
 15 |   onActionsPress() {
 16 |     const { options } = this.props;
 17 |     const optionKeys = Object.keys(options);
 18 |     const cancelButtonIndex = optionKeys.indexOf('Cancel');
 19 |     this.context.actionSheet().showActionSheetWithOptions(
 20 |       {
 21 |         options: optionKeys,
 22 |         cancelButtonIndex,
 23 |         tintColor: this.props.optionTintColor,
 24 |       },
 25 |       (buttonIndex) => {
 26 |         const key = optionKeys[buttonIndex];
 27 |         if (key) {
 28 |           options[key](this.props);
 29 |         }
 30 |       },
 31 |     );
 32 |   }
 33 | 
 34 |   renderIcon() {
 35 |     if (this.props.icon) {
 36 |       return this.props.icon();
 37 |     }
 38 |     return (
 39 |       <View style={[styles.wrapper, this.props.wrapperStyle]}>
 40 |         <Text style={[styles.iconText, this.props.iconTextStyle]}>+</Text>
 41 |       </View>
 42 |     );
 43 |   }
 44 | 
 45 |   render() {
 46 |     return (
 47 |       <TouchableOpacity
 48 |         style={[styles.container, this.props.containerStyle]}
 49 |         onPress={this.props.onPressActionButton || this.onActionsPress}
 50 |       >
 51 |         {this.renderIcon()}
 52 |       </TouchableOpacity>
 53 |     );
 54 |   }
 55 | 
 56 | }
 57 | 
 58 | const styles = StyleSheet.create({
 59 |   container: {
 60 |     width: 26,
 61 |     height: 26,
 62 |     marginLeft: 10,
 63 |     marginBottom: 10,
 64 |   },
 65 |   wrapper: {
 66 |     borderRadius: 13,
 67 |     borderColor: Color.defaultColor,
 68 |     borderWidth: 2,
 69 |     flex: 1,
 70 |   },
 71 |   iconText: {
 72 |     color: Color.defaultColor,
 73 |     fontWeight: 'bold',
 74 |     fontSize: 16,
 75 |     backgroundColor: Color.backgroundTransparent,
 76 |     textAlign: 'center',
 77 |   },
 78 | });
 79 | 
 80 | Actions.contextTypes = {
 81 |   actionSheet: PropTypes.func,
 82 | };
 83 | 
 84 | Actions.defaultProps = {
 85 |   onSend: () => { },
 86 |   options: {},
 87 |   optionTintColor: Color.optionTintColor,
 88 |   icon: null,
 89 |   containerStyle: {},
 90 |   iconTextStyle: {},
 91 |   wrapperStyle: {},
 92 | };
 93 | 
 94 | Actions.propTypes = {
 95 |   onSend: PropTypes.func,
 96 |   options: PropTypes.object,
 97 |   optionTintColor: PropTypes.string,
 98 |   icon: PropTypes.func,
 99 |   onPressActionButton: PropTypes.func,
100 |   wrapperStyle: ViewPropTypes.style,
101 |   containerStyle: ViewPropTypes.style,
102 |   iconTextStyle: Text.propTypes.style,
103 | };
104 | 


--------------------------------------------------------------------------------
/src/LoadEarlier.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }], react-native/no-inline-styles: 0 */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import {
  6 |   ActivityIndicator,
  7 |   StyleSheet,
  8 |   Text,
  9 |   TouchableOpacity,
 10 |   View,
 11 |   ViewPropTypes,
 12 | } from 'react-native';
 13 | import Color from './Color';
 14 | 
 15 | export default class LoadEarlier extends React.Component {
 16 | 
 17 |   renderLoading() {
 18 |     if (this.props.isLoadingEarlier === false) {
 19 |       return (
 20 |         <Text style={[styles.text, this.props.textStyle]}>
 21 |           {this.props.label}
 22 |         </Text>
 23 |       );
 24 |     }
 25 |     return (
 26 |       <View>
 27 |         <Text style={[styles.text, this.props.textStyle, { opacity: 0 }]}>
 28 |           {this.props.label}
 29 |         </Text>
 30 |         <ActivityIndicator
 31 |           color="white"
 32 |           size="small"
 33 |           style={[styles.activityIndicator, this.props.activityIndicatorStyle]}
 34 |         />
 35 |       </View>
 36 |     );
 37 |   }
 38 |   render() {
 39 |     return (
 40 |       <TouchableOpacity
 41 |         style={[styles.container, this.props.containerStyle]}
 42 |         onPress={() => {
 43 |           if (this.props.onLoadEarlier) {
 44 |             this.props.onLoadEarlier();
 45 |           }
 46 |         }}
 47 |         disabled={this.props.isLoadingEarlier === true}
 48 |         accessibilityTraits="button"
 49 |       >
 50 |         <View style={[styles.wrapper, this.props.wrapperStyle]}>
 51 |           {this.renderLoading()}
 52 |         </View>
 53 |       </TouchableOpacity>
 54 |     );
 55 |   }
 56 | 
 57 | }
 58 | 
 59 | const styles = StyleSheet.create({
 60 |   container: {
 61 |     alignItems: 'center',
 62 |     marginTop: 5,
 63 |     marginBottom: 10,
 64 |   },
 65 |   wrapper: {
 66 |     alignItems: 'center',
 67 |     justifyContent: 'center',
 68 |     backgroundColor: Color.defaultColor,
 69 |     borderRadius: 15,
 70 |     height: 30,
 71 |     paddingLeft: 10,
 72 |     paddingRight: 10,
 73 |   },
 74 |   text: {
 75 |     backgroundColor: Color.backgroundTransparent,
 76 |     color: Color.white,
 77 |     fontSize: 12,
 78 |   },
 79 |   activityIndicator: {
 80 |     marginTop: 0,
 81 |   },
 82 | });
 83 | 
 84 | LoadEarlier.defaultProps = {
 85 |   onLoadEarlier: () => { },
 86 |   isLoadingEarlier: false,
 87 |   label: 'Load earlier messages',
 88 |   containerStyle: {},
 89 |   wrapperStyle: {},
 90 |   textStyle: {},
 91 |   activityIndicatorStyle: {},
 92 | };
 93 | 
 94 | LoadEarlier.propTypes = {
 95 |   onLoadEarlier: PropTypes.func,
 96 |   isLoadingEarlier: PropTypes.bool,
 97 |   label: PropTypes.string,
 98 |   containerStyle: ViewPropTypes.style,
 99 |   wrapperStyle: ViewPropTypes.style,
100 |   textStyle: Text.propTypes.style,
101 |   activityIndicatorStyle: ViewPropTypes.style,
102 | };
103 | 


--------------------------------------------------------------------------------
/src/TextExtraction.js:
--------------------------------------------------------------------------------
 1 | class TextExtraction {
 2 |   /**
 3 |    * @param {String} text - Text to be parsed
 4 |    * @param {Object[]} patterns - Patterns to be used when parsed
 5 |    *                              other options than pattern would be added to the parsed content
 6 |    * @param {RegExp} patterns[].pattern - RegExp to be used for parsing
 7 |    */
 8 |   constructor(text, patterns) {
 9 |     this.text     = text;
10 |     this.patterns = patterns || [];
11 |   }
12 | 
13 |   /**
14 |    * Returns parts of the text with their own props
15 |    * @return {Object[]} - props for all the parts of the text
16 |    */
17 |   parse() {
18 |     let parsedTexts = [{children: this.text}];
19 |     this.patterns.forEach((pattern) => {
20 |       let newParts = [];
21 | 
22 |       parsedTexts.forEach((parsedText) => {
23 |         // Only allow for now one parsing
24 |         if (parsedText._matched) {
25 |           newParts.push(parsedText);
26 | 
27 |           return;
28 |         }
29 | 
30 |         let parts    = [];
31 |         let textLeft = parsedText.children;
32 | 
33 |         while (textLeft) {
34 |           let matches = pattern.pattern.exec(textLeft);
35 | 
36 |           if (!matches) { break; }
37 | 
38 |           let previousText = textLeft.substr(0, matches.index);
39 | 
40 |           parts.push({children: previousText});
41 | 
42 |           parts.push(this.getMatchedPart(pattern, matches[0], matches));
43 | 
44 |           textLeft = textLeft.substr(matches.index + matches[0].length);
45 |         }
46 | 
47 |         parts.push({children: textLeft});
48 | 
49 |         newParts.push(...parts);
50 |       });
51 | 
52 |       parsedTexts = newParts;
53 |     });
54 | 
55 |     // Remove _matched key.
56 |     parsedTexts.forEach((parsedText) => delete(parsedText._matched));
57 | 
58 |     return parsedTexts.filter(t => !!t.children);
59 |   }
60 | 
61 |   // private
62 | 
63 |   /**
64 |    * @param {Object} matchedPattern - pattern configuration of the pattern used to match the text
65 |    * @param {RegExp} matchedPattern.pattern - pattern used to match the text
66 |    * @param {String} text - Text matching the pattern
67 |    * @param {String[]} text - Result of the RegExp.exec
68 |    * @return {Object} props for the matched text
69 |    */
70 |   getMatchedPart(matchedPattern, text, matches) {
71 |     let props = {};
72 | 
73 |     Object.keys(matchedPattern).forEach((key) => {
74 |       if (key === 'pattern' || key === 'renderText') { return; }
75 | 
76 |       if (typeof matchedPattern[key] === 'function') {
77 |         props[key] = () => matchedPattern[key](text);
78 |       } else {
79 |         props[key] = matchedPattern[key];
80 |       }
81 |     });
82 | 
83 |     let children = text;
84 |     if (matchedPattern.renderText && typeof matchedPattern.renderText === 'function') {
85 |       children = matchedPattern.renderText(text, matches);
86 |     }
87 | 
88 |     return {
89 |       ...props,
90 |       children: children,
91 |       _matched: true,
92 |     };
93 |   }
94 | }
95 | 
96 | export default TextExtraction;
97 | 


--------------------------------------------------------------------------------
/example/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   yarnLockFile: resolveApp('yarn.lock'),
80 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
81 |   proxySetup: resolveApp('src/setupProxy.js'),
82 |   appNodeModules: resolveApp('node_modules'),
83 |   publicUrl: getPublicUrl(resolveApp('package.json')),
84 |   servedPath: getServedPath(resolveApp('package.json')),
85 | };
86 | 
87 | 
88 | 
89 | module.exports.moduleFileExtensions = moduleFileExtensions;
90 | 


--------------------------------------------------------------------------------
/src/MessageImage.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import {
  6 |   Image,
  7 |   StyleSheet,
  8 |   View,
  9 |   ViewPropTypes,
 10 |   Dimensions,
 11 | } from 'react-native';
 12 | import Lightbox from 'react-image-lightbox';
 13 | import 'react-image-lightbox/style.css';
 14 | import TouchableOpacity from './TouchableOpacity';
 15 | 
 16 | export default class MessageImage extends React.Component {
 17 |   state = {
 18 |     isOpen: false,
 19 |     messageIndex: 0,
 20 |   };
 21 | 
 22 |   onClickImage = () => {
 23 |     this.setState({ isOpen: true });
 24 |   }
 25 | 
 26 |   static getDerivedStateFromProps(props, state) {
 27 |     if (state.isOpen) {
 28 |       return {};
 29 |     }
 30 |     const { imageMessages, currentMessage } = props;
 31 |     const messagesIds = imageMessages.map(item => item.id);
 32 |     const messageIndex = messagesIds.indexOf(currentMessage.id);
 33 |     return { messageIndex };
 34 |   }
 35 | 
 36 |   render() {
 37 |     const { imageMessages, currentMessage, imageProps, containerStyle, imageStyle } = this.props;
 38 |     const { isOpen, messageIndex } = this.state;
 39 |     if (isOpen) { console.log('messageIndex', messageIndex); }
 40 |     return (
 41 |       <TouchableOpacity
 42 |         onPress={this.onClickImage}
 43 |         style={{ ...styles.container, ...containerStyle }}
 44 |       >
 45 |         <Image
 46 |           {...imageProps}
 47 |           style={[styles.image, this.props.imageStyle]}
 48 |           source={{ uri: currentMessage.image }}
 49 |         />
 50 |         {isOpen && (
 51 |           <Lightbox
 52 |             onCloseRequest={() => this.setState({ isOpen: false })}
 53 |             mainSrc={imageMessages[messageIndex].image}
 54 |             nextSrc={imageMessages[(messageIndex + 1) % imageMessages.length].image}
 55 |             prevSrc={imageMessages[(messageIndex + imageMessages.length - 1) % imageMessages.length].image}
 56 |             onMovePrevRequest={() => this.setState({
 57 |               messageIndex: (messageIndex + imageMessages.length - 1) % imageMessages.length,
 58 |             })
 59 |             }
 60 |             onMoveNextRequest={() => this.setState({
 61 |               messageIndex: (messageIndex + 1) % imageMessages.length,
 62 |             })
 63 |             }
 64 | 
 65 |           />
 66 |         )}
 67 |       </TouchableOpacity>
 68 |     );
 69 |   }
 70 | }
 71 | 
 72 | const styles = StyleSheet.create({
 73 |   container: {},
 74 |   image: {
 75 |     width: 150,
 76 |     height: 100,
 77 |     borderRadius: 13,
 78 |     margin: 3,
 79 |     resizeMode: 'cover',
 80 |   },
 81 |   imageActive: {
 82 |     flex: 1,
 83 |     resizeMode: 'contain',
 84 |   },
 85 | });
 86 | 
 87 | MessageImage.defaultProps = {
 88 |   currentMessage: {
 89 |     image: null,
 90 |   },
 91 |   containerStyle: {},
 92 |   imageStyle: {},
 93 |   imageProps: {},
 94 |   lightboxProps: {},
 95 | };
 96 | 
 97 | MessageImage.propTypes = {
 98 |   currentMessage: PropTypes.object,
 99 |   containerStyle: ViewPropTypes.style,
100 |   imageStyle: Image.propTypes.style,
101 |   imageProps: PropTypes.object,
102 |   lightboxProps: PropTypes.object,
103 | };
104 | 


--------------------------------------------------------------------------------
/src/Composer.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import { StyleSheet, TextInput } from 'react-native';
  6 | 
  7 | import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant';
  8 | import Color from './Color';
  9 | 
 10 | export default class Composer extends React.Component {
 11 |   onContentSizeChange(e) {
 12 |     const { contentSize } = e.nativeEvent;
 13 | 
 14 |     // Support earlier versions of React Native on Android.
 15 |     if (!contentSize) return;
 16 | 
 17 |     if (
 18 |       !this.contentSize
 19 |       || this.contentSize.width !== contentSize.width
 20 |       || this.contentSize.height !== contentSize.height
 21 |     ) {
 22 |       this.contentSize = contentSize;
 23 |       this.props.onInputSizeChanged(this.contentSize);
 24 |     }
 25 |   }
 26 | 
 27 |   onChangeText(text) {
 28 |     this.props.onTextChanged(text);
 29 |   }
 30 | 
 31 |   onKeyDown(e) {
 32 |     const { text, onSend } = this.props;
 33 |     if (e.keyCode === 13 && e.shiftKey === false) {
 34 |       onSend({ text: text.trim() }, true);
 35 |       e.preventDefault();
 36 |     }
 37 |     return false;
 38 |   }
 39 | 
 40 |   render() {
 41 |     return (
 42 |       <textarea
 43 |         testID={this.props.placeholder}
 44 |         accessible
 45 |         onKeyDown={e => this.onKeyDown(e)}
 46 |         accessibilityLabel={this.props.placeholder}
 47 |         placeholder={this.props.placeholder}
 48 |         placeholderTextColor={this.props.placeholderTextColor}
 49 |         multiline={this.props.multiline}
 50 |         onChange={event => this.onChangeText(event.target.value)}
 51 |         style={{ ...styles.textInput, ...this.props.textInputStyle }}
 52 |         value={this.props.text}
 53 |         enablesReturnKeyAutomatically
 54 |         underlineColorAndroid="transparent"
 55 |         keyboardAppearance={this.props.keyboardAppearance}
 56 |         {...this.props.textInputProps}
 57 |       />
 58 |     );
 59 |   }
 60 | }
 61 | 
 62 | const styles = {
 63 |   textInput: {
 64 |     marginLeft: 10,
 65 |     fontSize: 16,
 66 |     lineHeight: '16px',
 67 |     paddingTop: 3,
 68 |     paddingBottom: 3,
 69 |     outline: 'none',
 70 |     border: 'none',
 71 |     overflow: 'auto',
 72 |     boxShadow: 'none',
 73 |     resize: 'none',
 74 |     width: '100%',
 75 |   },
 76 | };
 77 | 
 78 | 
 79 | Composer.defaultProps = {
 80 |   composerHeight: MIN_COMPOSER_HEIGHT,
 81 |   text: '',
 82 |   placeholderTextColor: Color.defaultProps,
 83 |   placeholder: DEFAULT_PLACEHOLDER,
 84 |   textInputProps: null,
 85 |   multiline: true,
 86 |   textInputStyle: {},
 87 |   textInputAutoFocus: false,
 88 |   keyboardAppearance: 'default',
 89 |   onTextChanged: () => {},
 90 |   onInputSizeChanged: () => {},
 91 | };
 92 | 
 93 | Composer.propTypes = {
 94 |   composerHeight: PropTypes.number,
 95 |   text: PropTypes.string,
 96 |   placeholder: PropTypes.string,
 97 |   placeholderTextColor: PropTypes.string,
 98 |   textInputProps: PropTypes.object,
 99 |   onTextChanged: PropTypes.func,
100 |   onInputSizeChanged: PropTypes.func,
101 |   multiline: PropTypes.bool,
102 |   textInputStyle: TextInput.propTypes.style,
103 |   textInputAutoFocus: PropTypes.bool,
104 |   keyboardAppearance: PropTypes.string,
105 | };
106 | 


--------------------------------------------------------------------------------
/example/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/src/InputToolbar.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import { StyleSheet, View, Keyboard, ViewPropTypes } from 'react-native';
  6 | 
  7 | import Composer from './Composer';
  8 | import Send from './Send';
  9 | import Actions from './Actions';
 10 | import Color from './Color';
 11 | 
 12 | export default class InputToolbar extends React.Component {
 13 |   constructor(props) {
 14 |     super(props);
 15 | 
 16 |     this.keyboardWillShow = this.keyboardWillShow.bind(this);
 17 |     this.keyboardWillHide = this.keyboardWillHide.bind(this);
 18 | 
 19 |     this.state = {
 20 |       position: 'static',
 21 |     };
 22 |   }
 23 | 
 24 |   componentWillMount() {
 25 |     this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
 26 |     this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
 27 |   }
 28 | 
 29 |   componentWillUnmount() {
 30 |     this.keyboardWillShowListener.remove();
 31 |     this.keyboardWillHideListener.remove();
 32 |   }
 33 | 
 34 |   keyboardWillShow() {
 35 |     if (this.state.position !== 'relative') {
 36 |       this.setState({
 37 |         position: 'relative',
 38 |       });
 39 |     }
 40 |   }
 41 | 
 42 |   keyboardWillHide() {
 43 |     if (this.state.position !== 'absolute') {
 44 |       this.setState({
 45 |         position: 'absolute',
 46 |       });
 47 |     }
 48 |   }
 49 | 
 50 |   renderActions() {
 51 |     if (this.props.renderActions) {
 52 |       return this.props.renderActions(this.props);
 53 |     } if (this.props.onPressActionButton) {
 54 |       return <Actions {...this.props} />;
 55 |     }
 56 |     return null;
 57 |   }
 58 | 
 59 |   renderSend() {
 60 |     if (this.props.renderSend) {
 61 |       return this.props.renderSend(this.props);
 62 |     }
 63 |     return <Send {...this.props} />;
 64 |   }
 65 | 
 66 |   renderComposer() {
 67 |     if (this.props.renderComposer) {
 68 |       return this.props.renderComposer(this.props);
 69 |     }
 70 | 
 71 |     return <Composer {...this.props} />;
 72 |   }
 73 | 
 74 |   renderAccessory() {
 75 |     if (this.props.renderAccessory) {
 76 |       return (
 77 |         <View style={[styles.accessory, this.props.accessoryStyle]}>{this.props.renderAccessory(this.props)}</View>
 78 |       );
 79 |     }
 80 |     return null;
 81 |   }
 82 | 
 83 |   render() {
 84 |     return (
 85 |       <View style={[styles.container, this.props.containerStyle, { position: this.state.position, height: this.props.composerHeight }]}>
 86 |         <View style={[styles.primary, this.props.primaryStyle]}>
 87 |           {this.renderActions()}
 88 |           {this.renderComposer()}
 89 |           {this.renderSend()}
 90 |         </View>
 91 |         {this.renderAccessory()}
 92 |       </View>
 93 |     );
 94 |   }
 95 | }
 96 | 
 97 | const styles = StyleSheet.create({
 98 |   container: {
 99 |     borderTopWidth: StyleSheet.hairlineWidth,
100 |     borderTopColor: Color.defaultColor,
101 |     backgroundColor: Color.white,
102 |     bottom: 0,
103 |     left: 0,
104 |     right: 0,
105 |   },
106 |   primary: {
107 |     flexDirection: 'row',
108 |     alignItems: 'flex-end',
109 |   },
110 |   accessory: {
111 |     height: 44,
112 |   },
113 | });
114 | 
115 | InputToolbar.defaultProps = {
116 |   renderAccessory: null,
117 |   renderActions: null,
118 |   renderSend: null,
119 |   renderComposer: null,
120 |   containerStyle: {},
121 |   primaryStyle: {},
122 |   accessoryStyle: {},
123 |   onPressActionButton: () => {},
124 | };
125 | 
126 | InputToolbar.propTypes = {
127 |   renderAccessory: PropTypes.func,
128 |   renderActions: PropTypes.func,
129 |   renderSend: PropTypes.func,
130 |   renderComposer: PropTypes.func,
131 |   onPressActionButton: PropTypes.func,
132 |   containerStyle: ViewPropTypes.style,
133 |   primaryStyle: ViewPropTypes.style,
134 |   accessoryStyle: ViewPropTypes.style,
135 | };
136 | 


--------------------------------------------------------------------------------
/src/Avatar.js:
--------------------------------------------------------------------------------
  1 | import PropTypes from 'prop-types';
  2 | import React from 'react';
  3 | import { StyleSheet, View, ViewPropTypes } from 'react-native';
  4 | import GiftedAvatar from './GiftedAvatar';
  5 | import { isSameUser, isSameDay } from './utils';
  6 | 
  7 | const styles = {
  8 |   left: StyleSheet.create({
  9 |     container: {
 10 |       marginRight: 8,
 11 |     },
 12 |     onTop: {
 13 |       alignSelf: 'flex-start',
 14 |     },
 15 |     onBottom: {},
 16 |     image: {
 17 |       height: 36,
 18 |       width: 36,
 19 |       borderRadius: 18,
 20 |     },
 21 |   }),
 22 |   right: StyleSheet.create({
 23 |     container: {
 24 |       marginLeft: 8,
 25 |     },
 26 |     onTop: {
 27 |       alignSelf: 'flex-start',
 28 |     },
 29 |     onBottom: {},
 30 |     image: {
 31 |       height: 36,
 32 |       width: 36,
 33 |       borderRadius: 18,
 34 |     },
 35 |   }),
 36 | };
 37 | 
 38 | export default class Avatar extends React.Component {
 39 | 
 40 |   renderAvatar() {
 41 |     if (this.props.renderAvatar) {
 42 |       const { renderAvatar, ...avatarProps } = this.props;
 43 |       return this.props.renderAvatar(avatarProps);
 44 |     }
 45 |     return (
 46 |       <GiftedAvatar
 47 |         avatarStyle={StyleSheet.flatten([
 48 |           styles[this.props.position].image,
 49 |           this.props.imageStyle[this.props.position],
 50 |         ])}
 51 |         user={this.props.currentMessage.user}
 52 |         onPress={() => this.props.onPressAvatar && this.props.onPressAvatar(this.props.currentMessage.user)}
 53 |         onClick={() => this.props.onPressAvatar && this.props.onPressAvatar(this.props.currentMessage.user)}
 54 |       />
 55 |     );
 56 |   }
 57 | 
 58 |   render() {
 59 |     const { renderAvatarOnTop, showAvatarForEveryMessage } = this.props;
 60 |     const messageToCompare = renderAvatarOnTop ? this.props.previousMessage : this.props.nextMessage;
 61 |     const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
 62 | 
 63 |     if (this.props.renderAvatar === null) {
 64 |       return null;
 65 |     }
 66 | 
 67 |     if (
 68 |       !showAvatarForEveryMessage &&
 69 |       isSameUser(this.props.currentMessage, messageToCompare) &&
 70 |       isSameDay(this.props.currentMessage, messageToCompare)
 71 |     ) {
 72 |       return (
 73 |         <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
 74 |           <GiftedAvatar
 75 |             avatarStyle={StyleSheet.flatten([
 76 |               styles[this.props.position].image,
 77 |               this.props.imageStyle[this.props.position],
 78 |             ])}
 79 |           />
 80 |         </View>
 81 |       );
 82 |     }
 83 | 
 84 |     return (
 85 |       <View
 86 |         style={[
 87 |           styles[this.props.position].container,
 88 |           styles[this.props.position][computedStyle],
 89 |           this.props.containerStyle[this.props.position],
 90 |         ]}
 91 |       >
 92 |         {this.renderAvatar()}
 93 |       </View>
 94 |     );
 95 |   }
 96 | 
 97 | }
 98 | 
 99 | Avatar.defaultProps = {
100 |   renderAvatarOnTop: false,
101 |   showAvatarForEveryMessage: false,
102 |   position: 'left',
103 |   currentMessage: {
104 |     user: null,
105 |   },
106 |   previousMessage: {},
107 |   nextMessage: {},
108 |   containerStyle: {},
109 |   imageStyle: {},
110 |   onPressAvatar: () => {},
111 | };
112 | 
113 | Avatar.propTypes = {
114 |   renderAvatarOnTop: PropTypes.bool,
115 |   showAvatarForEveryMessage: PropTypes.bool,
116 |   position: PropTypes.oneOf(['left', 'right']),
117 |   currentMessage: PropTypes.object,
118 |   previousMessage: PropTypes.object,
119 |   nextMessage: PropTypes.object,
120 |   onPressAvatar: PropTypes.func,
121 |   renderAvatar: PropTypes.func,
122 |   containerStyle: PropTypes.shape({
123 |     left: ViewPropTypes.style,
124 |     right: ViewPropTypes.style,
125 |   }),
126 |   imageStyle: PropTypes.shape({
127 |     left: ViewPropTypes.style,
128 |     right: ViewPropTypes.style,
129 |   }),
130 | };
131 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "example",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.1.0",
  7 |     "@svgr/webpack": "2.4.1",
  8 |     "babel-core": "7.0.0-bridge.0",
  9 |     "babel-eslint": "9.0.0",
 10 |     "babel-jest": "23.6.0",
 11 |     "babel-loader": "8.0.4",
 12 |     "babel-plugin-named-asset-import": "^0.2.3",
 13 |     "babel-preset-react-app": "^6.1.0",
 14 |     "bfj": "6.1.1",
 15 |     "case-sensitive-paths-webpack-plugin": "2.1.2",
 16 |     "chalk": "2.4.1",
 17 |     "css-loader": "1.0.0",
 18 |     "dotenv": "6.0.0",
 19 |     "dotenv-expand": "4.2.0",
 20 |     "eslint": "5.6.0",
 21 |     "eslint-config-react-app": "^3.0.5",
 22 |     "eslint-loader": "2.1.1",
 23 |     "eslint-plugin-flowtype": "2.50.1",
 24 |     "eslint-plugin-import": "2.14.0",
 25 |     "eslint-plugin-jsx-a11y": "6.1.2",
 26 |     "eslint-plugin-react": "7.11.1",
 27 |     "file-loader": "2.0.0",
 28 |     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
 29 |     "fs-extra": "7.0.0",
 30 |     "html-webpack-plugin": "4.0.0-alpha.2",
 31 |     "identity-obj-proxy": "3.0.0",
 32 |     "jest": "23.6.0",
 33 |     "jest-pnp-resolver": "1.0.1",
 34 |     "jest-resolve": "23.6.0",
 35 |     "mini-css-extract-plugin": "0.4.3",
 36 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 37 |     "pnp-webpack-plugin": "1.1.0",
 38 |     "postcss-flexbugs-fixes": "4.1.0",
 39 |     "postcss-loader": "3.0.0",
 40 |     "postcss-preset-env": "6.0.6",
 41 |     "postcss-safe-parser": "4.0.1",
 42 |     "react": "^16.6.3",
 43 |     "react-app-polyfill": "^0.1.3",
 44 |     "react-dev-utils": "^6.1.1",
 45 |     "react-dom": "^16.6.3",
 46 |     "react-web-gifted-chat": "file:../",
 47 |     "resolve": "1.8.1",
 48 |     "sass-loader": "7.1.0",
 49 |     "style-loader": "0.23.0",
 50 |     "terser-webpack-plugin": "1.1.0",
 51 |     "url-loader": "1.1.1",
 52 |     "webpack": "4.19.1",
 53 |     "webpack-dev-server": "3.1.9",
 54 |     "webpack-manifest-plugin": "2.0.4",
 55 |     "workbox-webpack-plugin": "3.6.3"
 56 |   },
 57 |   "scripts": {
 58 |     "start": "node scripts/start.js",
 59 |     "build": "node scripts/build.js",
 60 |     "test": "node scripts/test.js",
 61 |     "sync": "sane 'cd ..&&yarn compile&&cd example&&/usr/bin/rsync -v -a --exclude .git --exclude example --exclude __tests__ --exclude node_modules ../ ./node_modules/react-web-gifted-chat/' ../src --watchman"
 62 |   },
 63 |   "eslintConfig": {
 64 |     "extends": "react-app"
 65 |   },
 66 |   "browserslist": [
 67 |     ">0.2%",
 68 |     "not dead",
 69 |     "not ie <= 11",
 70 |     "not op_mini all"
 71 |   ],
 72 |   "jest": {
 73 |     "collectCoverageFrom": [
 74 |       "src/**/*.{js,jsx,ts,tsx}",
 75 |       "!src/**/*.d.ts"
 76 |     ],
 77 |     "resolver": "jest-pnp-resolver",
 78 |     "setupFiles": [
 79 |       "react-app-polyfill/jsdom"
 80 |     ],
 81 |     "testMatch": [
 82 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 83 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
 84 |     ],
 85 |     "testEnvironment": "jsdom",
 86 |     "testURL": "http://localhost",
 87 |     "transform": {
 88 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
 89 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 90 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 91 |     },
 92 |     "transformIgnorePatterns": [
 93 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
 94 |       "^.+\\.module\\.(css|sass|scss)$"
 95 |     ],
 96 |     "moduleNameMapper": {
 97 |       "^react-native$": "react-native-web",
 98 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
 99 |     },
100 |     "moduleFileExtensions": [
101 |       "web.js",
102 |       "js",
103 |       "web.ts",
104 |       "ts",
105 |       "web.tsx",
106 |       "tsx",
107 |       "json",
108 |       "web.jsx",
109 |       "jsx",
110 |       "node"
111 |     ]
112 |   },
113 |   "babel": {
114 |     "presets": [
115 |       "react-app"
116 |     ]
117 |   }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/GiftedAvatar.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }], padded-blocks: 0 */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import { Image, Text, View } from 'react-native';
  6 | import Color from './Color';
  7 | import TouchableOpacity from './TouchableOpacity';
  8 | 
  9 | const { carrot, emerald, peterRiver, wisteria, alizarin, turquoise, midnightBlue } = Color;
 10 | 
 11 | export default class GiftedAvatar extends React.Component {
 12 |   setAvatarColor() {
 13 |     const userName = this.props.user.name || '';
 14 |     const name = userName.toUpperCase().split(' ');
 15 |     if (name.length === 1) {
 16 |       this.avatarName = `${name[0].charAt(0)}`;
 17 |     } else if (name.length > 1) {
 18 |       this.avatarName = `${name[0].charAt(0)}${name[1].charAt(0)}`;
 19 |     } else {
 20 |       this.avatarName = '';
 21 |     }
 22 | 
 23 |     let sumChars = 0;
 24 |     for (let i = 0; i < userName.length; i += 1) {
 25 |       sumChars += userName.charCodeAt(i);
 26 |     }
 27 | 
 28 |     // inspired by https://github.com/wbinnssmith/react-user-avatar
 29 |     // colors from https://flatuicolors.com/
 30 |     const colors = [carrot, emerald, peterRiver, wisteria, alizarin, turquoise, midnightBlue];
 31 | 
 32 |     this.avatarColor = colors[sumChars % colors.length];
 33 |   }
 34 | 
 35 |   renderAvatar() {
 36 |     if (typeof this.props.user.avatar === 'function') {
 37 |       return this.props.user.avatar();
 38 |     } if (typeof this.props.user.avatar === 'string') {
 39 |       return <Image source={{ uri: this.props.user.avatar }} style={[styles.avatarStyle, this.props.avatarStyle]} />;
 40 |     } if (typeof this.props.user.avatar === 'number') {
 41 |       return <Image source={this.props.user.avatar} style={[styles.avatarStyle, this.props.avatarStyle]} />;
 42 |     }
 43 |     return null;
 44 |   }
 45 | 
 46 |   renderInitials() {
 47 |     return <Text style={[styles.textStyle, this.props.textStyle]}>{this.avatarName}</Text>;
 48 |   }
 49 | 
 50 |   render() {
 51 |     if (!this.props.user.name && !this.props.user.avatar) {
 52 |       // render placeholder
 53 |       return (
 54 |         <View
 55 |           style={[styles.avatarStyle, styles.avatarTransparent, this.props.avatarStyle]}
 56 |           accessibilityTraits="image"
 57 |         />
 58 |       );
 59 |     }
 60 |     if (this.props.user.avatar) {
 61 |       return (
 62 |         <TouchableOpacity
 63 |           disabled={!this.props.onPress}
 64 |           onPress={() => {
 65 |             const { onPress, ...other } = this.props;
 66 |             if (this.props.onPress) {
 67 |               this.props.onPress(other);
 68 |             }
 69 |           }}
 70 |           accessibilityTraits="image"
 71 |         >
 72 |           {this.renderAvatar()}
 73 |         </TouchableOpacity>
 74 |       );
 75 |     }
 76 | 
 77 |     this.setAvatarColor();
 78 | 
 79 |     return (
 80 |       <TouchableOpacity
 81 |         disabled={!this.props.onPress}
 82 |         onPress={() => {
 83 |           const { onPress, ...other } = this.props;
 84 |           if (this.props.onPress) {
 85 |             this.props.onPress(other);
 86 |           }
 87 |         }}
 88 |         style={{ ...styles.avatarStyle, backgroundColor: this.avatarColor, ...this.props.avatarStyle }}
 89 |         accessibilityTraits="image"
 90 |       >
 91 |         {this.renderInitials()}
 92 |       </TouchableOpacity>
 93 |     );
 94 |   }
 95 | }
 96 | 
 97 | const styles = {
 98 |   avatarStyle: {
 99 |     display: 'flex',
100 |     justifyContent: 'center',
101 |     alignItems: 'center',
102 |     width: 40,
103 |     height: 40,
104 |     borderRadius: 20,
105 |   },
106 |   avatarTransparent: {
107 |     backgroundColor: Color.backgroundTransparent,
108 |   },
109 |   textStyle: {
110 |     color: Color.white,
111 |     fontSize: 16,
112 |     backgroundColor: Color.backgroundTransparent,
113 |     fontWeight: '100',
114 |   },
115 | };
116 | 
117 | GiftedAvatar.defaultProps = {
118 |   user: {
119 |     name: null,
120 |     avatar: null,
121 |   },
122 |   onPress: null,
123 |   avatarStyle: {},
124 |   textStyle: {},
125 | };
126 | 
127 | GiftedAvatar.propTypes = {
128 |   user: PropTypes.object,
129 |   onPress: PropTypes.func,
130 |   avatarStyle: Image.propTypes.style,
131 |   textStyle: Text.propTypes.style,
132 | };
133 | 


--------------------------------------------------------------------------------
/example/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const config = require('../config/webpack.config.dev');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 79 |     const appName = require(paths.appPackageJson).name;
 80 |     const urls = prepareUrls(protocol, HOST, port);
 81 |     // Create a webpack compiler that is configured with custom messages.
 82 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 83 |     // Load proxy config
 84 |     const proxySetting = require(paths.appPackageJson).proxy;
 85 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 86 |     // Serve webpack assets generated by the compiler over a web server.
 87 |     const serverConfig = createDevServerConfig(
 88 |       proxyConfig,
 89 |       urls.lanUrlForConfig
 90 |     );
 91 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 92 |     // Launch WebpackDevServer.
 93 |     devServer.listen(port, HOST, err => {
 94 |       if (err) {
 95 |         return console.log(err);
 96 |       }
 97 |       if (isInteractive) {
 98 |         clearConsole();
 99 |       }
100 |       console.log(chalk.cyan('Starting the development server...\n'));
101 |       openBrowser(urls.localUrlForBrowser);
102 |     });
103 | 
104 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
105 |       process.on(sig, function() {
106 |         devServer.close();
107 |         process.exit();
108 |       });
109 |     });
110 |   })
111 |   .catch(err => {
112 |     if (err && err.message) {
113 |       console.log(err.message);
114 |     }
115 |     process.exit(1);
116 |   });
117 | 


--------------------------------------------------------------------------------
/src/Message.js:
--------------------------------------------------------------------------------
  1 | /* eslint react-native/no-inline-styles: 0 */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | import { View, ViewPropTypes, StyleSheet } from 'react-native';
  6 | 
  7 | import Avatar from './Avatar';
  8 | import Bubble from './Bubble';
  9 | import SystemMessage from './SystemMessage';
 10 | import Day from './Day';
 11 | 
 12 | import { isSameUser, isSameDay } from './utils';
 13 | 
 14 | const styles = {
 15 |   left: StyleSheet.create({
 16 |     container: {
 17 |       flexDirection: 'row',
 18 |       alignItems: 'flex-end',
 19 |       justifyContent: 'flex-start',
 20 |       marginLeft: 8,
 21 |       marginRight: 0,
 22 |     },
 23 |   }),
 24 |   right: StyleSheet.create({
 25 |     container: {
 26 |       flexDirection: 'row',
 27 |       alignItems: 'flex-end',
 28 |       justifyContent: 'flex-end',
 29 |       marginLeft: 0,
 30 |       marginRight: 8,
 31 |     },
 32 |   }),
 33 | };
 34 | 
 35 | export default class Message extends React.Component {
 36 | 
 37 |   shouldComponentUpdate(nextProps) {
 38 |     const next = nextProps.currentMessage;
 39 |     const current = this.props.currentMessage;
 40 |     return (
 41 |       next.send !== current.send ||
 42 |       next.received !== current.received ||
 43 |       next.pending !== current.pending ||
 44 |       next.createdAt !== current.createdAt ||
 45 |       next.text !== current.text ||
 46 |       next.image !== current.image ||
 47 |       next.video !== current.video
 48 |     );
 49 |   }
 50 | 
 51 |   getInnerComponentProps = () => {
 52 |     const { containerStyle, ...props } = this.props;
 53 |     return {
 54 |       ...props,
 55 |       isSameUser,
 56 |       isSameDay,
 57 |     };
 58 |   };
 59 | 
 60 |   renderDay() {
 61 |     if (this.props.currentMessage.createdAt) {
 62 |       const dayProps = this.getInnerComponentProps();
 63 |       if (this.props.renderDay) {
 64 |         return this.props.renderDay(dayProps);
 65 |       }
 66 |       return <Day {...dayProps} />;
 67 |     }
 68 |     return null;
 69 |   }
 70 | 
 71 |   renderBubble() {
 72 |     const bubbleProps = this.getInnerComponentProps();
 73 |     if (this.props.renderBubble) {
 74 |       return this.props.renderBubble(bubbleProps);
 75 |     }
 76 |     return <Bubble {...bubbleProps} />;
 77 |   }
 78 | 
 79 |   renderSystemMessage() {
 80 |     const systemMessageProps = this.getInnerComponentProps();
 81 |     if (this.props.renderSystemMessage) {
 82 |       return this.props.renderSystemMessage(systemMessageProps);
 83 |     }
 84 |     return <SystemMessage {...systemMessageProps} />;
 85 |   }
 86 | 
 87 |   renderAvatar() {
 88 |     if (this.props.user.id === this.props.currentMessage.user.id && !this.props.showUserAvatar) {
 89 |       return null;
 90 |     }
 91 |     const avatarProps = this.getInnerComponentProps();
 92 |     const { currentMessage } = avatarProps;
 93 |     if (currentMessage.user.avatar === null) {
 94 |       return null;
 95 |     }
 96 |     return <Avatar {...avatarProps} />;
 97 |   }
 98 | 
 99 |   render() {
100 |     const sameUser = isSameUser(this.props.currentMessage, this.props.nextMessage);
101 |     return (
102 |       <View>
103 |         {this.renderDay()}
104 |         {this.props.currentMessage.system ? (
105 |           this.renderSystemMessage()
106 |         ) : (
107 |           <View
108 |             style={[
109 |               styles[this.props.position].container,
110 |               { marginBottom: sameUser ? 2 : 10 },
111 |               !this.props.inverted && { marginBottom: 2 },
112 |               this.props.containerStyle[this.props.position],
113 |             ]}
114 |           >
115 |             {this.props.position === 'left' ? this.renderAvatar() : null}
116 |             {this.renderBubble()}
117 |             {this.props.position === 'right' ? this.renderAvatar() : null}
118 |           </View>
119 |         )}
120 |       </View>
121 |     );
122 |   }
123 | 
124 | }
125 | 
126 | Message.defaultProps = {
127 |   renderAvatar: undefined,
128 |   renderBubble: null,
129 |   renderDay: null,
130 |   renderSystemMessage: null,
131 |   position: 'left',
132 |   currentMessage: {},
133 |   nextMessage: {},
134 |   previousMessage: {},
135 |   user: {},
136 |   containerStyle: {},
137 |   showUserAvatar: true,
138 |   inverted: true,
139 | };
140 | 
141 | Message.propTypes = {
142 |   renderAvatar: PropTypes.func,
143 |   showUserAvatar: PropTypes.bool,
144 |   renderBubble: PropTypes.func,
145 |   renderDay: PropTypes.func,
146 |   renderSystemMessage: PropTypes.func,
147 |   position: PropTypes.oneOf(['left', 'right']),
148 |   currentMessage: PropTypes.object,
149 |   nextMessage: PropTypes.object,
150 |   previousMessage: PropTypes.object,
151 |   user: PropTypes.object,
152 |   inverted: PropTypes.bool,
153 |   containerStyle: PropTypes.shape({
154 |     left: ViewPropTypes.style,
155 |     right: ViewPropTypes.style,
156 |   }),
157 | };
158 | 


--------------------------------------------------------------------------------
/src/MessageText.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | import PropTypes from 'prop-types';
  3 | import React from 'react';
  4 | import {
  5 |   Linking,
  6 |   StyleSheet,
  7 |   Text,
  8 |   View,
  9 |   ViewPropTypes,
 10 | } from 'react-native';
 11 | import ParsedText from './ParsedText';
 12 | 
 13 | const WWW_URL_PATTERN = /^www\./i;
 14 | 
 15 | export default class MessageText extends React.Component {
 16 | 
 17 |   constructor(props) {
 18 |     super(props);
 19 |     this.onUrlPress = this.onUrlPress.bind(this);
 20 |     this.onPhonePress = this.onPhonePress.bind(this);
 21 |     this.onEmailPress = this.onEmailPress.bind(this);
 22 |   }
 23 | 
 24 |   shouldComponentUpdate(nextProps) {
 25 |     return this.props.currentMessage.text !== nextProps.currentMessage.text;
 26 |   }
 27 | 
 28 |   onUrlPress(url) {
 29 |     // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
 30 |     // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
 31 |     if (WWW_URL_PATTERN.test(url)) {
 32 |       this.onUrlPress(`http://${url}`);
 33 |     } else {
 34 |       Linking.canOpenURL(url).then((supported) => {
 35 |         if (!supported) {
 36 |           // eslint-disable-next-line
 37 |           console.error('No handler for URL:', url);
 38 |         } else {
 39 |           Linking.openURL(url);
 40 |         }
 41 |       });
 42 |     }
 43 |   }
 44 | 
 45 |   onPhonePress(phone) {
 46 |     const options = ['Call', 'Text', 'Cancel'];
 47 |     const cancelButtonIndex = options.length - 1;
 48 |     this.context.actionSheet().showActionSheetWithOptions({
 49 |       options,
 50 |       cancelButtonIndex,
 51 |     },
 52 |     (buttonIndex) => {
 53 |       // switch (buttonIndex) {
 54 |       //   case 0:
 55 |       //     Communications.phonecall(phone, true);
 56 |       //     break;
 57 |       //   case 1:
 58 |       //     Communications.text(phone);
 59 |       //     break;
 60 |       // }
 61 |     });
 62 |   }
 63 | 
 64 |   onEmailPress(email) {
 65 |     // Communications.email(email, null, null, null, null);
 66 |   }
 67 | 
 68 |   render() {
 69 |     const linkStyle = StyleSheet.flatten([styles[this.props.position].link, this.props.linkStyle[this.props.position]]);
 70 |     return (
 71 |       <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
 72 |         <ParsedText
 73 |           style={[
 74 |             styles[this.props.position].text,
 75 |             this.props.textStyle[this.props.position],
 76 |             this.props.customTextStyle,
 77 |           ]}
 78 |           parse={[
 79 |             ...this.props.parsePatterns(linkStyle),
 80 |             { type: 'url', style: linkStyle, onPress: this.onUrlPress },
 81 |             { type: 'phone', style: linkStyle, onPress: this.onPhonePress },
 82 |             { type: 'email', style: linkStyle, onPress: this.onEmailPress },
 83 |           ]}
 84 |           childrenProps={{ ...this.props.textProps }}
 85 |         >
 86 |           {this.props.currentMessage.text}
 87 |         </ParsedText>
 88 |       </View>
 89 |     );
 90 |   }
 91 | 
 92 | }
 93 | 
 94 | const textStyle = {
 95 |   fontSize: 16,
 96 |   lineHeight: 20,
 97 |   marginTop: 5,
 98 |   marginBottom: 5,
 99 |   marginLeft: 10,
100 |   marginRight: 10,
101 | };
102 | 
103 | const styles = {
104 |   left: StyleSheet.create({
105 |     container: {},
106 |     text: {
107 |       color: 'black',
108 |       ...textStyle,
109 |     },
110 |     link: {
111 |       color: 'black',
112 |       textDecorationLine: 'underline',
113 |     },
114 |   }),
115 |   right: StyleSheet.create({
116 |     container: {},
117 |     text: {
118 |       color: 'white',
119 |       ...textStyle,
120 |     },
121 |     link: {
122 |       color: 'white',
123 |       textDecorationLine: 'underline',
124 |     },
125 |   }),
126 | };
127 | 
128 | MessageText.contextTypes = {
129 |   actionSheet: PropTypes.func,
130 | };
131 | 
132 | MessageText.defaultProps = {
133 |   position: 'left',
134 |   currentMessage: {
135 |     text: '',
136 |   },
137 |   containerStyle: {},
138 |   textStyle: {},
139 |   linkStyle: {},
140 |   customTextStyle: {},
141 |   textProps: {},
142 |   parsePatterns: () => [],
143 | };
144 | 
145 | MessageText.propTypes = {
146 |   position: PropTypes.oneOf(['left', 'right']),
147 |   currentMessage: PropTypes.object,
148 |   containerStyle: PropTypes.shape({
149 |     left: ViewPropTypes.style,
150 |     right: ViewPropTypes.style,
151 |   }),
152 |   textStyle: PropTypes.shape({
153 |     left: Text.propTypes.style,
154 |     right: Text.propTypes.style,
155 |   }),
156 |   linkStyle: PropTypes.shape({
157 |     left: Text.propTypes.style,
158 |     right: Text.propTypes.style,
159 |   }),
160 |   parsePatterns: PropTypes.func,
161 |   textProps: PropTypes.object,
162 |   customTextStyle: Text.propTypes.style,
163 | };
164 | 


--------------------------------------------------------------------------------
/example/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/example/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const config = require('./webpack.config.dev');
  8 | const paths = require('./paths');
  9 | const fs = require('fs');
 10 | 
 11 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 12 | const host = process.env.HOST || '0.0.0.0';
 13 | 
 14 | module.exports = function(proxy, allowedHost) {
 15 |   return {
 16 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 17 |     // websites from potentially accessing local content through DNS rebinding:
 18 |     // https://github.com/webpack/webpack-dev-server/issues/887
 19 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 20 |     // However, it made several existing use cases such as development in cloud
 21 |     // environment or subdomains in development significantly more complicated:
 22 |     // https://github.com/facebook/create-react-app/issues/2271
 23 |     // https://github.com/facebook/create-react-app/issues/2233
 24 |     // While we're investigating better solutions, for now we will take a
 25 |     // compromise. Since our WDS configuration only serves files in the `public`
 26 |     // folder we won't consider accessing them a vulnerability. However, if you
 27 |     // use the `proxy` feature, it gets more dangerous because it can expose
 28 |     // remote code execution vulnerabilities in backends like Django and Rails.
 29 |     // So we will disable the host check normally, but enable it if you have
 30 |     // specified the `proxy` setting. Finally, we let you override it if you
 31 |     // really know what you're doing with a special environment variable.
 32 |     disableHostCheck:
 33 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 34 |     // Enable gzip compression of generated files.
 35 |     compress: true,
 36 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 37 |     // It will still show compile warnings and errors with this setting.
 38 |     clientLogLevel: 'none',
 39 |     // By default WebpackDevServer serves physical files from current directory
 40 |     // in addition to all the virtual build products that it serves from memory.
 41 |     // This is confusing because those files won’t automatically be available in
 42 |     // production build folder unless we copy them. However, copying the whole
 43 |     // project directory is dangerous because we may expose sensitive files.
 44 |     // Instead, we establish a convention that only files in `public` directory
 45 |     // get served. Our build script will copy `public` into the `build` folder.
 46 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 47 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 48 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 49 |     // Note that we only recommend to use `public` folder as an escape hatch
 50 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 51 |     // for some reason broken when imported through Webpack. If you just want to
 52 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 53 |     contentBase: paths.appPublic,
 54 |     // By default files from `contentBase` will not trigger a page reload.
 55 |     watchContentBase: true,
 56 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 57 |     // for the WebpackDevServer client so it can learn when the files were
 58 |     // updated. The WebpackDevServer client is included as an entry point
 59 |     // in the Webpack development configuration. Note that only changes
 60 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 61 |     hot: true,
 62 |     // It is important to tell WebpackDevServer to use the same "root" path
 63 |     // as we specified in the config. In development, we always serve from /.
 64 |     publicPath: config.output.publicPath,
 65 |     // WebpackDevServer is noisy by default so we emit custom message instead
 66 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 67 |     quiet: true,
 68 |     // Reportedly, this avoids CPU overload on some systems.
 69 |     // https://github.com/facebook/create-react-app/issues/293
 70 |     // src/node_modules is not ignored to support absolute imports
 71 |     // https://github.com/facebook/create-react-app/issues/1065
 72 |     watchOptions: {
 73 |       ignored: [
 74 |         /node_modules([\\]+|\/)+(?!react-web-gifted-chat)/, 
 75 |         /\react-web-gifted-chat([\\]+|\/)node_modules/
 76 |       ]
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebook/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app, server) {
 90 |       if (fs.existsSync(paths.proxySetup)) {
 91 |         // This registers user provided middleware for proxy reasons
 92 |         require(paths.proxySetup)(app);
 93 |       }
 94 | 
 95 |       // This lets us fetch source contents from webpack for the error overlay
 96 |       app.use(evalSourceMapMiddleware(server));
 97 |       // This lets us open files from the runtime error overlay.
 98 |       app.use(errorOverlayMiddleware());
 99 | 
100 |       // This service worker file is effectively a 'no-op' that will reset any
101 |       // previous service worker registered for the same host:port combination.
102 |       // We do this in development to avoid hitting the production cache if
103 |       // it used the same host and port.
104 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
105 |       app.use(noopServiceWorkerMiddleware());
106 |     },
107 |   };
108 | };
109 | 


--------------------------------------------------------------------------------
/src/MessageContainer.js:
--------------------------------------------------------------------------------
  1 | /* eslint
  2 |     no-console: 0,
  3 |     no-param-reassign: 0,
  4 |     no-use-before-define: ["error", { "variables": false }],
  5 |     no-return-assign: 0,
  6 |     react/no-string-refs: 0,
  7 |     react/sort-comp: 0
  8 | */
  9 | 
 10 | import PropTypes from 'prop-types';
 11 | import React from 'react';
 12 | 
 13 | import { FlatList, View, StyleSheet, Keyboard, Text } from 'react-native';
 14 | 
 15 | import LoadEarlier from './LoadEarlier';
 16 | import Message from './Message';
 17 | import Color from './Color';
 18 | import WebScrollView from './WebScrollView';
 19 | import TouchableOpacity from './TouchableOpacity';
 20 | 
 21 | export default class MessageContainer extends React.PureComponent {
 22 |   state = {
 23 |     showScrollBottom: false,
 24 |     imageMessages: [],
 25 |   }
 26 | 
 27 |   static getDerivedStateFromProps(props, state) {
 28 |     const { messages } = props;
 29 |     const imageMessages = messages.filter(item => item.image);
 30 |     return { imageMessages };
 31 |   }
 32 | 
 33 |   renderFooter = () => {
 34 |     if (this.props.renderFooter) {
 35 |       const footerProps = {
 36 |         ...this.props,
 37 |       };
 38 |       return this.props.renderFooter(footerProps);
 39 |     }
 40 |     return null;
 41 |   };
 42 | 
 43 |   renderLoadEarlier = () => {
 44 |     if (this.props.loadEarlier === true) {
 45 |       const loadEarlierProps = {
 46 |         ...this.props,
 47 |       };
 48 |       if (this.props.renderLoadEarlier) {
 49 |         return this.props.renderLoadEarlier(loadEarlierProps);
 50 |       }
 51 |       return (
 52 |         <LoadEarlier {...loadEarlierProps} />
 53 |       );
 54 |     }
 55 |     return null;
 56 |   };
 57 | 
 58 |   scrollTo(options) {
 59 |     // this._invertibleScrollViewRef.scrollTo(options);
 60 |   }
 61 | 
 62 | 
 63 |   scrollToBottom = () => {
 64 |     this.scrollTo({ offset: 0, animated: 'true' });
 65 |   }
 66 | 
 67 |   renderRow = ({ item, index }) => {
 68 |     if (!item.id && item.id !== 0) {
 69 |       console.warn('GiftedChat: `id` is missing for message', JSON.stringify(item));
 70 |     }
 71 |     if (!item.user) {
 72 |       if (!item.system) {
 73 |         console.warn('GiftedChat: `user` is missing for message', JSON.stringify(item));
 74 |       }
 75 |       item.user = {};
 76 |     }
 77 |     const { messages, ...restProps } = this.props;
 78 |     const previousMessage = messages[index + 1] || {};
 79 |     const nextMessage = messages[index - 1] || {};
 80 |     const { imageMessages } = this.state;
 81 | 
 82 |     const messageProps = {
 83 |       ...restProps,
 84 |       key: item.id,
 85 |       currentMessage: item,
 86 |       previousMessage,
 87 |       nextMessage,
 88 |       position: item.user.id === this.props.user.id ? 'right' : 'left',
 89 |       imageMessages,
 90 |     };
 91 | 
 92 |     if (this.props.renderMessage) {
 93 |       return this.props.renderMessage(messageProps);
 94 |     }
 95 |     return <Message {...messageProps} />;
 96 |   };
 97 | 
 98 |   renderHeaderWrapper = () => <View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>;
 99 | 
100 |   renderScrollToBottomWrapper() {
101 |     const scrollToBottomComponent = (
102 |       <View style={styles.scrollToBottomStyle}>
103 |         <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
104 |           <Text>V</Text>
105 |         </TouchableOpacity>
106 |       </View>
107 |     );
108 | 
109 |     if (this.props.scrollToBottomComponent) {
110 |       return (
111 |         <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
112 |           {this.props.scrollToBottomComponent}
113 |         </TouchableOpacity>);
114 |     }
115 |     return scrollToBottomComponent;
116 |   }
117 | 
118 |   keyExtractor = item => `${item.id}`;
119 | 
120 |   render() {
121 |     if (this.props.messages.length === 0) {
122 |       return <View style={styles.container} />;
123 |     }
124 |     return (
125 |       <View
126 |         style={{ flex: 1 }}
127 |         onLayout={() => {
128 |           // this.flatListRef.current.scrollTo({x: 0, y: 0, animated: true});
129 |         }
130 |       }
131 |       >
132 |         {this.state.showScrollBottom && this.props.scrollToBottom ? this.renderScrollToBottomWrapper() : null}
133 |         <WebScrollView
134 |           ref={this.flatListRef}
135 |           keyExtractor={this.keyExtractor}
136 |           extraData={this.props.extraData}
137 |           enableEmptySections
138 |           automaticallyAdjustContentInsets={false}
139 |           inverted={this.props.inverted}
140 |           data={this.props.messages}
141 |           style={styles.listStyle}
142 |           contentContainerStyle={styles.contentContainerStyle}
143 |           renderItem={this.renderRow}
144 |           ListFooterComponent={this.renderHeaderWrapper}
145 |           ListHeaderComponent={this.renderFooter}
146 |         />
147 |       </View>
148 |     );
149 |   }
150 | }
151 | 
152 | const styles = StyleSheet.create({
153 |   container: {
154 |     flex: 1,
155 |   },
156 |   contentContainerStyle: {
157 |     justifyContent: 'flex-end',
158 |   },
159 |   headerWrapper: {
160 |     flex: 1,
161 |   },
162 |   listStyle: {
163 |     flex: 1,
164 |   },
165 |   scrollToBottomStyle: {
166 |     opacity: 0.8,
167 |     position: 'absolute',
168 |     paddingHorizontal: 15,
169 |     paddingVertical: 8,
170 |     right: 10,
171 |     bottom: 30,
172 |     zIndex: 999,
173 |     height: 40,
174 |     width: 40,
175 |     borderRadius: 20,
176 |     backgroundColor: Color.white,
177 |     alignItems: 'center',
178 |     justifyContent: 'center',
179 |     shadowColor: Color.black,
180 |     shadowOpacity: 0.5,
181 |     shadowOffset: { width: 0, height: 0 },
182 |     shadowRadius: 1,
183 |   },
184 | });
185 | 
186 | MessageContainer.defaultProps = {
187 |   messages: [],
188 |   user: {},
189 |   renderFooter: null,
190 |   renderMessage: null,
191 |   onLoadEarlier: () => {},
192 |   inverted: true,
193 |   loadEarlier: false,
194 |   listViewProps: {},
195 |   invertibleScrollViewProps: {},
196 |   extraData: null,
197 |   scrollToBottom: false,
198 |   scrollToBottomOffset: 200,
199 | };
200 | 
201 | MessageContainer.propTypes = {
202 |   messages: PropTypes.arrayOf(PropTypes.object),
203 |   user: PropTypes.object,
204 |   renderFooter: PropTypes.func,
205 |   renderMessage: PropTypes.func,
206 |   renderLoadEarlier: PropTypes.func,
207 |   onLoadEarlier: PropTypes.func,
208 |   listViewProps: PropTypes.object,
209 |   inverted: PropTypes.bool,
210 |   loadEarlier: PropTypes.bool,
211 |   invertibleScrollViewProps: PropTypes.object,
212 |   extraData: PropTypes.object,
213 |   scrollToBottom: PropTypes.bool,
214 |   scrollToBottomOffset: PropTypes.number,
215 |   scrollToBottomComponent: PropTypes.func,
216 | };
217 | 


--------------------------------------------------------------------------------
/example/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const config = require('../config/webpack.config.prod');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // We require that you explicitly set browsers and do not fall back to
 52 | // browserslist defaults.
 53 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 54 | checkBrowsers(paths.appPath, isInteractive)
 55 |   .then(() => {
 56 |     // First, read the current file sizes in build directory.
 57 |     // This lets us display how much they changed later.
 58 |     return measureFileSizesBeforeBuild(paths.appBuild);
 59 |   })
 60 |   .then(previousFileSizes => {
 61 |     // Remove all content but keep the directory so that
 62 |     // if you're in it, you don't end up in Trash
 63 |     fs.emptyDirSync(paths.appBuild);
 64 |     // Merge with the public folder
 65 |     copyPublicFolder();
 66 |     // Start the webpack build
 67 |     return build(previousFileSizes);
 68 |   })
 69 |   .then(
 70 |     ({ stats, previousFileSizes, warnings }) => {
 71 |       if (warnings.length) {
 72 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 73 |         console.log(warnings.join('\n\n'));
 74 |         console.log(
 75 |           '\nSearch for the ' +
 76 |             chalk.underline(chalk.yellow('keywords')) +
 77 |             ' to learn more about each warning.'
 78 |         );
 79 |         console.log(
 80 |           'To ignore, add ' +
 81 |             chalk.cyan('// eslint-disable-next-line') +
 82 |             ' to the line before.\n'
 83 |         );
 84 |       } else {
 85 |         console.log(chalk.green('Compiled successfully.\n'));
 86 |       }
 87 | 
 88 |       console.log('File sizes after gzip:\n');
 89 |       printFileSizesAfterBuild(
 90 |         stats,
 91 |         previousFileSizes,
 92 |         paths.appBuild,
 93 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 94 |         WARN_AFTER_CHUNK_GZIP_SIZE
 95 |       );
 96 |       console.log();
 97 | 
 98 |       const appPackage = require(paths.appPackageJson);
 99 |       const publicUrl = paths.publicUrl;
100 |       const publicPath = config.output.publicPath;
101 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
102 |       printHostingInstructions(
103 |         appPackage,
104 |         publicUrl,
105 |         publicPath,
106 |         buildFolder,
107 |         useYarn
108 |       );
109 |     },
110 |     err => {
111 |       console.log(chalk.red('Failed to compile.\n'));
112 |       printBuildError(err);
113 |       process.exit(1);
114 |     }
115 |   )
116 |   .catch(err => {
117 |     if (err && err.message) {
118 |       console.log(err.message);
119 |     }
120 |     process.exit(1);
121 |   });
122 | 
123 | // Create the production build and print the deployment instructions.
124 | function build(previousFileSizes) {
125 |   console.log('Creating an optimized production build...');
126 | 
127 |   let compiler = webpack(config);
128 |   return new Promise((resolve, reject) => {
129 |     compiler.run((err, stats) => {
130 |       let messages;
131 |       if (err) {
132 |         if (!err.message) {
133 |           return reject(err);
134 |         }
135 |         messages = formatWebpackMessages({
136 |           errors: [err.message],
137 |           warnings: [],
138 |         });
139 |       } else {
140 |         messages = formatWebpackMessages(
141 |           stats.toJson({ all: false, warnings: true, errors: true })
142 |         );
143 |       }
144 |       if (messages.errors.length) {
145 |         // Only keep the first error. Others are often indicative
146 |         // of the same problem, but confuse the reader with noise.
147 |         if (messages.errors.length > 1) {
148 |           messages.errors.length = 1;
149 |         }
150 |         return reject(new Error(messages.errors.join('\n\n')));
151 |       }
152 |       if (
153 |         process.env.CI &&
154 |         (typeof process.env.CI !== 'string' ||
155 |           process.env.CI.toLowerCase() !== 'false') &&
156 |         messages.warnings.length
157 |       ) {
158 |         console.log(
159 |           chalk.yellow(
160 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
161 |               'Most CI servers set it automatically.\n'
162 |           )
163 |         );
164 |         return reject(new Error(messages.warnings.join('\n\n')));
165 |       }
166 | 
167 |       const resolveArgs = {
168 |         stats,
169 |         previousFileSizes,
170 |         warnings: messages.warnings,
171 |       };
172 |       if (writeStatsJson) {
173 |         return bfj
174 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
175 |           .then(() => resolve(resolveArgs))
176 |           .catch(error => reject(new Error(error)));
177 |       }
178 | 
179 |       return resolve(resolveArgs);
180 |     });
181 |   });
182 | }
183 | 
184 | function copyPublicFolder() {
185 |   fs.copySync(paths.appPublic, paths.appBuild, {
186 |     dereference: true,
187 |     filter: file => file !== paths.appHtml,
188 |   });
189 | }
190 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Gifted Chat
  2 | 
  3 | Web fork of most complete chat UI for React Web (formerly known as Gifted Messenger).
  4 | 
  5 | ## Demo is available [here](https://codesandbox.io/s/pw6zzl542x)
  6 | 
  7 | ![](https://thumbs.gfycat.com/VibrantRecklessIriomotecat-size_restricted.gif)
  8 | 
  9 | ## Article
 10 | The article how to create working chat in 20 minutes is available on medium - [here](https://medium.com/@janromaniak/working-realtime-chat-in-react-in-less-than-20-minutes-335f9cf73d69)
 11 | 
 12 | ## Features
 13 | 
 14 | - Fully customizable components
 15 | - Composer actions (to attach photos, etc.)
 16 | - Load earlier messages
 17 | - Copy messages to clipboard
 18 | - Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)
 19 | - Avatar as user's initials
 20 | - Localized dates
 21 | - Multiline TextInput
 22 | - InputToolbar avoiding keyboard
 23 | 
 24 | 
 25 | ## Installation
 26 | 
 27 | - Using [npm](https://www.npmjs.com/#getting-started): `npm install react-web-gifted-chat --save`
 28 | - Using [Yarn](https://yarnpkg.com/): `yarn add react-web-gifted-chat`
 29 | 
 30 | ## Example
 31 | 
 32 | ```jsx
 33 | import { GiftedChat } from 'react-web-gifted-chat';
 34 | 
 35 | class Example extends React.Component {
 36 | 
 37 |   state = {
 38 |     messages: [],
 39 |   };
 40 | 
 41 |   componentWillMount() {
 42 |     this.setState({
 43 |       messages: [
 44 |         {
 45 |           id: 1,
 46 |           text: 'Hello developer',
 47 |           createdAt: new Date(),
 48 |           user: {
 49 |             id: 2,
 50 |             name: 'React',
 51 |             avatar: 'https://facebook.github.io/react/img/logo_og.png',
 52 |           },
 53 |         },
 54 |       ],
 55 |     });
 56 |   }
 57 | 
 58 |   onSend(messages = []) {
 59 |     this.setState((previousState) => ({
 60 |       messages: GiftedChat.append(previousState.messages, messages),
 61 |     }));
 62 |   }
 63 | 
 64 |   render() {
 65 |     return (
 66 |       <GiftedChat
 67 |         messages={this.state.messages}
 68 |         onSend={(messages) => this.onSend(messages)}
 69 |         user={{
 70 |           id: 1,
 71 |         }}
 72 |       />
 73 |     );
 74 |   }
 75 | 
 76 | }
 77 | ```
 78 | 
 79 | ## Advanced example
 80 | 
 81 | See [example/App.js](example/App.js) for a working demo!
 82 | 
 83 | ## Message object
 84 | 
 85 | e.g.
 86 | 
 87 | ```js
 88 | {
 89 |   id: 1,
 90 |   text: 'My message',
 91 |   createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
 92 |   user: {
 93 |     id: 2,
 94 |     name: 'React',
 95 |     avatar: 'https://facebook.github.io/react/img/logo_og.png',
 96 |   },
 97 |   image: 'https://facebook.github.io/react/img/logo_og.png',
 98 |   // Any additional custom parameters are passed through
 99 | }
100 | ```
101 | 
102 | ## Props
103 | 
104 | - **`messages`** _(Array)_ - Messages to display
105 | - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
106 | - **`placeholder`** _(String)_ - Placeholder when `text` is empty; default is `'Type a message...'`
107 | - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
108 | - **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
109 | - **`onSend`** _(Function)_ - Callback when sending a message
110 | - **`locale`** _(String)_ - Locale to localize the dates
111 | - **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'`
112 | - **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'`
113 | - **`isAnimated`** _(Bool)_ - Animates the view when the keyboard appears
114 | - **`loadEarlier`** _(Bool)_ - Enables the "Load earlier messages" button
115 | - **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
116 | - **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
117 | - **`renderLoading`** _(Function)_ - Render a loading view when initializing
118 | - **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
119 | - **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
120 | - **`showUserAvatar`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
121 | - **`showAvatarForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`
122 | - **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
123 | - **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
124 | - **`renderBubble`** _(Function)_ - Custom message bubble
125 | - **`renderSystemMessage`** _(Function)_ - Custom system message
126 | - **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
127 | - **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
128 | - **`renderMessage`** _(Function)_ - Custom message container
129 | - **`renderMessageText`** _(Function)_ - Custom message text
130 | - **`renderMessageImage`** _(Function)_ - Custom message image
131 | - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
132 | - **`videoProps`** _(Object)_ - Extra props to be passed to the [`<Video>`](https://github.com/react-native-community/react-native-video) component created by the default `renderMessageVideo`
133 | - **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
134 | - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
135 | - **`renderDay`** _(Function)_ - Custom day above a message
136 | - **`renderTime`** _(Function)_ - Custom time inside a message
137 | - **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [example/App.js](example/App.js) for an example
138 | - **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
139 | - **`renderInputToolbar`** _(Function)_ - Custom message composer container
140 | - **`renderComposer`** _(Function)_ - Custom text input message composer
141 | - **`renderActions`** _(Function)_ - Custom action button on the left of the message composer
142 | - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
143 | - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
144 | - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
145 | - **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
146 | - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
147 | - **`listViewProps`** _(Object)_ - Extra props to be passed to the messages [`<ListView>`](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
148 | - **`textInputProps`** _(Object)_ - Extra props to be passed to the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)
149 | - **`keyboardShouldPersistTaps`** _(Enum)_ - Determines whether the keyboard should stay visible after a tap; see [`<ScrollView>`](https://facebook.github.io/react-native/docs/scrollview.html) docs
150 | - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
151 | - **`maxInputLength`** _(Integer)_ - Max message composer TextInput length
152 | - **`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.:
153 | - **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
154 | - **`minComposerHeight`** _(Object)_ - Custom min height of the composer.
155 | - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
156 | 
157 | 
158 | ## License
159 | 
160 | - [MIT](LICENSE)
161 | 
162 | ## Notes for local development
163 | You need to have facebook watchman installed
164 | 
165 | 
166 | 1. `cd example`
167 | 2. `yarn`
168 | 4. `yarn start`
169 | 5. `yarn run sync` in another terminal window (doesn't matter where)
170 | 
171 | If you have any issues, you can clear your watches using `watchman watch-del-all` and try again.
172 | 
173 | ## Author
174 | 
175 | Feel free to ask me question on Twitter [@JanRomaniak](https://www.twitter.com/JanRomaniak)!
176 | 


--------------------------------------------------------------------------------
/src/Bubble.js:
--------------------------------------------------------------------------------
  1 | /* eslint no-use-before-define: ["error", { "variables": false }] */
  2 | 
  3 | import PropTypes from 'prop-types';
  4 | import React from 'react';
  5 | 
  6 | import { Text, Clipboard, StyleSheet, View, ViewPropTypes } from 'react-native';
  7 | 
  8 | 
  9 | import MessageText from './MessageText';
 10 | import MessageImage from './MessageImage';
 11 | import MessageVideo from './MessageVideo';
 12 | 
 13 | import Time from './Time';
 14 | import Color from './Color';
 15 | 
 16 | import { isSameUser, isSameDay } from './utils';
 17 | import TouchableOpacity from './TouchableOpacity';
 18 | 
 19 | export default class Bubble extends React.Component {
 20 | 
 21 |   onLongPress = () => {
 22 |     if (this.props.onLongPress) {
 23 |       this.props.onLongPress(this.context, this.props.currentMessage);
 24 |     } else if (this.props.currentMessage.text) {
 25 |       const options = ['Copy Text', 'Cancel'];
 26 |       const cancelButtonIndex = options.length - 1;
 27 |       this.context.actionSheet().showActionSheetWithOptions(
 28 |         {
 29 |           options,
 30 |           cancelButtonIndex,
 31 |         },
 32 |         (buttonIndex) => {
 33 |           switch (buttonIndex) {
 34 |             case 0:
 35 |               Clipboard.setString(this.props.currentMessage.text);
 36 |               break;
 37 |             default:
 38 |               break;
 39 |           }
 40 |         },
 41 |       );
 42 |     }
 43 |   };
 44 | 
 45 |   handleBubbleToNext() {
 46 |     if (
 47 |       isSameUser(this.props.currentMessage, this.props.nextMessage) &&
 48 |       isSameDay(this.props.currentMessage, this.props.nextMessage)
 49 |     ) {
 50 |       return StyleSheet.flatten([
 51 |         styles[this.props.position].containerToNext,
 52 |         this.props.containerToNextStyle[this.props.position],
 53 |       ]);
 54 |     }
 55 |     return null;
 56 |   }
 57 | 
 58 |   handleBubbleToPrevious() {
 59 |     if (
 60 |       isSameUser(this.props.currentMessage, this.props.previousMessage) &&
 61 |       isSameDay(this.props.currentMessage, this.props.previousMessage)
 62 |     ) {
 63 |       return StyleSheet.flatten([
 64 |         styles[this.props.position].containerToPrevious,
 65 |         this.props.containerToPreviousStyle[this.props.position],
 66 |       ]);
 67 |     }
 68 |     return null;
 69 |   }
 70 | 
 71 |   renderMessageText() {
 72 |     if (this.props.currentMessage.text) {
 73 |       const { containerStyle, wrapperStyle, ...messageTextProps } = this.props;
 74 |       if (this.props.renderMessageText) {
 75 |         return this.props.renderMessageText(messageTextProps);
 76 |       }
 77 |       return <MessageText {...messageTextProps} />;
 78 |     }
 79 |     return null;
 80 |   }
 81 | 
 82 |   renderMessageImage() {
 83 |     if (this.props.currentMessage.image) {
 84 |       const { containerStyle, wrapperStyle, ...messageImageProps } = this.props;
 85 |       if (this.props.renderMessageImage) {
 86 |         return this.props.renderMessageImage(messageImageProps);
 87 |       }
 88 |       return <MessageImage {...messageImageProps} />;
 89 |     }
 90 |     return null;
 91 |   }
 92 | 
 93 |   renderMessageVideo() {
 94 |     if (this.props.currentMessage.video) {
 95 |       const { containerStyle, wrapperStyle, ...messageVideoProps } = this.props;
 96 |       if (this.props.renderMessageVideo) {
 97 |         return this.props.renderMessageVideo(messageVideoProps);
 98 |       }
 99 |       return <MessageVideo {...messageVideoProps} />;
100 |     }
101 |     return null;
102 |   }
103 | 
104 |   renderTicks() {
105 |     const { currentMessage } = this.props;
106 |     if (this.props.renderTicks) {
107 |       return this.props.renderTicks(currentMessage);
108 |     }
109 |     if (currentMessage.user.id !== this.props.user.id) {
110 |         return;
111 |     }
112 |     if (currentMessage.sent || currentMessage.received || currentMessage.pending) {
113 |       return (
114 |         <View style={styles.tickView}>
115 |           {currentMessage.sent && <Text style={[styles.tick, this.props.tickStyle]}>✓</Text>}
116 |           {currentMessage.received && <Text style={[styles.tick, this.props.tickStyle]}>✓</Text>}
117 |           {currentMessage.pending && <Text style={[styles.tick, this.props.tickStyle]}>🕓</Text>}
118 |         </View>
119 |       );
120 |     }
121 |     return null;
122 |   }
123 | 
124 |   renderTime() {
125 |     if (this.props.currentMessage.createdAt) {
126 |       const { containerStyle, wrapperStyle, ...timeProps } = this.props;
127 |       if (this.props.renderTime) {
128 |         return this.props.renderTime(timeProps);
129 |       }
130 |       return <Time {...timeProps} />;
131 |     }
132 |     return null;
133 |   }
134 | 
135 |   renderUsername() {
136 |     const { currentMessage } = this.props;
137 |     if (this.props.renderUsernameOnMessage) {
138 |       if (currentMessage.user.id === this.props.user.id) {
139 |         return null;
140 |       }
141 |       return (
142 |         <View style={styles.usernameView}>
143 |           <Text style={[styles.username, this.props.usernameStyle]}>~ {currentMessage.user.name}</Text>
144 |         </View>
145 |       );
146 |     }
147 |     return null;
148 |   }
149 | 
150 |   renderCustomView() {
151 |     if (this.props.renderCustomView) {
152 |       return this.props.renderCustomView(this.props);
153 |     }
154 |     return null;
155 |   }
156 | 
157 |   render() {
158 |     return (
159 |       <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
160 |         <View
161 |           style={[
162 |             styles[this.props.position].wrapper,
163 |             this.props.wrapperStyle[this.props.position],
164 |             this.handleBubbleToNext(),
165 |             this.handleBubbleToPrevious(),
166 |           ]}
167 |         >
168 |           <TouchableOpacity
169 |             withoutFeedback
170 |             onLongPress={this.onLongPress}
171 |             accessibilityTraits="text"
172 |             {...this.props.touchableProps}
173 |           >
174 |             <View>
175 |               {this.renderCustomView()}
176 |               {this.renderMessageImage()}
177 |               {this.renderMessageVideo()}
178 |               {this.renderMessageText()}
179 |               <View style={[styles[this.props.position].bottom, this.props.bottomContainerStyle[this.props.position]]}>
180 |                 {this.renderUsername()}
181 |                 {this.renderTime()}
182 |                 {this.renderTicks()}
183 |               </View>
184 |             </View>
185 |           </TouchableOpacity>
186 |         </View>
187 |       </View>
188 |     );
189 |   }
190 | 
191 | }
192 | 
193 | const styles = {
194 |   left: StyleSheet.create({
195 |     container: {
196 |       flex: 1,
197 |       alignItems: 'flex-start',
198 |     },
199 |     wrapper: {
200 |       borderRadius: 15,
201 |       backgroundColor: Color.leftBubbleBackground,
202 |       marginRight: 60,
203 |       minHeight: 20,
204 |       justifyContent: 'flex-end',
205 |     },
206 |     containerToNext: {
207 |       borderBottomLeftRadius: 3,
208 |     },
209 |     containerToPrevious: {
210 |       borderTopLeftRadius: 3,
211 |     },
212 |     bottom: {
213 |       flexDirection: 'row',
214 |       justifyContent: 'flex-start',
215 |     },
216 |   }),
217 |   right: StyleSheet.create({
218 |     container: {
219 |       flex: 1,
220 |       alignItems: 'flex-end',
221 |     },
222 |     wrapper: {
223 |       borderRadius: 15,
224 |       backgroundColor: Color.defaultBlue,
225 |       marginLeft: 60,
226 |       minHeight: 20,
227 |       justifyContent: 'flex-end',
228 |     },
229 |     containerToNext: {
230 |       borderBottomRightRadius: 3,
231 |     },
232 |     containerToPrevious: {
233 |       borderTopRightRadius: 3,
234 |     },
235 |     bottom: {
236 |       flexDirection: 'row',
237 |       justifyContent: 'flex-end',
238 |     },
239 |   }),
240 |   tick: {
241 |     fontSize: 10,
242 |     backgroundColor: Color.backgroundTransparent,
243 |     color: Color.white,
244 |   },
245 |   tickView: {
246 |     flexDirection: 'row',
247 |     marginRight: 10,
248 |   },
249 |   username: {
250 |     top: -3,
251 |     left: 0,
252 |     fontSize: 12,
253 |     backgroundColor: 'transparent',
254 |     color: '#aaa',
255 |   },
256 |   usernameView: {
257 |     flexDirection: 'row',
258 |     marginHorizontal: 10,
259 |   },
260 | };
261 | 
262 | Bubble.contextTypes = {
263 |   actionSheet: PropTypes.func,
264 | };
265 | 
266 | Bubble.defaultProps = {
267 |   touchableProps: {},
268 |   onLongPress: null,
269 |   renderMessageImage: null,
270 |   renderMessageVideo: null,
271 |   renderMessageText: null,
272 |   renderCustomView: null,
273 |   renderUsername: null,
274 |   renderTicks: null,
275 |   renderTime: null,
276 |   position: 'left',
277 |   currentMessage: {
278 |     text: null,
279 |     createdAt: null,
280 |     image: null,
281 |   },
282 |   nextMessage: {},
283 |   previousMessage: {},
284 |   containerStyle: {},
285 |   wrapperStyle: {},
286 |   bottomContainerStyle: {},
287 |   tickStyle: {},
288 |   usernameStyle: {},
289 |   containerToNextStyle: {},
290 |   containerToPreviousStyle: {},
291 | };
292 | 
293 | Bubble.propTypes = {
294 |   user: PropTypes.object.isRequired,
295 |   touchableProps: PropTypes.object,
296 |   onLongPress: PropTypes.func,
297 |   renderMessageImage: PropTypes.func,
298 |   renderMessageVideo: PropTypes.func,
299 |   renderMessageText: PropTypes.func,
300 |   renderCustomView: PropTypes.func,
301 |   renderUsernameOnMessage: PropTypes.bool,
302 |   renderUsername: PropTypes.func,
303 |   renderTime: PropTypes.func,
304 |   renderTicks: PropTypes.func,
305 |   position: PropTypes.oneOf(['left', 'right']),
306 |   currentMessage: PropTypes.object,
307 |   nextMessage: PropTypes.object,
308 |   previousMessage: PropTypes.object,
309 |   containerStyle: PropTypes.shape({
310 |     left: ViewPropTypes.style,
311 |     right: ViewPropTypes.style,
312 |   }),
313 |   wrapperStyle: PropTypes.shape({
314 |     left: ViewPropTypes.style,
315 |     right: ViewPropTypes.style,
316 |   }),
317 |   bottomContainerStyle: PropTypes.shape({
318 |     left: ViewPropTypes.style,
319 |     right: ViewPropTypes.style,
320 |   }),
321 |   tickStyle: Text.propTypes.style,
322 |   usernameStyle: Text.propTypes.style,
323 |   containerToNextStyle: PropTypes.shape({
324 |     left: ViewPropTypes.style,
325 |     right: ViewPropTypes.style,
326 |   }),
327 |   containerToPreviousStyle: PropTypes.shape({
328 |     left: ViewPropTypes.style,
329 |     right: ViewPropTypes.style,
330 |   }),
331 | };
332 | 


--------------------------------------------------------------------------------
/src/GiftedChat.js:
--------------------------------------------------------------------------------
  1 | /* eslint
  2 |     no-param-reassign: 0,
  3 |     no-use-before-define: ["error", { "variables": false }],
  4 |     no-return-assign: 0,
  5 |     no-mixed-operators: 0,
  6 |     react/sort-comp: 0
  7 | */
  8 | 
  9 | import PropTypes from 'prop-types';
 10 | import React from 'react';
 11 | import { Animated, StyleSheet, View } from 'react-native';
 12 | 
 13 | import moment from 'moment';
 14 | import uuid from 'uuid';
 15 | 
 16 | import * as utils from './utils';
 17 | import Actions from './Actions';
 18 | import Avatar from './Avatar';
 19 | import Bubble from './Bubble';
 20 | import SystemMessage from './SystemMessage';
 21 | import MessageImage from './MessageImage';
 22 | import MessageText from './MessageText';
 23 | import Composer from './Composer';
 24 | import Day from './Day';
 25 | import InputToolbar from './InputToolbar';
 26 | import LoadEarlier from './LoadEarlier';
 27 | import Message from './Message';
 28 | import MessageContainer from './MessageContainer';
 29 | import Send from './Send';
 30 | import Time from './Time';
 31 | import GiftedAvatar from './GiftedAvatar';
 32 | 
 33 | import {
 34 |   MIN_COMPOSER_HEIGHT,
 35 |   MAX_COMPOSER_HEIGHT,
 36 |   DEFAULT_PLACEHOLDER,
 37 |   TIME_FORMAT,
 38 |   DATE_FORMAT,
 39 | } from './Constant';
 40 | 
 41 | class GiftedChat extends React.Component {
 42 |   constructor(props) {
 43 |     super(props);
 44 | 
 45 |     // default values
 46 |     this._isMounted = false;
 47 |     this._keyboardHeight = 0;
 48 |     this._bottomOffset = 0;
 49 |     this._maxHeight = null;
 50 |     this._isFirstLayout = true;
 51 |     this._locale = 'en';
 52 |     this._messages = [];
 53 | 
 54 |     this.state = {
 55 |       isInitialized: false, // initialization will calculate maxHeight before rendering the chat
 56 |       composerHeight: 40,
 57 |       typingDisabled: false,
 58 |     };
 59 | 
 60 |     this.onSend = this.onSend.bind(this);
 61 |     this.getLocale = this.getLocale.bind(this);
 62 |     this.onInputSizeChanged = this.onInputSizeChanged.bind(this);
 63 |     this.onInputTextChanged = this.onInputTextChanged.bind(this);
 64 |     this.onMainViewLayout = this.onMainViewLayout.bind(this);
 65 |     this.onInitialLayoutViewLayout = this.onInitialLayoutViewLayout.bind(this);
 66 | 
 67 |     this.invertibleScrollViewProps = {
 68 |       inverted: this.props.inverted,
 69 |     };
 70 |   }
 71 | 
 72 |   static append(currentMessages = [], messages, inverted = true) {
 73 |     if (!Array.isArray(messages)) {
 74 |       messages = [messages];
 75 |     }
 76 |     return inverted ? messages.concat(currentMessages) : currentMessages.concat(messages);
 77 |   }
 78 | 
 79 |   static prepend(currentMessages = [], messages, inverted = true) {
 80 |     if (!Array.isArray(messages)) {
 81 |       messages = [messages];
 82 |     }
 83 |     return inverted ? currentMessages.concat(messages) : messages.concat(currentMessages);
 84 |   }
 85 | 
 86 |   getChildContext() {
 87 |     return {
 88 |       getLocale: this.getLocale,
 89 |     };
 90 |   }
 91 | 
 92 |   componentWillMount() {
 93 |     const { messages, text } = this.props;
 94 |     this.setIsMounted(true);
 95 |     this.initLocale();
 96 |     this.setMessages(messages || []);
 97 |     this.setTextFromProp(text);
 98 |   }
 99 | 
100 |   componentWillUnmount() {
101 |     this.setIsMounted(false);
102 |   }
103 | 
104 |   componentWillReceiveProps(nextProps = {}) {
105 |     const { messages, text } = nextProps;
106 |     this.setMessages(messages || []);
107 |     this.setTextFromProp(text);
108 |   }
109 | 
110 |   initLocale() {
111 |     if (this.props.locale === null || moment.locales().indexOf(this.props.locale) === -1) {
112 |       this.setLocale('en');
113 |     } else {
114 |       this.setLocale(this.props.locale);
115 |     }
116 |   }
117 | 
118 |   setLocale(locale) {
119 |     this._locale = locale;
120 |   }
121 | 
122 |   getLocale() {
123 |     return this._locale;
124 |   }
125 | 
126 |   setTextFromProp(textProp) {
127 |     // Text prop takes precedence over state.
128 |     if (textProp !== undefined && textProp !== this.state.text) {
129 |       this.setState({ text: textProp });
130 |     }
131 |   }
132 | 
133 |   getTextFromProp(fallback) {
134 |     if (this.props.text === undefined) {
135 |       return fallback;
136 |     }
137 |     return this.props.text;
138 |   }
139 | 
140 |   setMessages(messages) {
141 |     this._messages = messages;
142 |   }
143 | 
144 |   getMessages() {
145 |     return this._messages;
146 |   }
147 | 
148 |   setBottomOffset(value) {
149 |     this._bottomOffset = value;
150 |   }
151 | 
152 |   getBottomOffset() {
153 |     return this._bottomOffset;
154 |   }
155 | 
156 |   setIsFirstLayout(value) {
157 |     this._isFirstLayout = value;
158 |   }
159 | 
160 |   getIsFirstLayout() {
161 |     return this._isFirstLayout;
162 |   }
163 | 
164 |   setIsTypingDisabled(value) {
165 |     this.setState({
166 |       typingDisabled: value,
167 |     });
168 |   }
169 | 
170 |   getIsTypingDisabled() {
171 |     return this.state.typingDisabled;
172 |   }
173 | 
174 |   setIsMounted(value) {
175 |     this._isMounted = value;
176 |   }
177 | 
178 |   getIsMounted() {
179 |     return this._isMounted;
180 |   }
181 | 
182 |   scrollToBottom(animated = true) {
183 |     if (this._messageContainerRef === null) {
184 |       return;
185 |     }
186 |     this._messageContainerRef.scrollTo({
187 |       y: 0,
188 |       animated,
189 |     });
190 |   }
191 | 
192 | 
193 |   renderMessages() {
194 |     return (
195 |       <div style={{
196 |         height: `calc(100% - ${this.state.composerHeight}px)`,
197 |         display: 'flex',
198 |       }}
199 |       >
200 |         <MessageContainer
201 |           {...this.props}
202 |           invertibleScrollViewProps={this.invertibleScrollViewProps}
203 |           messages={this.getMessages()}
204 |           ref={component => this._messageContainerRef = component}
205 |         />
206 |         {this.renderChatFooter()}
207 |       </div>
208 |     );
209 |   }
210 | 
211 |   onSend(messages = [], shouldResetInputToolbar = false) {
212 |     if (!Array.isArray(messages)) {
213 |       messages = [messages];
214 |     }
215 |     messages = messages.map(message => ({
216 |       ...message,
217 |       user: this.props.user,
218 |       createdAt: new Date(),
219 |       id: this.props.messageIdGenerator(),
220 |     }));
221 | 
222 |     if (shouldResetInputToolbar === true) {
223 |       this.setIsTypingDisabled(true);
224 |       this.resetInputToolbar();
225 |     }
226 | 
227 |     this.props.onSend(messages);
228 |     this.scrollToBottom();
229 | 
230 |     if (shouldResetInputToolbar === true) {
231 |       setTimeout(() => {
232 |         if (this.getIsMounted() === true) {
233 |           this.setIsTypingDisabled(false);
234 |         }
235 |       }, 100);
236 |     }
237 |   }
238 | 
239 |   resetInputToolbar() {
240 |     this.notifyInputTextReset();
241 |     this.setState({
242 |       text: this.getTextFromProp(''),
243 |     });
244 |   }
245 | 
246 |   focusTextInput() {
247 |     if (this.textInput) {
248 |       this.textInput.focus();
249 |     }
250 |   }
251 | 
252 |   onInputSizeChanged(size) {
253 |   }
254 | 
255 |   onInputTextChanged(text) {
256 |     if (this.getIsTypingDisabled()) {
257 |       return;
258 |     }
259 |     if (this.props.onInputTextChanged) {
260 |       this.props.onInputTextChanged(text);
261 |     }
262 |     // Only set state if it's not being overridden by a prop.
263 |     if (this.props.text === undefined) {
264 |       this.setState({ text });
265 |     }
266 |   }
267 | 
268 |   notifyInputTextReset() {
269 |     if (this.props.onInputTextChanged) {
270 |       this.props.onInputTextChanged('');
271 |     }
272 |   }
273 | 
274 |   onInitialLayoutViewLayout(e) {
275 |     const { layout } = e.nativeEvent;
276 |     if (layout.height <= 0) {
277 |       return;
278 |     }
279 |     this.notifyInputTextReset();
280 |     this.setState({
281 |       isInitialized: true,
282 |       text: this.getTextFromProp(''),
283 |     });
284 |   }
285 | 
286 |   onMainViewLayout(e) {
287 |   }
288 | 
289 |   renderInputToolbar() {
290 |     const inputToolbarProps = {
291 |       ...this.props,
292 |       text: this.getTextFromProp(this.state.text),
293 |       composerHeight: this.state.composerHeight,
294 |       onSend: this.onSend,
295 |       onInputSizeChanged: this.onInputSizeChanged,
296 |       onTextChanged: this.onInputTextChanged,
297 |       textInputProps: {
298 |         ...this.props.textInputProps,
299 |         ref: textInput => (this.textInput = textInput),
300 |         maxLength: this.getIsTypingDisabled() ? 0 : this.props.maxInputLength,
301 |       },
302 |     };
303 |     if (this.props.renderInputToolbar) {
304 |       return this.props.renderInputToolbar(inputToolbarProps);
305 |     }
306 |     return (
307 |       <InputToolbar
308 |         {...inputToolbarProps}
309 |       />
310 |     );
311 |   }
312 | 
313 |   renderChatFooter() {
314 |     if (this.props.renderChatFooter) {
315 |       const footerProps = {
316 |         ...this.props,
317 |       };
318 |       return this.props.renderChatFooter(footerProps);
319 |     }
320 |     return null;
321 |   }
322 | 
323 |   renderLoading() {
324 |     if (this.props.renderLoading) {
325 |       return this.props.renderLoading();
326 |     }
327 |     return null;
328 |   }
329 | 
330 |   render() {
331 |     if (this.state.isInitialized === true) {
332 |       return (
333 |         <View style={styles.container} onLayout={this.onMainViewLayout}>
334 |           {this.renderMessages()}
335 |           {this.renderInputToolbar()}
336 |         </View>
337 |       );
338 |     }
339 |     return (
340 |       <View style={styles.container} onLayout={this.onInitialLayoutViewLayout}>
341 |         {this.renderLoading()}
342 |       </View>
343 |     );
344 |   }
345 | }
346 | 
347 | const styles = StyleSheet.create({
348 |   container: {
349 |     flex: 1,
350 |     height: '100%',
351 |   },
352 | });
353 | 
354 | GiftedChat.childContextTypes = {
355 |   getLocale: PropTypes.func,
356 | };
357 | 
358 | GiftedChat.defaultProps = {
359 |   messages: [],
360 |   text: undefined,
361 |   placeholder: DEFAULT_PLACEHOLDER,
362 |   messageIdGenerator: () => uuid.v4(),
363 |   user: {},
364 |   onSend: () => { },
365 |   locale: null,
366 |   timeFormat: TIME_FORMAT,
367 |   dateFormat: DATE_FORMAT,
368 |   isAnimated: false,
369 |   loadEarlier: false,
370 |   onLoadEarlier: () => { },
371 |   isLoadingEarlier: false,
372 |   renderLoading: null,
373 |   renderLoadEarlier: null,
374 |   renderAvatar: undefined,
375 |   showUserAvatar: false,
376 |   onPressAvatar: null,
377 |   renderUsernameOnMessage: false,
378 |   renderAvatarOnTop: false,
379 |   renderBubble: null,
380 |   renderSystemMessage: null,
381 |   onLongPress: null,
382 |   renderMessage: null,
383 |   renderMessageText: null,
384 |   renderMessageImage: null,
385 |   imageProps: {},
386 |   videoProps: {},
387 |   lightboxProps: {},
388 |   textInputProps: {},
389 |   listViewProps: {},
390 |   renderCustomView: null,
391 |   renderDay: null,
392 |   renderTime: null,
393 |   renderFooter: null,
394 |   renderChatFooter: null,
395 |   renderInputToolbar: null,
396 |   renderComposer: null,
397 |   renderActions: null,
398 |   renderSend: null,
399 |   renderAccessory: null,
400 |   onPressActionButton: null,
401 |   bottomOffset: 0,
402 |   minInputToolbarHeight: 44,
403 |   keyboardShouldPersistTaps: 'never',
404 |   onInputTextChanged: null,
405 |   maxInputLength: null,
406 |   forceGetKeyboardHeight: false,
407 |   inverted: true,
408 |   extraData: null,
409 |   minComposerHeight: MIN_COMPOSER_HEIGHT,
410 |   maxComposerHeight: MAX_COMPOSER_HEIGHT,
411 | };
412 | 
413 | GiftedChat.propTypes = {
414 |   messages: PropTypes.arrayOf(PropTypes.object),
415 |   text: PropTypes.string,
416 |   placeholder: PropTypes.string,
417 |   messageIdGenerator: PropTypes.func,
418 |   user: PropTypes.object,
419 |   onSend: PropTypes.func,
420 |   locale: PropTypes.string,
421 |   timeFormat: PropTypes.string,
422 |   dateFormat: PropTypes.string,
423 |   isAnimated: PropTypes.bool,
424 |   loadEarlier: PropTypes.bool,
425 |   onLoadEarlier: PropTypes.func,
426 |   isLoadingEarlier: PropTypes.bool,
427 |   renderLoading: PropTypes.func,
428 |   renderLoadEarlier: PropTypes.func,
429 |   renderAvatar: PropTypes.func,
430 |   showUserAvatar: PropTypes.bool,
431 |   onPressAvatar: PropTypes.func,
432 |   renderUsernameOnMessage: PropTypes.bool,
433 |   renderAvatarOnTop: PropTypes.bool,
434 |   renderBubble: PropTypes.func,
435 |   renderSystemMessage: PropTypes.func,
436 |   onLongPress: PropTypes.func,
437 |   renderMessage: PropTypes.func,
438 |   renderMessageText: PropTypes.func,
439 |   renderMessageImage: PropTypes.func,
440 |   imageProps: PropTypes.object,
441 |   videoProps: PropTypes.object,
442 |   lightboxProps: PropTypes.object,
443 |   renderCustomView: PropTypes.func,
444 |   renderDay: PropTypes.func,
445 |   renderTime: PropTypes.func,
446 |   renderFooter: PropTypes.func,
447 |   renderChatFooter: PropTypes.func,
448 |   renderInputToolbar: PropTypes.func,
449 |   renderComposer: PropTypes.func,
450 |   renderActions: PropTypes.func,
451 |   renderSend: PropTypes.func,
452 |   renderAccessory: PropTypes.func,
453 |   onPressActionButton: PropTypes.func,
454 |   bottomOffset: PropTypes.number,
455 |   minInputToolbarHeight: PropTypes.number,
456 |   listViewProps: PropTypes.object,
457 |   keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled']),
458 |   onInputTextChanged: PropTypes.func,
459 |   maxInputLength: PropTypes.number,
460 |   forceGetKeyboardHeight: PropTypes.bool,
461 |   inverted: PropTypes.bool,
462 |   textInputProps: PropTypes.object,
463 |   extraData: PropTypes.object,
464 |   minComposerHeight: PropTypes.number,
465 |   maxComposerHeight: PropTypes.number,
466 | };
467 | 
468 | export {
469 |   GiftedChat,
470 |   Actions,
471 |   Avatar,
472 |   Bubble,
473 |   SystemMessage,
474 |   MessageImage,
475 |   MessageText,
476 |   Composer,
477 |   Day,
478 |   InputToolbar,
479 |   LoadEarlier,
480 |   Message,
481 |   MessageContainer,
482 |   Send,
483 |   Time,
484 |   GiftedAvatar,
485 |   utils,
486 | };
487 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import * as RN from 'react-native';
  3 | 
  4 | type ViewStyle = RN.StyleProp<RN.ViewStyle>;
  5 | type TextStyle = RN.StyleProp<RN.TextStyle>;
  6 | type ImageStyle = RN.StyleProp<RN.ImageStyle>;
  7 | 
  8 | export interface LeftRightStyle<T> {
  9 |   left: T;
 10 |   right: T;
 11 | }
 12 | 
 13 | export interface User {
 14 |   id: any;
 15 |   name?: string;
 16 |   avatar?: string;
 17 | }
 18 | 
 19 | export interface IMessage {
 20 |   id: any;
 21 |   text: string;
 22 |   createdAt: Date;
 23 |   user: User;
 24 |   image?: string;
 25 |   system?: boolean;
 26 | }
 27 | 
 28 | export type IChatMessage = IMessage
 29 | 
 30 | interface ActionsProps {
 31 |   // todo: onSend is not used
 32 |   onSend?(): void;
 33 |   options?: any;
 34 |   optionTintColor?: string;
 35 |   icon?(): void;
 36 |   wrapperStyle?: ViewStyle;
 37 |   containerStyle?: ViewStyle;
 38 |   iconTextStyle?: ViewStyle;
 39 |   onPressActionButton(): void;
 40 | }
 41 | 
 42 | export class Actions extends React.Component<ActionsProps> { }
 43 | 
 44 | interface AvatarProps<TMessage extends IMessage = IMessage> {
 45 |   renderAvatarOnTop: boolean;
 46 |   position: "left" | "right";
 47 |   currentMessage: TMessage;
 48 |   previousMessage: TMessage;
 49 |   nextMessage: TMessage;
 50 |   onPressAvatar(): void;
 51 |   renderAvatar(props: AvatarProps<TMessage>): JSX.Element;
 52 |   containerStyle: {
 53 |     left: any;
 54 |     right: any;
 55 |   };
 56 |   imageStyle: {
 57 |     left: any;
 58 |     right: any;
 59 |   };
 60 |   // TODO: remove in next major release
 61 |   isSameDay(currentMessage: TMessage, message: TMessage): boolean;
 62 |   isSameUser(currentMessage: TMessage, message: TMessage): boolean;
 63 | }
 64 | 
 65 | export class Avatar extends React.Component<AvatarProps> { }
 66 | 
 67 | interface BubbleProps<TMessage extends IMessage = IMessage> {
 68 |   user: User;
 69 |   touchableProps?: object;
 70 |   onLongPress?(context?: any, message?: any): void;
 71 |   renderMessageImage?(messageImageProps: RenderMessageImageProps): React.ReactNode;
 72 |   renderMessageText?(messageTextProps: MessageTextProps): React.ReactNode;
 73 |   renderCustomView?(bubbleProps: BubbleProps): React.ReactNode;
 74 |   renderTime?(timeProps: TimeProps): React.ReactNode;
 75 |   renderTicks?(currentMessage: TMessage): React.ReactNode;
 76 |   renderUsername?(): React.ReactNode;
 77 |   renderUsernameOnMessage?: boolean
 78 |   position?: "left" | "right";
 79 |   currentMessage?: TMessage;
 80 |   nextMessage?: TMessage;
 81 |   previousMessage?: TMessage;
 82 |   containerStyle?: LeftRightStyle<ViewStyle>;
 83 |   wrapperStyle: LeftRightStyle<ViewStyle>;
 84 |   bottomContainerStyle: LeftRightStyle<ViewStyle>;
 85 |   tickStyle: TextStyle;
 86 |   containerToNextStyle: LeftRightStyle<ViewStyle>;
 87 |   containerToPreviousStyle: LeftRightStyle<ViewStyle>;
 88 |   // TODO: remove in next major release
 89 |   isSameDay?(currentMessage: TMessage, nextMessage: TMessage): boolean;
 90 |   isSameUser?(currentMessage: TMessage, nextMessage: TMessage): boolean;
 91 | }
 92 | 
 93 | export class Bubble extends React.Component<BubbleProps> { }
 94 | 
 95 | interface ComposerProps {
 96 |   composerHeight?: number;
 97 |   text?: string;
 98 |   placeholder?: string;
 99 |   placeholderTextColor?: string;
100 |   textInputProps?: Partial<RN.TextInputProps>;
101 |   onTextChanged?(text: string): void;
102 |   onInputSizeChanged?(contentSize: number): void;
103 |   multiline?: boolean;
104 |   textInputStyle?: RN.TextInputProps["style"];
105 |   textInputAutoFocus?: boolean;
106 |   keyboardAppearance: RN.TextInputProps["keyboardAppearance"];
107 | }
108 | 
109 | export class Composer extends React.Component<ComposerProps> { }
110 | 
111 | interface DayProps<TMessage extends IMessage = IMessage> {
112 |   currentMessage?: TMessage;
113 |   previousMessage?: TMessage;
114 |   containerStyle?: ViewStyle;
115 |   wrapperStyle?: ViewStyle;
116 |   textStyle?: TextStyle;
117 |   // TODO: remove in next major release
118 |   isSameDay?(currentMessage: TMessage, nextMessage: TMessage): boolean;
119 |   isSameUser?(currentMessage: TMessage, nextMessage: TMessage): boolean;
120 |   dateFormat?: string;
121 | }
122 | 
123 | export class Day extends React.Component<DayProps> { }
124 | 
125 | interface GiftedAvatarProps {
126 |   user?: User;
127 |   onPress?(): void;
128 |   avatarStyle?: ImageStyle;
129 |   textStyle?: TextStyle;
130 | }
131 | 
132 | export class GiftedAvatar extends React.Component<GiftedAvatarProps> { }
133 | 
134 | export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
135 |   /* Messages to display */
136 |   messages?: TMessage[];
137 |   /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
138 |   text?: string;
139 |   /* Placeholder when text is empty; default is 'Type a message...' */
140 |   placeholder?: string;
141 |   /* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
142 |   messageIdGenerator?(message: TMessage): string;
143 |   /* User sending the messages: { id, name, avatar } */
144 |   user?: User;
145 |   /* Callback when sending a message */
146 |   onSend?(messages: TMessage[]): void;
147 |   /*  Locale to localize the dates */
148 |   locale?: string;
149 |   /* Format to use for rendering times; default is 'LT' */
150 |   timeFormat?: string;
151 |   /* Format to use for rendering dates; default is 'll' */
152 |   dateFormat?: string;
153 |   /* Animates the view when the keyboard appears */
154 |   isAnimated?: boolean;
155 |   /* Enables the "Load earlier messages" button */
156 |   loadEarlier?: boolean;
157 |   /*Callback when loading earlier messages*/
158 |   onLoadEarlier?(): void;
159 |   /*Display an ActivityIndicator when loading earlier messages*/
160 |   isLoadingEarlier?: boolean;
161 |   /*  Render a loading view when initializing */
162 |   renderLoading?(): React.ReactNode;
163 |   /* Custom "Load earlier messages" button */
164 |   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode;
165 |   /* Custom message avatar; set to null to not render any avatar for the message */
166 |   renderAvatar?(props: AvatarProps): React.ReactNode;
167 |   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
168 |   showUserAvatar?: boolean;
169 |   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
170 |   showAvatarForEveryMessage?: boolean;
171 |   /* Callback when a message avatar is tapped */
172 |   onPressAvatar?(user: User): void;
173 |   /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
174 |   renderAvatarOnTop?: boolean;
175 |   /* Custom message bubble */
176 |   renderBubble?(props: BubbleProps): React.ReactNode;
177 |   /*Custom system message */
178 |   renderSystemMessage?(props: SystemMessageProps): React.ReactNode;
179 |   /* Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions()) */
180 |   onLongPress?(context: any, message: any): void;
181 |   /* Reverses display order of messages; default is true */
182 |   inverted?: boolean;
183 |   /*Custom message container */
184 |   renderMessage?(message: MessageProps): React.ReactNode;
185 |   /* Custom message text */
186 |   renderMessageText?(messageText: MessageTextProps): React.ReactNode;
187 |   /* Custom message image */
188 |   renderMessageImage?(props: RenderMessageImageProps): React.ReactNode;
189 |   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
190 |   imageProps?: MessageProps;
191 |   /*Extra props to be passed to the MessageImage's Lightbox */
192 |   lightboxProps?: any;
193 |   /* Custom view inside the bubble */
194 |   renderCustomView?(): React.ReactNode;
195 |   /*Custom day above a message*/
196 |   renderDay?(props: DayProps): React.ReactNode;
197 |   /* Custom time inside a message */
198 |   renderTime?(props: TimeProps): React.ReactNode;
199 |   /* Custom footer component on the ListView, e.g. 'User is typing...' */
200 |   renderFooter?(): React.ReactNode;
201 |   /* Custom component to render below the MessageContainer (separate from the ListView) */
202 |   renderChatFooter?(): React.ReactNode;
203 |   /* Custom message composer container */
204 |   renderInputToolbar?(props: InputToolbarProps): React.ReactNode;
205 |   /*  Custom text input message composer */
206 |   renderComposer?(props: ComposerProps): React.ReactNode;
207 |   /* Custom action button on the left of the message composer */
208 |   renderActions?(props: ActionsProps): React.ReactNode;
209 |   /* Custom send button; you can pass children to the original Send component quite easily, for example to use a custom icon (example) */
210 |   renderSend?(props: SendProps): React.ReactNode;
211 |   /*Custom second line of actions below the message composer */
212 |   renderAccessory?(props: InputToolbarProps): React.ReactNode;
213 |   /*Callback when the Action button is pressed (if set, the default actionSheet will not be used) */
214 |   onPressActionButton?(): void;
215 |   /*Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar) */
216 |   bottomOffset?: number;
217 |   /* Minimum height of the input toolbar; default is 44 */
218 |   minInputToolbarHeight?: number;
219 |   /*Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details */
220 |   listViewProps?: any;
221 |   /*  Extra props to be passed to the <TextInput> */
222 |   textInputProps?: any;
223 |   /*Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
224 |   keyboardShouldPersistTaps?: any;
225 |   /* Callback when the input text changes */
226 |   onInputTextChanged?(text: string): void;
227 |   /*Max message composer TextInput length */
228 |   maxInputLength?: number;
229 |   /* Custom parse patterns for react-native-parsed-text used to linkify message content (like URLs and phone numbers) */
230 |   parsePatterns?(): React.ReactNode;
231 |   /* Force getting keyboard height to fix some display issues */
232 |   forceGetKeyboardHeight?: boolean;
233 |   /* Force send button */
234 |   alwaysShowSend?: boolean;
235 |   /* Image style */
236 |   imageStyle?: ViewStyle
237 |   /* This can be used to pass any data which needs to be re-rendered */
238 |   extraData?: any;
239 |   /* composer min Height */
240 |   minComposerHeight?: number;
241 |   /* composer min Height */
242 |   maxComposerHeight?: number;
243 | }
244 | 
245 | export class GiftedChat extends React.Component<GiftedChatProps> {
246 |   static defaultProps: GiftedChatProps;
247 |   static append<TMessage extends IMessage = IMessage>(
248 |     currentMessages: TMessage[],
249 |     messages: TMessage[],
250 |     inverted?: boolean
251 |   ): TMessage[];
252 |   static prepend<TMessage extends IMessage = IMessage>(
253 |     currentMessages: TMessage[],
254 |     messages: TMessage[],
255 |     inverted?: boolean
256 |   ): TMessage[];
257 | }
258 | 
259 | interface InputToolbarProps {
260 |   renderAccessory?(props: InputToolbarProps): React.ReactNode;
261 |   renderActions?(props: ActionsProps): React.ReactNode;
262 |   renderSend?(props: SendProps): React.ReactNode;
263 |   renderComposer?(props: ComposerProps): React.ReactNode;
264 |   onPressActionButton?(): void;
265 |   containerStyle?: ViewStyle;
266 |   primaryStyle?: ViewStyle;
267 |   accessoryStyle?: ViewStyle;
268 | }
269 | export class InputToolbar extends React.Component<InputToolbarProps> { }
270 | 
271 | interface LoadEarlierProps {
272 |   onLoadEarlier?(): void;
273 |   isLoadingEarlier: boolean;
274 |   label?: string;
275 |   containerStyle?: ViewStyle;
276 |   wrapperStyle?: ViewStyle;
277 |   textStyle?: TextStyle;
278 |   activityIndicatorStyle?: ViewStyle;
279 | }
280 | 
281 | export class LoadEarlier extends React.Component<LoadEarlierProps> { }
282 | 
283 | interface MessageProps<TMessage extends IMessage = IMessage> {
284 |   // TODO: this is not used
285 |   renderAvatar(props: AvatarProps): React.ReactNode;
286 |   showUserAvatar?: boolean;
287 |   renderBubble(props: BubbleProps): React.ReactNode;
288 |   renderDay(props: DayProps): React.ReactNode;
289 |   renderSystemMessage(props: SystemMessageProps): React.ReactNode;
290 |   position?: "left" | "right";
291 |   currentMessage?: TMessage;
292 |   nextMessage?: TMessage;
293 |   previousMessage?: TMessage;
294 |   user?: User;
295 |   inverted?: boolean;
296 |   containerStyle: LeftRightStyle<ViewStyle>;
297 | }
298 | 
299 | export class Message extends React.Component<MessageProps> { }
300 | 
301 | interface MessageContainerProps<TMessage extends IMessage = IMessage> {
302 |   messages?: TMessage[];
303 |   user?: User;
304 |   renderFooter?(props: MessageContainerProps): React.ReactNode;
305 |   renderMessage?(props: MessageProps): React.ReactNode;
306 |   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode;
307 |   // todo: not used
308 |   onLoadEarlier?(): void;
309 |   listViewProps: Partial<RN.ListViewProps>;
310 |   inverted?: boolean;
311 |   loadEarlier?: boolean;
312 |   // todo: should be InvertibleScrollView props
313 |   invertibleScrollViewProps?: object;
314 | }
315 | 
316 | export class MessageContainer extends React.Component<MessageContainerProps> { }
317 | 
318 | interface MessageImageProps<TMessage extends IMessage = IMessage> {
319 |   currentMessage?: TMessage;
320 |   containerStyle?: ViewStyle;
321 |   imageStyle?: ImageStyle;
322 |   imageProps?: Partial<RN.ImageProps>;
323 |   // todo: should be LightBox properties
324 |   lightboxProps?: object;
325 | }
326 | 
327 | export class MessageImage extends React.Component<MessageImageProps> { }
328 | 
329 | export type RenderMessageImageProps<TMessage extends IMessage = IMessage> =
330 |   MessageImageProps<TMessage> & Exclude<BubbleProps<TMessage>, 'wrapperStyle' | 'containerStyle'>
331 | 
332 | interface MessageTextProps<TMessage extends IMessage = IMessage> {
333 |   position: "left" | "right";
334 |   currentMessage?: TMessage;
335 |   containerStyle?: LeftRightStyle<ViewStyle>;
336 |   textStyle?: LeftRightStyle<TextStyle>;
337 |   linkStyle?: LeftRightStyle<TextStyle>;
338 |   parsePatterns?(linkStyle: TextStyle): any;
339 |   textProps?: RN.TextProps;
340 |   customTextStyle?: TextStyle;
341 | }
342 | 
343 | export class MessageText extends React.Component<MessageTextProps> { }
344 | 
345 | export type RenderMessageTextProps<TMessage extends IMessage = IMessage> =
346 |   MessageTextProps<TMessage> & Exclude<BubbleProps<TMessage>, 'wrapperStyle' | 'containerStyle'>
347 | 
348 | interface SendProps {
349 |   text?: string;
350 |   onSend?({ text }: { text: string }, b: boolean): void;
351 |   label?: string;
352 |   containerStyle?: ViewStyle;
353 |   textStyle?: TextStyle;
354 |   children?: React.ReactNode;
355 | }
356 | 
357 | export class Send extends React.Component<SendProps> { }
358 | 
359 | interface SystemMessageProps<TMessage extends IMessage = IMessage> {
360 |   currentMessage?: TMessage;
361 |   containerStyle?: ViewStyle;
362 |   wrapperStyle?: ViewStyle;
363 |   textStyle?: TextStyle;
364 | }
365 | 
366 | export class SystemMessage extends React.Component<SystemMessageProps> { }
367 | 
368 | interface TimeProps<TMessage extends IMessage = IMessage> {
369 |   position?: "left" | "right";
370 |   currentMessage?: TMessage;
371 |   containerStyle?: LeftRightStyle<ViewStyle>;
372 |   textStyle?: LeftRightStyle<TextStyle>;
373 |   timeFormat?: string;
374 | }
375 | 
376 | export class Time extends React.Component<TimeProps> { }
377 | 
378 | export type utils<TMessage extends IMessage = IMessage> = {
379 |   isSameUser(currentMessage?: TMessage, message?: TMessage): boolean;
380 |   isSameDay(currentMessage?: TMessage, message?: TMessage): boolean;
381 |   isSameTime(currentMessage?: TMessage, message?: TMessage): boolean;
382 | };
383 | 
384 | export const utils: utils;
385 | 


--------------------------------------------------------------------------------
/example/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const resolve = require('resolve');
  6 | const webpack = require('webpack');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 10 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 11 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 14 | const getClientEnvironment = require('./env');
 15 | const paths = require('./paths');
 16 | const ManifestPlugin = require('webpack-manifest-plugin');
 17 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 18 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 19 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 20 | 
 21 | 
 22 | // Webpack uses `publicPath` to determine where the app is being served from.
 23 | // In development, we always serve from the root. This makes config easier.
 24 | const publicPath = '/';
 25 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 26 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 27 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 28 | const publicUrl = '';
 29 | // Get environment variables to inject into our app.
 30 | const env = getClientEnvironment(publicUrl);
 31 | 
 32 | // Check if TypeScript is setup
 33 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 34 | 
 35 | // style files regexes
 36 | const cssRegex = /\.css$/;
 37 | const cssModuleRegex = /\.module\.css$/;
 38 | const sassRegex = /\.(scss|sass)$/;
 39 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 40 | 
 41 | // common function to get style loaders
 42 | const getStyleLoaders = (cssOptions, preProcessor) => {
 43 |   const loaders = [
 44 |     require.resolve('style-loader'),
 45 |     {
 46 |       loader: require.resolve('css-loader'),
 47 |       options: cssOptions,
 48 |     },
 49 |     {
 50 |       // Options for PostCSS as we reference these options twice
 51 |       // Adds vendor prefixing based on your specified browser support in
 52 |       // package.json
 53 |       loader: require.resolve('postcss-loader'),
 54 |       options: {
 55 |         // Necessary for external CSS imports to work
 56 |         // https://github.com/facebook/create-react-app/issues/2677
 57 |         ident: 'postcss',
 58 |         plugins: () => [
 59 |           require('postcss-flexbugs-fixes'),
 60 |           require('postcss-preset-env')({
 61 |             autoprefixer: {
 62 |               flexbox: 'no-2009',
 63 |             },
 64 |             stage: 3,
 65 |           }),
 66 |         ],
 67 |       },
 68 |     },
 69 |   ];
 70 |   if (preProcessor) {
 71 |     loaders.push(require.resolve(preProcessor));
 72 |   }
 73 |   return loaders;
 74 | };
 75 | 
 76 | // This is the development configuration.
 77 | // It is focused on developer experience and fast rebuilds.
 78 | // The production configuration is different and lives in a separate file.
 79 | module.exports = {
 80 |   mode: 'development',
 81 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 82 |   // See the discussion in https://github.com/facebook/create-react-app/issues/343
 83 |   devtool: 'cheap-module-source-map',
 84 |   // These are the "entry points" to our application.
 85 |   // This means they will be the "root" imports that are included in JS bundle.
 86 |   entry: [
 87 |     // Include an alternative client for WebpackDevServer. A client's job is to
 88 |     // connect to WebpackDevServer by a socket and get notified about changes.
 89 |     // When you save a file, the client will either apply hot updates (in case
 90 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 91 |     // make a syntax error, this client will display a syntax error overlay.
 92 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 93 |     // to bring better experience for Create React App users. You can replace
 94 |     // the line below with these two lines if you prefer the stock client:
 95 |     // require.resolve('webpack-dev-server/client') + '?/',
 96 |     // require.resolve('webpack/hot/dev-server'),
 97 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 98 |     // Finally, this is your app's code:
 99 |     paths.appIndexJs,
100 |     // We include the app code last so that if there is a runtime error during
101 |     // initialization, it doesn't blow up the WebpackDevServer client, and
102 |     // changing JS code would still trigger a refresh.
103 |   ],
104 |   output: {
105 |     // Add /* filename */ comments to generated require()s in the output.
106 |     pathinfo: true,
107 |     // This does not produce a real file. It's just the virtual path that is
108 |     // served by WebpackDevServer in development. This is the JS bundle
109 |     // containing code from all our entry points, and the Webpack runtime.
110 |     filename: 'static/js/bundle.js',
111 |     // There are also additional JS chunk files if you use code splitting.
112 |     chunkFilename: 'static/js/[name].chunk.js',
113 |     // This is the URL that app is served from. We use "/" in development.
114 |     publicPath: publicPath,
115 |     // Point sourcemap entries to original disk location (format as URL on Windows)
116 |     devtoolModuleFilenameTemplate: info =>
117 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
118 |   },
119 |   optimization: {
120 |     // Automatically split vendor and commons
121 |     // https://twitter.com/wSokra/status/969633336732905474
122 |     // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
123 |     splitChunks: {
124 |       chunks: 'all',
125 |       name: false,
126 |     },
127 |     // Keep the runtime chunk seperated to enable long term caching
128 |     // https://twitter.com/wSokra/status/969679223278505985
129 |     runtimeChunk: true,
130 |   },
131 |   resolve: {
132 |     // This allows you to set a fallback for where Webpack should look for modules.
133 |     // We placed these paths second because we want `node_modules` to "win"
134 |     // if there are any conflicts. This matches Node resolution mechanism.
135 |     // https://github.com/facebook/create-react-app/issues/253
136 |     modules: ['node_modules'].concat(
137 |       // It is guaranteed to exist because we tweak it in `env.js`
138 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
139 |     ),
140 |     // These are the reasonable defaults supported by the Node ecosystem.
141 |     // We also include JSX as a common component filename extension to support
142 |     // some tools, although we do not recommend using it, see:
143 |     // https://github.com/facebook/create-react-app/issues/290
144 |     // `web` extension prefixes have been added for better support
145 |     // for React Native Web.
146 |     extensions: paths.moduleFileExtensions
147 |       .map(ext => `.${ext}`)
148 |       .filter(ext => useTypeScript || !ext.includes('ts')),
149 |     alias: {
150 |       // Support React Native Web
151 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
152 |       'react-native': 'react-native-web',
153 |     },
154 |     plugins: [
155 |       // Adds support for installing with Plug'n'Play, leading to faster installs and adding
156 |       // guards against forgotten dependencies and such.
157 |       PnpWebpackPlugin,
158 |       // Prevents users from importing files from outside of src/ (or node_modules/).
159 |       // This often causes confusion because we only process files within src/ with babel.
160 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
161 |       // please link the files into your node_modules/ and let module-resolution kick in.
162 |       // Make sure your source files are compiled, as they will not be processed in any way.
163 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
164 |     ],
165 |   },
166 |   resolveLoader: {
167 |     plugins: [
168 |       // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
169 |       // from the current package.
170 |       PnpWebpackPlugin.moduleLoader(module),
171 |     ],
172 |   },
173 |   module: {
174 |     strictExportPresence: true,
175 |     rules: [
176 |       // Disable require.ensure as it's not a standard language feature.
177 |       { parser: { requireEnsure: false } },
178 | 
179 |       // First, run the linter.
180 |       // It's important to do this before Babel processes the JS.
181 |       {
182 |         test: /\.(js|mjs|jsx)$/,
183 |         enforce: 'pre',
184 |         use: [
185 |           {
186 |             options: {
187 |               formatter: require.resolve('react-dev-utils/eslintFormatter'),
188 |               eslintPath: require.resolve('eslint'),
189 |               
190 |             },
191 |             loader: require.resolve('eslint-loader'),
192 |           },
193 |         ],
194 |         include: paths.appSrc,
195 |       },
196 |       {
197 |         // "oneOf" will traverse all following loaders until one will
198 |         // match the requirements. When no loader matches it will fall
199 |         // back to the "file" loader at the end of the loader list.
200 |         oneOf: [
201 |           // "url" loader works like "file" loader except that it embeds assets
202 |           // smaller than specified limit in bytes as data URLs to avoid requests.
203 |           // A missing `test` is equivalent to a match.
204 |           {
205 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
206 |             loader: require.resolve('url-loader'),
207 |             options: {
208 |               limit: 10000,
209 |               name: 'static/media/[name].[hash:8].[ext]',
210 |             },
211 |           },
212 |           // Process application JS with Babel.
213 |           // The preset includes JSX, Flow, and some ESnext features.
214 |           {
215 |             test: /\.(js|mjs|jsx|ts|tsx)$/,
216 |             include: paths.appSrc,
217 |             loader: require.resolve('babel-loader'),
218 |             options: {
219 |               customize: require.resolve(
220 |                 'babel-preset-react-app/webpack-overrides'
221 |               ),
222 |               
223 |               plugins: [
224 |                 [
225 |                   require.resolve('babel-plugin-named-asset-import'),
226 |                   {
227 |                     loaderMap: {
228 |                       svg: {
229 |                         ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
230 |                       },
231 |                     },
232 |                   },
233 |                 ],
234 |               ],
235 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
236 |               // It enables caching results in ./node_modules/.cache/babel-loader/
237 |               // directory for faster rebuilds.
238 |               cacheDirectory: true,
239 |               // Don't waste time on Gzipping the cache
240 |               cacheCompression: false,
241 |             },
242 |           },
243 |           // Process any JS outside of the app with Babel.
244 |           // Unlike the application JS, we only compile the standard ES features.
245 |           {
246 |             test: /\.(js|mjs)$/,
247 |             exclude: /@babel(?:\/|\\{1,2})runtime/,
248 |             loader: require.resolve('babel-loader'),
249 |             options: {
250 |               babelrc: false,
251 |               configFile: false,
252 |               compact: false,
253 |               presets: [
254 |                 [
255 |                   require.resolve('babel-preset-react-app/dependencies'),
256 |                   { helpers: true },
257 |                 ],
258 |               ],
259 |               cacheDirectory: true,
260 |               // Don't waste time on Gzipping the cache
261 |               cacheCompression: false,
262 |               
263 |               // If an error happens in a package, it's possible to be
264 |               // because it was compiled. Thus, we don't want the browser
265 |               // debugger to show the original code. Instead, the code
266 |               // being evaluated would be much more helpful.
267 |               sourceMaps: false,
268 |             },
269 |           },
270 |           // "postcss" loader applies autoprefixer to our CSS.
271 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
272 |           // "style" loader turns CSS into JS modules that inject <style> tags.
273 |           // In production, we use a plugin to extract that CSS to a file, but
274 |           // in development "style" loader enables hot editing of CSS.
275 |           // By default we support CSS Modules with the extension .module.css
276 |           {
277 |             test: cssRegex,
278 |             exclude: cssModuleRegex,
279 |             use: getStyleLoaders({
280 |               importLoaders: 1,
281 |             }),
282 |           },
283 |           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
284 |           // using the extension .module.css
285 |           {
286 |             test: cssModuleRegex,
287 |             use: getStyleLoaders({
288 |               importLoaders: 1,
289 |               modules: true,
290 |               getLocalIdent: getCSSModuleLocalIdent,
291 |             }),
292 |           },
293 |           // Opt-in support for SASS (using .scss or .sass extensions).
294 |           // Chains the sass-loader with the css-loader and the style-loader
295 |           // to immediately apply all styles to the DOM.
296 |           // By default we support SASS Modules with the
297 |           // extensions .module.scss or .module.sass
298 |           {
299 |             test: sassRegex,
300 |             exclude: sassModuleRegex,
301 |             use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
302 |           },
303 |           // Adds support for CSS Modules, but using SASS
304 |           // using the extension .module.scss or .module.sass
305 |           {
306 |             test: sassModuleRegex,
307 |             use: getStyleLoaders(
308 |               {
309 |                 importLoaders: 2,
310 |                 modules: true,
311 |                 getLocalIdent: getCSSModuleLocalIdent,
312 |               },
313 |               'sass-loader'
314 |             ),
315 |           },
316 |           // "file" loader makes sure those assets get served by WebpackDevServer.
317 |           // When you `import` an asset, you get its (virtual) filename.
318 |           // In production, they would get copied to the `build` folder.
319 |           // This loader doesn't use a "test" so it will catch all modules
320 |           // that fall through the other loaders.
321 |           {
322 |             // Exclude `js` files to keep "css" loader working as it injects
323 |             // its runtime that would otherwise be processed through "file" loader.
324 |             // Also exclude `html` and `json` extensions so they get processed
325 |             // by webpacks internal loaders.
326 |             exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
327 |             loader: require.resolve('file-loader'),
328 |             options: {
329 |               name: 'static/media/[name].[hash:8].[ext]',
330 |             },
331 |           },
332 |         ],
333 |       },
334 |       // ** STOP ** Are you adding a new loader?
335 |       // Make sure to add the new loader(s) before the "file" loader.
336 |     ],
337 |   },
338 |   plugins: [
339 |     // Generates an `index.html` file with the <script> injected.
340 |     new HtmlWebpackPlugin({
341 |       inject: true,
342 |       template: paths.appHtml,
343 |     }),
344 |     // Makes some environment variables available in index.html.
345 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
346 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
347 |     // In development, this will be an empty string.
348 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
349 |     // This gives some necessary context to module not found errors, such as
350 |     // the requesting resource.
351 |     new ModuleNotFoundPlugin(paths.appPath),
352 |     // Makes some environment variables available to the JS code, for example:
353 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
354 |     new webpack.DefinePlugin(env.stringified),
355 |     // This is necessary to emit hot updates (currently CSS only):
356 |     new webpack.HotModuleReplacementPlugin(),
357 |     // Watcher doesn't work well if you mistype casing in a path so we use
358 |     // a plugin that prints an error when you attempt to do this.
359 |     // See https://github.com/facebook/create-react-app/issues/240
360 |     new CaseSensitivePathsPlugin(),
361 |     // If you require a missing module and then `npm install` it, you still have
362 |     // to restart the development server for Webpack to discover it. This plugin
363 |     // makes the discovery automatic so you don't have to restart.
364 |     // See https://github.com/facebook/create-react-app/issues/186
365 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
366 |     // Moment.js is an extremely popular library that bundles large locale files
367 |     // by default due to how Webpack interprets its code. This is a practical
368 |     // solution that requires the user to opt into importing specific locales.
369 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
370 |     // You can remove this if you don't use Moment.js:
371 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
372 |     // Generate a manifest file which contains a mapping of all asset filenames
373 |     // to their corresponding output file so that tools can pick it up without
374 |     // having to parse `index.html`.
375 |     new ManifestPlugin({
376 |       fileName: 'asset-manifest.json',
377 |       publicPath: publicPath,
378 |     }),
379 |     // TypeScript type checking
380 |     useTypeScript &&
381 |       new ForkTsCheckerWebpackPlugin({
382 |         typescript: resolve.sync('typescript', {
383 |           basedir: paths.appNodeModules,
384 |         }),
385 |         async: false,
386 |         checkSyntacticErrors: true,
387 |         tsconfig: paths.appTsConfig,
388 |         compilerOptions: {
389 |           module: 'esnext',
390 |           moduleResolution: 'node',
391 |           resolveJsonModule: true,
392 |           isolatedModules: true,
393 |           noEmit: true,
394 |           jsx: 'preserve',
395 |         },
396 |         reportFiles: [
397 |           '**',
398 |           '!**/*.json',
399 |           '!**/__tests__/**',
400 |           '!**/?(*.)(spec|test).*',
401 |           '!src/setupProxy.js',
402 |           '!src/setupTests.*',
403 |         ],
404 |         watch: paths.appSrc,
405 |         silent: true,
406 |         formatter: typescriptFormatter,
407 |       }),
408 |   ].filter(Boolean),
409 | 
410 |   // Some libraries import Node modules but don't use them in the browser.
411 |   // Tell Webpack to provide empty mocks for them so importing them works.
412 |   node: {
413 |     dgram: 'empty',
414 |     fs: 'empty',
415 |     net: 'empty',
416 |     tls: 'empty',
417 |     child_process: 'empty',
418 |   },
419 |   // Turn off performance processing because we utilize
420 |   // our own hints via the FileSizeReporter
421 |   performance: false,
422 | };
423 | 


--------------------------------------------------------------------------------
/example/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 10 | const TerserPlugin = require('terser-webpack-plugin');
 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 12 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 13 | const safePostCssParser = require('postcss-safe-parser');
 14 | const ManifestPlugin = require('webpack-manifest-plugin');
 15 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 16 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 17 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 18 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 19 | const paths = require('./paths');
 20 | const getClientEnvironment = require('./env');
 21 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 22 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 23 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 24 | 
 25 | 
 26 | // Webpack uses `publicPath` to determine where the app is being served from.
 27 | // It requires a trailing slash, or the file assets will get an incorrect path.
 28 | const publicPath = paths.servedPath;
 29 | // Some apps do not use client-side routing with pushState.
 30 | // For these, "homepage" can be set to "." to enable relative asset paths.
 31 | const shouldUseRelativeAssetPaths = publicPath === './';
 32 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 33 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 34 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 35 | // makes for a smoother build process.
 36 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 37 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 38 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 39 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 40 | const publicUrl = publicPath.slice(0, -1);
 41 | // Get environment variables to inject into our app.
 42 | const env = getClientEnvironment(publicUrl);
 43 | 
 44 | // Assert this just to be safe.
 45 | // Development builds of React are slow and not intended for production.
 46 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 47 |   throw new Error('Production builds must have NODE_ENV=production.');
 48 | }
 49 | 
 50 | // Check if TypeScript is setup
 51 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 52 | 
 53 | // style files regexes
 54 | const cssRegex = /\.css$/;
 55 | const cssModuleRegex = /\.module\.css$/;
 56 | const sassRegex = /\.(scss|sass)$/;
 57 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 58 | 
 59 | // common function to get style loaders
 60 | const getStyleLoaders = (cssOptions, preProcessor) => {
 61 |   const loaders = [
 62 |     {
 63 |       loader: MiniCssExtractPlugin.loader,
 64 |       options: Object.assign(
 65 |         {},
 66 |         shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
 67 |       ),
 68 |     },
 69 |     {
 70 |       loader: require.resolve('css-loader'),
 71 |       options: cssOptions,
 72 |     },
 73 |     {
 74 |       // Options for PostCSS as we reference these options twice
 75 |       // Adds vendor prefixing based on your specified browser support in
 76 |       // package.json
 77 |       loader: require.resolve('postcss-loader'),
 78 |       options: {
 79 |         // Necessary for external CSS imports to work
 80 |         // https://github.com/facebook/create-react-app/issues/2677
 81 |         ident: 'postcss',
 82 |         plugins: () => [
 83 |           require('postcss-flexbugs-fixes'),
 84 |           require('postcss-preset-env')({
 85 |             autoprefixer: {
 86 |               flexbox: 'no-2009',
 87 |             },
 88 |             stage: 3,
 89 |           }),
 90 |         ],
 91 |         sourceMap: shouldUseSourceMap,
 92 |       },
 93 |     },
 94 |   ];
 95 |   if (preProcessor) {
 96 |     loaders.push({
 97 |       loader: require.resolve(preProcessor),
 98 |       options: {
 99 |         sourceMap: shouldUseSourceMap,
100 |       },
101 |     });
102 |   }
103 |   return loaders;
104 | };
105 | 
106 | // This is the production configuration.
107 | // It compiles slowly and is focused on producing a fast and minimal bundle.
108 | // The development configuration is different and lives in a separate file.
109 | module.exports = {
110 |   mode: 'production',
111 |   // Don't attempt to continue if there are any errors.
112 |   bail: true,
113 |   // We generate sourcemaps in production. This is slow but gives good results.
114 |   // You can exclude the *.map files from the build during deployment.
115 |   devtool: shouldUseSourceMap ? 'source-map' : false,
116 |   // In production, we only want to load the app code.
117 |   entry: [paths.appIndexJs],
118 |   output: {
119 |     // The build folder.
120 |     path: paths.appBuild,
121 |     // Generated JS file names (with nested folders).
122 |     // There will be one main bundle, and one file per asynchronous chunk.
123 |     // We don't currently advertise code splitting but Webpack supports it.
124 |     filename: 'static/js/[name].[chunkhash:8].js',
125 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
126 |     // We inferred the "public path" (such as / or /my-project) from homepage.
127 |     publicPath: publicPath,
128 |     // Point sourcemap entries to original disk location (format as URL on Windows)
129 |     devtoolModuleFilenameTemplate: info =>
130 |       path
131 |         .relative(paths.appSrc, info.absoluteResourcePath)
132 |         .replace(/\\/g, '/'),
133 |   },
134 |   optimization: {
135 |     minimizer: [
136 |       new TerserPlugin({
137 |         terserOptions: {
138 |           parse: {
139 |             // we want terser to parse ecma 8 code. However, we don't want it
140 |             // to apply any minfication steps that turns valid ecma 5 code
141 |             // into invalid ecma 5 code. This is why the 'compress' and 'output'
142 |             // sections only apply transformations that are ecma 5 safe
143 |             // https://github.com/facebook/create-react-app/pull/4234
144 |             ecma: 8,
145 |           },
146 |           compress: {
147 |             ecma: 5,
148 |             warnings: false,
149 |             // Disabled because of an issue with Uglify breaking seemingly valid code:
150 |             // https://github.com/facebook/create-react-app/issues/2376
151 |             // Pending further investigation:
152 |             // https://github.com/mishoo/UglifyJS2/issues/2011
153 |             comparisons: false,
154 |             // Disabled because of an issue with Terser breaking valid code:
155 |             // https://github.com/facebook/create-react-app/issues/5250
156 |             // Pending futher investigation:
157 |             // https://github.com/terser-js/terser/issues/120
158 |             inline: 2,
159 |           },
160 |           mangle: {
161 |             safari10: true,
162 |           },
163 |           output: {
164 |             ecma: 5,
165 |             comments: false,
166 |             // Turned on because emoji and regex is not minified properly using default
167 |             // https://github.com/facebook/create-react-app/issues/2488
168 |             ascii_only: true,
169 |           },
170 |         },
171 |         // Use multi-process parallel running to improve the build speed
172 |         // Default number of concurrent runs: os.cpus().length - 1
173 |         parallel: true,
174 |         // Enable file caching
175 |         cache: true,
176 |         sourceMap: shouldUseSourceMap,
177 |       }),
178 |       new OptimizeCSSAssetsPlugin({
179 |         cssProcessorOptions: {
180 |           parser: safePostCssParser,
181 |           map: shouldUseSourceMap
182 |             ? {
183 |                 // `inline: false` forces the sourcemap to be output into a
184 |                 // separate file
185 |                 inline: false,
186 |                 // `annotation: true` appends the sourceMappingURL to the end of
187 |                 // the css file, helping the browser find the sourcemap
188 |                 annotation: true,
189 |               }
190 |             : false,
191 |         },
192 |       }),
193 |     ],
194 |     // Automatically split vendor and commons
195 |     // https://twitter.com/wSokra/status/969633336732905474
196 |     // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
197 |     splitChunks: {
198 |       chunks: 'all',
199 |       name: false,
200 |     },
201 |     // Keep the runtime chunk seperated to enable long term caching
202 |     // https://twitter.com/wSokra/status/969679223278505985
203 |     runtimeChunk: true,
204 |   },
205 |   resolve: {
206 |     // This allows you to set a fallback for where Webpack should look for modules.
207 |     // We placed these paths second because we want `node_modules` to "win"
208 |     // if there are any conflicts. This matches Node resolution mechanism.
209 |     // https://github.com/facebook/create-react-app/issues/253
210 |     modules: ['node_modules'].concat(
211 |       // It is guaranteed to exist because we tweak it in `env.js`
212 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
213 |     ),
214 |     // These are the reasonable defaults supported by the Node ecosystem.
215 |     // We also include JSX as a common component filename extension to support
216 |     // some tools, although we do not recommend using it, see:
217 |     // https://github.com/facebook/create-react-app/issues/290
218 |     // `web` extension prefixes have been added for better support
219 |     // for React Native Web.
220 |     extensions: paths.moduleFileExtensions
221 |       .map(ext => `.${ext}`)
222 |       .filter(ext => useTypeScript || !ext.includes('ts')),
223 |     alias: {
224 |       // Support React Native Web
225 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
226 |       'react-native': 'react-native-web',
227 |     },
228 |     plugins: [
229 |       // Adds support for installing with Plug'n'Play, leading to faster installs and adding
230 |       // guards against forgotten dependencies and such.
231 |       PnpWebpackPlugin,
232 |       // Prevents users from importing files from outside of src/ (or node_modules/).
233 |       // This often causes confusion because we only process files within src/ with babel.
234 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
235 |       // please link the files into your node_modules/ and let module-resolution kick in.
236 |       // Make sure your source files are compiled, as they will not be processed in any way.
237 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
238 |     ],
239 |   },
240 |   resolveLoader: {
241 |     plugins: [
242 |       // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
243 |       // from the current package.
244 |       PnpWebpackPlugin.moduleLoader(module),
245 |     ],
246 |   },
247 |   module: {
248 |     strictExportPresence: true,
249 |     rules: [
250 |       // Disable require.ensure as it's not a standard language feature.
251 |       { parser: { requireEnsure: false } },
252 | 
253 |       // First, run the linter.
254 |       // It's important to do this before Babel processes the JS.
255 |       {
256 |         test: /\.(js|mjs|jsx)$/,
257 |         enforce: 'pre',
258 |         use: [
259 |           {
260 |             options: {
261 |               formatter: require.resolve('react-dev-utils/eslintFormatter'),
262 |               eslintPath: require.resolve('eslint'),
263 |               
264 |             },
265 |             loader: require.resolve('eslint-loader'),
266 |           },
267 |         ],
268 |         include: paths.appSrc,
269 |       },
270 |       {
271 |         // "oneOf" will traverse all following loaders until one will
272 |         // match the requirements. When no loader matches it will fall
273 |         // back to the "file" loader at the end of the loader list.
274 |         oneOf: [
275 |           // "url" loader works just like "file" loader but it also embeds
276 |           // assets smaller than specified size as data URLs to avoid requests.
277 |           {
278 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
279 |             loader: require.resolve('url-loader'),
280 |             options: {
281 |               limit: 10000,
282 |               name: 'static/media/[name].[hash:8].[ext]',
283 |             },
284 |           },
285 |           // Process application JS with Babel.
286 |           // The preset includes JSX, Flow, TypeScript and some ESnext features.
287 |           {
288 |             test: /\.(js|mjs|jsx|ts|tsx)$/,
289 |             include: paths.appSrc,
290 | 
291 |             loader: require.resolve('babel-loader'),
292 |             options: {
293 |               customize: require.resolve(
294 |                 'babel-preset-react-app/webpack-overrides'
295 |               ),
296 |               
297 |               plugins: [
298 |                 [
299 |                   require.resolve('babel-plugin-named-asset-import'),
300 |                   {
301 |                     loaderMap: {
302 |                       svg: {
303 |                         ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
304 |                       },
305 |                     },
306 |                   },
307 |                 ],
308 |               ],
309 |               cacheDirectory: true,
310 |               // Save disk space when time isn't as important
311 |               cacheCompression: true,
312 |               compact: true,
313 |             },
314 |           },
315 |           // Process any JS outside of the app with Babel.
316 |           // Unlike the application JS, we only compile the standard ES features.
317 |           {
318 |             test: /\.(js|mjs)$/,
319 |             exclude: /@babel(?:\/|\\{1,2})runtime/,
320 |             loader: require.resolve('babel-loader'),
321 |             options: {
322 |               babelrc: false,
323 |               configFile: false,
324 |               compact: false,
325 |               presets: [
326 |                 [
327 |                   require.resolve('babel-preset-react-app/dependencies'),
328 |                   { helpers: true },
329 |                 ],
330 |               ],
331 |               cacheDirectory: true,
332 |               // Save disk space when time isn't as important
333 |               cacheCompression: true,
334 |               
335 |               // If an error happens in a package, it's possible to be
336 |               // because it was compiled. Thus, we don't want the browser
337 |               // debugger to show the original code. Instead, the code
338 |               // being evaluated would be much more helpful.
339 |               sourceMaps: false,
340 |             },
341 |           },
342 |           // "postcss" loader applies autoprefixer to our CSS.
343 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
344 |           // `MiniCSSExtractPlugin` extracts styles into CSS
345 |           // files. If you use code splitting, async bundles will have their own separate CSS chunk file.
346 |           // By default we support CSS Modules with the extension .module.css
347 |           {
348 |             test: cssRegex,
349 |             exclude: cssModuleRegex,
350 |             loader: getStyleLoaders({
351 |               importLoaders: 1,
352 |               sourceMap: shouldUseSourceMap,
353 |             }),
354 |             // Don't consider CSS imports dead code even if the
355 |             // containing package claims to have no side effects.
356 |             // Remove this when webpack adds a warning or an error for this.
357 |             // See https://github.com/webpack/webpack/issues/6571
358 |             sideEffects: true,
359 |           },
360 |           // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
361 |           // using the extension .module.css
362 |           {
363 |             test: cssModuleRegex,
364 |             loader: getStyleLoaders({
365 |               importLoaders: 1,
366 |               sourceMap: shouldUseSourceMap,
367 |               modules: true,
368 |               getLocalIdent: getCSSModuleLocalIdent,
369 |             }),
370 |           },
371 |           // Opt-in support for SASS. The logic here is somewhat similar
372 |           // as in the CSS routine, except that "sass-loader" runs first
373 |           // to compile SASS files into CSS.
374 |           // By default we support SASS Modules with the
375 |           // extensions .module.scss or .module.sass
376 |           {
377 |             test: sassRegex,
378 |             exclude: sassModuleRegex,
379 |             loader: getStyleLoaders(
380 |               {
381 |                 importLoaders: 2,
382 |                 sourceMap: shouldUseSourceMap,
383 |               },
384 |               'sass-loader'
385 |             ),
386 |             // Don't consider CSS imports dead code even if the
387 |             // containing package claims to have no side effects.
388 |             // Remove this when webpack adds a warning or an error for this.
389 |             // See https://github.com/webpack/webpack/issues/6571
390 |             sideEffects: true,
391 |           },
392 |           // Adds support for CSS Modules, but using SASS
393 |           // using the extension .module.scss or .module.sass
394 |           {
395 |             test: sassModuleRegex,
396 |             loader: getStyleLoaders(
397 |               {
398 |                 importLoaders: 2,
399 |                 sourceMap: shouldUseSourceMap,
400 |                 modules: true,
401 |                 getLocalIdent: getCSSModuleLocalIdent,
402 |               },
403 |               'sass-loader'
404 |             ),
405 |           },
406 |           // "file" loader makes sure assets end up in the `build` folder.
407 |           // When you `import` an asset, you get its filename.
408 |           // This loader doesn't use a "test" so it will catch all modules
409 |           // that fall through the other loaders.
410 |           {
411 |             loader: require.resolve('file-loader'),
412 |             // Exclude `js` files to keep "css" loader working as it injects
413 |             // it's runtime that would otherwise be processed through "file" loader.
414 |             // Also exclude `html` and `json` extensions so they get processed
415 |             // by webpacks internal loaders.
416 |             exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
417 |             options: {
418 |               name: 'static/media/[name].[hash:8].[ext]',
419 |             },
420 |           },
421 |           // ** STOP ** Are you adding a new loader?
422 |           // Make sure to add the new loader(s) before the "file" loader.
423 |         ],
424 |       },
425 |     ],
426 |   },
427 |   plugins: [
428 |     // Generates an `index.html` file with the <script> injected.
429 |     new HtmlWebpackPlugin({
430 |       inject: true,
431 |       template: paths.appHtml,
432 |       minify: {
433 |         removeComments: true,
434 |         collapseWhitespace: true,
435 |         removeRedundantAttributes: true,
436 |         useShortDoctype: true,
437 |         removeEmptyAttributes: true,
438 |         removeStyleLinkTypeAttributes: true,
439 |         keepClosingSlash: true,
440 |         minifyJS: true,
441 |         minifyCSS: true,
442 |         minifyURLs: true,
443 |       },
444 |     }),
445 |     // Inlines the webpack runtime script. This script is too small to warrant
446 |     // a network request.
447 |     shouldInlineRuntimeChunk &&
448 |       new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
449 |     // Makes some environment variables available in index.html.
450 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
451 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
452 |     // In production, it will be an empty string unless you specify "homepage"
453 |     // in `package.json`, in which case it will be the pathname of that URL.
454 |     new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
455 |     // This gives some necessary context to module not found errors, such as
456 |     // the requesting resource.
457 |     new ModuleNotFoundPlugin(paths.appPath),
458 |     // Makes some environment variables available to the JS code, for example:
459 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
460 |     // It is absolutely essential that NODE_ENV was set to production here.
461 |     // Otherwise React will be compiled in the very slow development mode.
462 |     new webpack.DefinePlugin(env.stringified),
463 |     new MiniCssExtractPlugin({
464 |       // Options similar to the same options in webpackOptions.output
465 |       // both options are optional
466 |       filename: 'static/css/[name].[contenthash:8].css',
467 |       chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
468 |     }),
469 |     // Generate a manifest file which contains a mapping of all asset filenames
470 |     // to their corresponding output file so that tools can pick it up without
471 |     // having to parse `index.html`.
472 |     new ManifestPlugin({
473 |       fileName: 'asset-manifest.json',
474 |       publicPath: publicPath,
475 |     }),
476 |     // Moment.js is an extremely popular library that bundles large locale files
477 |     // by default due to how Webpack interprets its code. This is a practical
478 |     // solution that requires the user to opt into importing specific locales.
479 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
480 |     // You can remove this if you don't use Moment.js:
481 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
482 |     // Generate a service worker script that will precache, and keep up to date,
483 |     // the HTML & assets that are part of the Webpack build.
484 |     new WorkboxWebpackPlugin.GenerateSW({
485 |       clientsClaim: true,
486 |       exclude: [/\.map$/, /asset-manifest\.json$/],
487 |       importWorkboxFrom: 'cdn',
488 |       navigateFallback: publicUrl + '/index.html',
489 |       navigateFallbackBlacklist: [
490 |         // Exclude URLs starting with /_, as they're likely an API call
491 |         new RegExp('^/_'),
492 |         // Exclude URLs containing a dot, as they're likely a resource in
493 |         // public/ and not a SPA route
494 |         new RegExp('/[^/]+\\.[^/]+$'),
495 |       ],
496 |     }),
497 |     // TypeScript type checking
498 |     fs.existsSync(paths.appTsConfig) &&
499 |       new ForkTsCheckerWebpackPlugin({
500 |         typescript: resolve.sync('typescript', {
501 |           basedir: paths.appNodeModules,
502 |         }),
503 |         async: false,
504 |         checkSyntacticErrors: true,
505 |         tsconfig: paths.appTsConfig,
506 |         compilerOptions: {
507 |           module: 'esnext',
508 |           moduleResolution: 'node',
509 |           resolveJsonModule: true,
510 |           isolatedModules: true,
511 |           noEmit: true,
512 |           jsx: 'preserve',
513 |         },
514 |         reportFiles: [
515 |           '**',
516 |           '!**/*.json',
517 |           '!**/__tests__/**',
518 |           '!**/?(*.)(spec|test).*',
519 |           '!src/setupProxy.js',
520 |           '!src/setupTests.*',
521 |         ],
522 |         watch: paths.appSrc,
523 |         silent: true,
524 |         formatter: typescriptFormatter,
525 |       }),
526 |   ].filter(Boolean),
527 |   // Some libraries import Node modules but don't use them in the browser.
528 |   // Tell Webpack to provide empty mocks for them so importing them works.
529 |   node: {
530 |     dgram: 'empty',
531 |     fs: 'empty',
532 |     net: 'empty',
533 |     tls: 'empty',
534 |     child_process: 'empty',
535 |   },
536 |   // Turn off performance processing because we utilize
537 |   // our own hints via the FileSizeReporter
538 |   performance: false,
539 | };
540 | 


--------------------------------------------------------------------------------