Skip to content

Instantly share code, notes, and snippets.

@GollyJer

GollyJer/react-native-gifted-chat+0.9.11.patch

Created October 29, 2019 19:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GollyJer/9a53bc2b3346b14e811bf0fe5a663ddb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GollyJer/9a53bc2b3346b14e811bf0fe5a663ddb to your computer and use it in GitHub Desktop.
Download ZIP
Patch react-native-gifted-chat to eliminate need for sizing code. Allows the chat data to stay cached.
Raw
react-native-gifted-chat+0.9.11.patch
diff --git a/node_modules/react-native-gifted-chat/lib/GiftedChat.js b/node_modules/react-native-gifted-chat/lib/GiftedChat.js
index 7f3f4b5..78ea7a1 100644
--- a/node_modules/react-native-gifted-chat/lib/GiftedChat.js
+++ b/node_modules/react-native-gifted-chat/lib/GiftedChat.js
@@ -1,6 +1,13 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { Animated, Platform, StyleSheet, View, SafeAreaView, } from 'react-native';
+import {
+ Animated,
+ Platform,
+ StyleSheet,
+ View,
+ KeyboardAvoidingView,
+ SafeAreaView,
+} from 'react-native';
import ActionSheet from '@expo/react-native-action-sheet';
import moment from 'moment';
import uuid from 'uuid';
@@ -21,520 +28,626 @@ import MessageContainer from './MessageContainer';
import Send from './Send';
import Time from './Time';
import GiftedAvatar from './GiftedAvatar';
-import { MIN_COMPOSER_HEIGHT, MAX_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER, TIME_FORMAT, DATE_FORMAT, } from './Constant';
+import {
+ MIN_COMPOSER_HEIGHT,
+ MAX_COMPOSER_HEIGHT,
+ DEFAULT_PLACEHOLDER,
+ TIME_FORMAT,
+ DATE_FORMAT,
+} from './Constant';
+
const GiftedActionSheet = ActionSheet;
class GiftedChat extends React.Component {
- constructor(props) {
- super(props);
- this._isMounted = false;
- this._keyboardHeight = 0;
- this._bottomOffset = 0;
- this._maxHeight = undefined;
- this._isFirstLayout = true;
- this._locale = 'en';
- this._messages = [];
- this.invertibleScrollViewProps = undefined;
- this._actionSheetRef = undefined;
- this._messageContainerRef = React.createRef();
- this.state = {
- isInitialized: false,
- composerHeight: this.props.minComposerHeight,
- messagesContainerHeight: undefined,
- typingDisabled: false,
- text: undefined,
- };
- this.getLocale = () => this._locale;
- this.safeAreaIphoneX = (bottomOffset) => {
- if (isIphoneX()) {
- return bottomOffset === this._bottomOffset ? 33 : bottomOffset;
- }
- return bottomOffset;
- };
- this.onKeyboardWillShow = (e) => {
- this.setIsTypingDisabled(true);
- this.setKeyboardHeight(e.endCoordinates ? e.endCoordinates.height : e.end.height);
- this.setBottomOffset(this.safeAreaIphoneX(this.props.bottomOffset));
- const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard();
- if (this.props.isAnimated === true) {
- Animated.timing(this.state.messagesContainerHeight, {
- toValue: newMessagesContainerHeight,
- duration: 210,
- }).start();
- }
- else {
- this.setState({
- messagesContainerHeight: newMessagesContainerHeight,
- });
- }
- };
- this.onKeyboardWillHide = (_e) => {
- this.setIsTypingDisabled(true);
- this.setKeyboardHeight(0);
- this.setBottomOffset(0);
- const newMessagesContainerHeight = this.getBasicMessagesContainerHeight();
- if (this.props.isAnimated === true) {
- Animated.timing(this.state.messagesContainerHeight, {
- toValue: newMessagesContainerHeight,
- duration: 210,
- }).start();
- }
- else {
- this.setState({
- messagesContainerHeight: newMessagesContainerHeight,
- });
- }
- };
- this.onKeyboardDidShow = (e) => {
- if (Platform.OS === 'android') {
- this.onKeyboardWillShow(e);
- }
- this.setIsTypingDisabled(false);
- };
- this.onKeyboardDidHide = (e) => {
- if (Platform.OS === 'android') {
- this.onKeyboardWillHide(e);
- }
- this.setIsTypingDisabled(false);
- };
- this.onSend = (messages = [], shouldResetInputToolbar = false) => {
- if (!Array.isArray(messages)) {
- messages = [messages];
- }
- const newMessages = messages.map(message => {
- return {
- ...message,
- user: this.props.user,
- createdAt: new Date(),
- _id: this.props.messageIdGenerator && this.props.messageIdGenerator(),
- };
- });
- if (shouldResetInputToolbar === true) {
- this.setIsTypingDisabled(true);
- this.resetInputToolbar();
- }
- if (this.props.onSend) {
- this.props.onSend(newMessages);
- }
- this.scrollToBottom();
- if (shouldResetInputToolbar === true) {
- setTimeout(() => {
- if (this.getIsMounted() === true) {
- this.setIsTypingDisabled(false);
- }
- }, 100);
- }
- };
- this.onInputSizeChanged = (size) => {
- const newComposerHeight = Math.max(this.props.minComposerHeight, Math.min(this.props.maxComposerHeight, size.height));
- const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
- this.setState({
- composerHeight: newComposerHeight,
- messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
- });
- };
- this.onInputTextChanged = (text) => {
- if (this.getIsTypingDisabled()) {
- return;
- }
- if (this.props.onInputTextChanged) {
- this.props.onInputTextChanged(text);
- }
- // Only set state if it's not being overridden by a prop.
- if (this.props.text === undefined) {
- this.setState({ text });
- }
- };
- this.onInitialLayoutViewLayout = (e) => {
- const { layout } = e.nativeEvent;
- if (layout.height <= 0) {
- return;
- }
- this.notifyInputTextReset();
- this.setMaxHeight(layout.height);
- const newComposerHeight = this.props.minComposerHeight;
- const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
- const initialText = this.props.initialText || '';
- this.setState({
- isInitialized: true,
- text: this.getTextFromProp(initialText),
- composerHeight: newComposerHeight,
- messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
- });
- };
- this.onMainViewLayout = (e) => {
- // fix an issue when keyboard is dismissing during the initialization
- const { layout } = e.nativeEvent;
- if (this.getMaxHeight() !== layout.height ||
- this.getIsFirstLayout() === true) {
- this.setMaxHeight(layout.height);
- this.setState({
- messagesContainerHeight: this.prepareMessagesContainerHeight(this.getBasicMessagesContainerHeight()),
- });
- }
- if (this.getIsFirstLayout() === true) {
- this.setIsFirstLayout(false);
- }
- };
- this.invertibleScrollViewProps = {
- inverted: this.props.inverted,
- keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps,
- onKeyboardWillShow: this.onKeyboardWillShow,
- onKeyboardWillHide: this.onKeyboardWillHide,
- onKeyboardDidShow: this.onKeyboardDidShow,
- onKeyboardDidHide: this.onKeyboardDidHide,
- };
- }
- static append(currentMessages = [], messages, inverted = true) {
- if (!Array.isArray(messages)) {
- messages = [messages];
- }
- return inverted
- ? messages.concat(currentMessages)
- : currentMessages.concat(messages);
- }
- static prepend(currentMessages = [], messages, inverted = true) {
- if (!Array.isArray(messages)) {
- messages = [messages];
- }
- return inverted
- ? currentMessages.concat(messages)
- : messages.concat(currentMessages);
- }
- getChildContext() {
- return {
- actionSheet: () => this._actionSheetRef,
- getLocale: this.getLocale,
- };
- }
- componentWillMount() {
- const { messages, text } = this.props;
- this.setIsMounted(true);
- this.initLocale();
- this.setMessages(messages || []);
- this.setTextFromProp(text);
- }
- componentWillUnmount() {
- this.setIsMounted(false);
- }
- componentWillReceiveProps(nextProps = {}) {
- const { messages, text } = nextProps;
- this.setMessages(messages || []);
- this.setTextFromProp(text);
- }
- initLocale() {
- if (this.props.locale === null ||
- moment.locales().indexOf(this.props.locale || 'en') === -1) {
- this.setLocale('en');
- }
- else {
- this.setLocale(this.props.locale || 'en');
- }
- }
- setLocale(locale) {
- this._locale = locale;
- }
- setTextFromProp(textProp) {
- // Text prop takes precedence over state.
- if (textProp !== undefined && textProp !== this.state.text) {
- this.setState({ text: textProp });
- }
- }
- getTextFromProp(fallback) {
- if (this.props.text === undefined) {
- return fallback;
- }
- return this.props.text;
- }
- setMessages(messages) {
- this._messages = messages;
- }
- getMessages() {
- return this._messages;
- }
- setMaxHeight(height) {
- this._maxHeight = height;
- }
- getMaxHeight() {
- return this._maxHeight;
- }
- setKeyboardHeight(height) {
- this._keyboardHeight = height;
- }
- getKeyboardHeight() {
- if (Platform.OS === 'android' && !this.props.forceGetKeyboardHeight) {
- // For android: on-screen keyboard resized main container and has own height.
- // @see https://developer.android.com/training/keyboard-input/visibility.html
- // So for calculate the messages container height ignore keyboard height.
- return 0;
- }
- return this._keyboardHeight;
- }
- setBottomOffset(value) {
- this._bottomOffset = value;
- }
- getBottomOffset() {
- return this._bottomOffset;
- }
- setIsFirstLayout(value) {
- this._isFirstLayout = value;
- }
- getIsFirstLayout() {
- return this._isFirstLayout;
- }
- setIsTypingDisabled(value) {
+ constructor(props) {
+ super(props);
+ this._isMounted = false;
+ this._keyboardHeight = 0;
+ this._bottomOffset = 0;
+ this._maxHeight = undefined;
+ this._isFirstLayout = true;
+ this._locale = 'en';
+ this._messages = [];
+ this.invertibleScrollViewProps = undefined;
+ this._actionSheetRef = undefined;
+ this._messageContainerRef = React.createRef();
+ this.state = {
+ isInitialized: false,
+ composerHeight: this.props.minComposerHeight,
+ messagesContainerHeight: undefined,
+ typingDisabled: false,
+ text: undefined,
+ };
+ this.getLocale = () => this._locale;
+ this.safeAreaIphoneX = (bottomOffset) => {
+ if (isIphoneX()) {
+ return bottomOffset === this._bottomOffset ? 33 : bottomOffset;
+ }
+ return bottomOffset;
+ };
+ this.onKeyboardWillShow = (e) => {
+ this.setIsTypingDisabled(true);
+ this.setKeyboardHeight(
+ e.endCoordinates ? e.endCoordinates.height : e.end.height,
+ );
+ this.setBottomOffset(this.safeAreaIphoneX(this.props.bottomOffset));
+ const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard();
+ if (this.props.isAnimated === true) {
+ Animated.timing(this.state.messagesContainerHeight, {
+ toValue: newMessagesContainerHeight,
+ duration: 210,
+ }).start();
+ } else {
this.setState({
- typingDisabled: value,
+ messagesContainerHeight: newMessagesContainerHeight,
});
- }
- getIsTypingDisabled() {
- return this.state.typingDisabled;
- }
- setIsMounted(value) {
- this._isMounted = value;
- }
- getIsMounted() {
- return this._isMounted;
- }
- getMinInputToolbarHeight() {
- return this.props.renderAccessory
- ? this.props.minInputToolbarHeight * 2
- : this.props.minInputToolbarHeight;
- }
- calculateInputToolbarHeight(composerHeight) {
- return (composerHeight +
- (this.getMinInputToolbarHeight() - this.props.minComposerHeight));
- }
- /**
- * Returns the height, based on current window size, without taking the keyboard into account.
- */
- getBasicMessagesContainerHeight(composerHeight = this.state.composerHeight) {
- return (this.getMaxHeight() - this.calculateInputToolbarHeight(composerHeight));
- }
- /**
- * Returns the height, based on current window size, taking the keyboard into account.
- */
- getMessagesContainerHeightWithKeyboard(composerHeight = this.state.composerHeight) {
- return (this.getBasicMessagesContainerHeight(composerHeight) -
- this.getKeyboardHeight() +
- this.getBottomOffset());
- }
- prepareMessagesContainerHeight(value) {
- if (this.props.isAnimated === true) {
- return new Animated.Value(value);
- }
- return value;
- }
- scrollToBottom(animated = true) {
- if (this._messageContainerRef && this._messageContainerRef.current) {
- this._messageContainerRef.current.scrollTo({ offset: 0, animated });
- }
- }
- renderMessages() {
- const AnimatedView = this.props.isAnimated === true ? Animated.View : View;
- return (<AnimatedView style={{
- height: this.state.messagesContainerHeight,
- }}>
- <MessageContainer {...this.props} invertibleScrollViewProps={this.invertibleScrollViewProps} messages={this.getMessages()} ref={this._messageContainerRef}/>
- {this.renderChatFooter()}
- </AnimatedView>);
- }
- resetInputToolbar() {
- if (this.textInput) {
- this.textInput.clear();
- }
- this.notifyInputTextReset();
- const newComposerHeight = this.props.minComposerHeight;
- const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
+ }
+ };
+ this.onKeyboardWillHide = (_e) => {
+ this.setIsTypingDisabled(true);
+ this.setKeyboardHeight(0);
+ this.setBottomOffset(0);
+ const newMessagesContainerHeight = this.getBasicMessagesContainerHeight();
+ if (this.props.isAnimated === true) {
+ Animated.timing(this.state.messagesContainerHeight, {
+ toValue: newMessagesContainerHeight,
+ duration: 210,
+ }).start();
+ } else {
this.setState({
- text: this.getTextFromProp(''),
- composerHeight: newComposerHeight,
- messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
+ messagesContainerHeight: newMessagesContainerHeight,
});
- }
- focusTextInput() {
- if (this.textInput) {
- this.textInput.focus();
- }
- }
- notifyInputTextReset() {
- if (this.props.onInputTextChanged) {
- this.props.onInputTextChanged('');
- }
- }
- renderInputToolbar() {
- const inputToolbarProps = {
- ...this.props,
- text: this.getTextFromProp(this.state.text),
- composerHeight: Math.max(this.props.minComposerHeight, this.state.composerHeight),
- onSend: this.onSend,
- onInputSizeChanged: this.onInputSizeChanged,
- onTextChanged: this.onInputTextChanged,
- textInputProps: {
- ...this.props.textInputProps,
- ref: (textInput) => (this.textInput = textInput),
- maxLength: this.getIsTypingDisabled() ? 0 : this.props.maxInputLength,
- },
- };
- if (this.props.renderInputToolbar) {
- return this.props.renderInputToolbar(inputToolbarProps);
- }
- return <InputToolbar {...inputToolbarProps}/>;
- }
- renderChatFooter() {
- if (this.props.renderChatFooter) {
- return this.props.renderChatFooter();
- }
- return null;
- }
- renderLoading() {
- if (this.props.renderLoading) {
- return this.props.renderLoading();
- }
- return null;
- }
- render() {
- if (this.state.isInitialized === true) {
- return (<SafeAreaView style={styles.safeArea}>
- <GiftedActionSheet ref={(component) => (this._actionSheetRef = component)}>
- <View style={styles.container} onLayout={this.onMainViewLayout}>
- {this.renderMessages()}
- {this.renderInputToolbar()}
- </View>
- </GiftedActionSheet>
- </SafeAreaView>);
- }
- return (<View style={styles.container} onLayout={this.onInitialLayoutViewLayout}>
- {this.renderLoading()}
- </View>);
- }
+ }
+ };
+ this.onKeyboardDidShow = (e) => {
+ if (Platform.OS === 'android') {
+ this.onKeyboardWillShow(e);
+ }
+ this.setIsTypingDisabled(false);
+ };
+ this.onKeyboardDidHide = (e) => {
+ if (Platform.OS === 'android') {
+ this.onKeyboardWillHide(e);
+ }
+ this.setIsTypingDisabled(false);
+ };
+ this.onSend = (messages = [], shouldResetInputToolbar = false) => {
+ if (!Array.isArray(messages)) {
+ messages = [messages];
+ }
+ const newMessages = messages.map(message => ({
+ ...message,
+ user: this.props.user,
+ createdAt: new Date(),
+ _id: this.props.messageIdGenerator && this.props.messageIdGenerator(),
+ }));
+ if (shouldResetInputToolbar === true) {
+ this.setIsTypingDisabled(true);
+ this.resetInputToolbar();
+ }
+ if (this.props.onSend) {
+ this.props.onSend(newMessages);
+ }
+ this.scrollToBottom();
+ if (shouldResetInputToolbar === true) {
+ setTimeout(() => {
+ if (this.getIsMounted() === true) {
+ this.setIsTypingDisabled(false);
+ }
+ }, 100);
+ }
+ };
+ this.onInputSizeChanged = (size) => {
+ const newComposerHeight = Math.max(
+ this.props.minComposerHeight,
+ Math.min(this.props.maxComposerHeight, size.height),
+ );
+ const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(
+ newComposerHeight,
+ );
+ this.setState({
+ composerHeight: newComposerHeight,
+ messagesContainerHeight: this.prepareMessagesContainerHeight(
+ newMessagesContainerHeight,
+ ),
+ });
+ };
+ this.onInputTextChanged = (text) => {
+ if (this.getIsTypingDisabled()) {
+ return;
+ }
+ if (this.props.onInputTextChanged) {
+ this.props.onInputTextChanged(text);
+ }
+ // Only set state if it's not being overridden by a prop.
+ if (this.props.text === undefined) {
+ this.setState({ text });
+ }
+ };
+ this.onInitialLayoutViewLayout = (e) => {
+ const { layout } = e.nativeEvent;
+ if (layout.height <= 0) {
+ return;
+ }
+ this.notifyInputTextReset();
+ this.setMaxHeight(layout.height);
+ const newComposerHeight = this.props.minComposerHeight;
+ const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(
+ newComposerHeight,
+ );
+ const initialText = this.props.initialText || '';
+ this.setState({
+ isInitialized: true,
+ text: this.getTextFromProp(initialText),
+ composerHeight: newComposerHeight,
+ messagesContainerHeight: this.prepareMessagesContainerHeight(
+ newMessagesContainerHeight,
+ ),
+ });
+ };
+ this.onMainViewLayout = (e) => {
+ // fix an issue when keyboard is dismissing during the initialization
+ const { layout } = e.nativeEvent;
+ if (
+ this.getMaxHeight() !== layout.height
+ || this.getIsFirstLayout() === true
+ ) {
+ this.setMaxHeight(layout.height);
+ this.setState({
+ messagesContainerHeight: this.prepareMessagesContainerHeight(
+ this.getBasicMessagesContainerHeight(),
+ ),
+ });
+ }
+ if (this.getIsFirstLayout() === true) {
+ this.setIsFirstLayout(false);
+ }
+ };
+ this.invertibleScrollViewProps = {
+ inverted: this.props.inverted,
+ keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps,
+ onKeyboardWillShow: this.onKeyboardWillShow,
+ onKeyboardWillHide: this.onKeyboardWillHide,
+ onKeyboardDidShow: this.onKeyboardDidShow,
+ onKeyboardDidHide: this.onKeyboardDidHide,
+ };
+ }
+
+ static append(currentMessages = [], messages, inverted = true) {
+ if (!Array.isArray(messages)) {
+ messages = [messages];
+ }
+ return inverted
+ ? messages.concat(currentMessages)
+ : currentMessages.concat(messages);
+ }
+
+ static prepend(currentMessages = [], messages, inverted = true) {
+ if (!Array.isArray(messages)) {
+ messages = [messages];
+ }
+ return inverted
+ ? currentMessages.concat(messages)
+ : messages.concat(currentMessages);
+ }
+
+ getChildContext() {
+ return {
+ actionSheet: () => this._actionSheetRef,
+ getLocale: this.getLocale,
+ };
+ }
+
+ componentWillMount() {
+ const { messages, text } = this.props;
+ this.setIsMounted(true);
+ this.initLocale();
+ this.setMessages(messages || []);
+ this.setTextFromProp(text);
+ }
+
+ componentWillUnmount() {
+ this.setIsMounted(false);
+ }
+
+ componentWillReceiveProps(nextProps = {}) {
+ const { messages, text } = nextProps;
+ this.setMessages(messages || []);
+ this.setTextFromProp(text);
+ }
+
+ initLocale() {
+ if (
+ this.props.locale === null
+ || moment.locales().indexOf(this.props.locale || 'en') === -1
+ ) {
+ this.setLocale('en');
+ } else {
+ this.setLocale(this.props.locale || 'en');
+ }
+ }
+
+ setLocale(locale) {
+ this._locale = locale;
+ }
+
+ setTextFromProp(textProp) {
+ // Text prop takes precedence over state.
+ if (textProp !== undefined && textProp !== this.state.text) {
+ this.setState({ text: textProp });
+ }
+ }
+
+ getTextFromProp(fallback) {
+ if (this.props.text === undefined) {
+ return fallback;
+ }
+ return this.props.text;
+ }
+
+ setMessages(messages) {
+ this._messages = messages;
+ }
+
+ getMessages() {
+ return this._messages;
+ }
+
+ setMaxHeight(height) {
+ this._maxHeight = height;
+ }
+
+ getMaxHeight() {
+ return this._maxHeight;
+ }
+
+ setKeyboardHeight(height) {
+ this._keyboardHeight = height;
+ }
+
+ getKeyboardHeight() {
+ if (Platform.OS === 'android' && !this.props.forceGetKeyboardHeight) {
+ // For android: on-screen keyboard resized main container and has own height.
+ // @see https://developer.android.com/training/keyboard-input/visibility.html
+ // So for calculate the messages container height ignore keyboard height.
+ return 0;
+ }
+ return this._keyboardHeight;
+ }
+
+ setBottomOffset(value) {
+ this._bottomOffset = value;
+ }
+
+ getBottomOffset() {
+ return this._bottomOffset;
+ }
+
+ setIsFirstLayout(value) {
+ this._isFirstLayout = value;
+ }
+
+ getIsFirstLayout() {
+ return this._isFirstLayout;
+ }
+
+ setIsTypingDisabled(value) {
+ this.setState({
+ typingDisabled: value,
+ });
+ }
+
+ getIsTypingDisabled() {
+ return this.state.typingDisabled;
+ }
+
+ setIsMounted(value) {
+ this._isMounted = value;
+ }
+
+ getIsMounted() {
+ return this._isMounted;
+ }
+
+ getMinInputToolbarHeight() {
+ return this.props.renderAccessory
+ ? this.props.minInputToolbarHeight * 2
+ : this.props.minInputToolbarHeight;
+ }
+
+ calculateInputToolbarHeight(composerHeight) {
+ return (
+ composerHeight
+ + (this.getMinInputToolbarHeight() - this.props.minComposerHeight)
+ );
+ }
+
+ /**
+ * Returns the height, based on current window size, without taking the keyboard into account.
+ */
+ getBasicMessagesContainerHeight(composerHeight = this.state.composerHeight) {
+ return (
+ this.getMaxHeight() - this.calculateInputToolbarHeight(composerHeight)
+ );
+ }
+
+ /**
+ * Returns the height, based on current window size, taking the keyboard into account.
+ */
+ getMessagesContainerHeightWithKeyboard(
+ composerHeight = this.state.composerHeight,
+ ) {
+ return (
+ this.getBasicMessagesContainerHeight(composerHeight)
+ - this.getKeyboardHeight()
+ + this.getBottomOffset()
+ );
+ }
+
+ prepareMessagesContainerHeight(value) {
+ if (this.props.isAnimated === true) {
+ return new Animated.Value(value);
+ }
+ return value;
+ }
+
+ scrollToBottom(animated = true) {
+ if (this._messageContainerRef && this._messageContainerRef.current) {
+ this._messageContainerRef.current.scrollTo({ offset: 0, animated });
+ }
+ }
+
+ renderMessages() {
+ const AnimatedView = this.props.isAnimated === true ? Animated.View : View;
+ return (
+ <AnimatedView
+ style={{
+ flex: 1,
+ // height: this.state.messagesContainerHeight,
+ }}
+ >
+ <MessageContainer
+ {...this.props}
+ invertibleScrollViewProps={this.invertibleScrollViewProps}
+ messages={this.getMessages()}
+ ref={this._messageContainerRef}
+ />
+ {this.renderChatFooter()}
+ </AnimatedView>
+ );
+ }
+
+ resetInputToolbar() {
+ if (this.textInput) {
+ this.textInput.clear();
+ }
+ this.notifyInputTextReset();
+ const newComposerHeight = this.props.minComposerHeight;
+ const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(
+ newComposerHeight,
+ );
+ this.setState({
+ text: this.getTextFromProp(''),
+ composerHeight: newComposerHeight,
+ messagesContainerHeight: this.prepareMessagesContainerHeight(
+ newMessagesContainerHeight,
+ ),
+ });
+ }
+
+ focusTextInput() {
+ if (this.textInput) {
+ this.textInput.focus();
+ }
+ }
+
+ notifyInputTextReset() {
+ if (this.props.onInputTextChanged) {
+ this.props.onInputTextChanged('');
+ }
+ }
+
+ renderInputToolbar() {
+ const inputToolbarProps = {
+ ...this.props,
+ text: this.getTextFromProp(this.state.text),
+ composerHeight: Math.max(
+ this.props.minComposerHeight,
+ this.state.composerHeight,
+ ),
+ onSend: this.onSend,
+ onInputSizeChanged: this.onInputSizeChanged,
+ onTextChanged: this.onInputTextChanged,
+ textInputProps: {
+ ...this.props.textInputProps,
+ ref: textInput => (this.textInput = textInput),
+ maxLength: this.getIsTypingDisabled() ? 0 : this.props.maxInputLength,
+ },
+ };
+ if (this.props.renderInputToolbar) {
+ return this.props.renderInputToolbar(inputToolbarProps);
+ }
+ return <InputToolbar {...inputToolbarProps} />;
+ }
+
+ renderChatFooter() {
+ if (this.props.renderChatFooter) {
+ return this.props.renderChatFooter();
+ }
+ return null;
+ }
+
+ renderLoading() {
+ if (this.props.renderLoading) {
+ return this.props.renderLoading();
+ }
+ return null;
+ }
+
+ render() {
+ // if (this.state.isInitialized === true) {
+ return (
+ // <SafeAreaView style={styles.safeArea}>
+ <GiftedActionSheet ref={component => (this._actionSheetRef = component)}>
+ <View style={styles.container}>
+ {this.renderMessages()}
+ {this.renderInputToolbar()}
+ </View>
+ </GiftedActionSheet>
+ // </SafeAreaView>
+ );
+ // }
+ // return (
+ // <View style={styles.container} onLayout={this.onInitialLayoutViewLayout}>
+ // {this.renderLoading()}
+ // </View>
+ // );
+ }
}
GiftedChat.childContextTypes = {
- actionSheet: PropTypes.func,
- getLocale: PropTypes.func,
+ actionSheet: PropTypes.func,
+ getLocale: PropTypes.func,
};
GiftedChat.defaultProps = {
- messages: [],
- text: undefined,
- placeholder: DEFAULT_PLACEHOLDER,
- messageIdGenerator: () => uuid.v4(),
- user: {},
- onSend: () => { },
- locale: null,
- timeFormat: TIME_FORMAT,
- dateFormat: DATE_FORMAT,
- isAnimated: Platform.select({
- ios: true,
- android: false,
- }),
- loadEarlier: false,
- onLoadEarlier: () => { },
- isLoadingEarlier: false,
- renderLoading: null,
- renderLoadEarlier: null,
- renderAvatar: undefined,
- showUserAvatar: false,
- onPressAvatar: null,
- renderUsernameOnMessage: false,
- renderAvatarOnTop: false,
- renderBubble: null,
- renderSystemMessage: null,
- onLongPress: null,
- renderMessage: null,
- renderMessageText: null,
- renderMessageImage: null,
- imageProps: {},
- videoProps: {},
- lightboxProps: {},
- textInputProps: {},
- listViewProps: {},
- renderCustomView: null,
- renderDay: null,
- renderTime: null,
- renderFooter: null,
- renderChatFooter: null,
- renderInputToolbar: null,
- renderComposer: null,
- renderActions: null,
- renderSend: null,
- renderAccessory: null,
- onPressActionButton: null,
- bottomOffset: 0,
- minInputToolbarHeight: 44,
- keyboardShouldPersistTaps: Platform.select({
- ios: 'never',
- android: 'always',
- }),
- onInputTextChanged: null,
- maxInputLength: null,
- forceGetKeyboardHeight: false,
- inverted: true,
- extraData: null,
- minComposerHeight: MIN_COMPOSER_HEIGHT,
- maxComposerHeight: MAX_COMPOSER_HEIGHT,
+ messages: [],
+ text: undefined,
+ placeholder: DEFAULT_PLACEHOLDER,
+ messageIdGenerator: () => uuid.v4(),
+ user: {},
+ onSend: () => {},
+ locale: null,
+ timeFormat: TIME_FORMAT,
+ dateFormat: DATE_FORMAT,
+ isAnimated: Platform.select({
+ ios: true,
+ android: false,
+ }),
+ loadEarlier: false,
+ onLoadEarlier: () => {},
+ isLoadingEarlier: false,
+ renderLoading: null,
+ renderLoadEarlier: null,
+ renderAvatar: undefined,
+ showUserAvatar: false,
+ onPressAvatar: null,
+ renderUsernameOnMessage: false,
+ renderAvatarOnTop: false,
+ renderBubble: null,
+ renderSystemMessage: null,
+ onLongPress: null,
+ renderMessage: null,
+ renderMessageText: null,
+ renderMessageImage: null,
+ imageProps: {},
+ videoProps: {},
+ lightboxProps: {},
+ textInputProps: {},
+ listViewProps: {},
+ renderCustomView: null,
+ renderDay: null,
+ renderTime: null,
+ renderFooter: null,
+ renderChatFooter: null,
+ renderInputToolbar: null,
+ renderComposer: null,
+ renderActions: null,
+ renderSend: null,
+ renderAccessory: null,
+ onPressActionButton: null,
+ bottomOffset: 0,
+ minInputToolbarHeight: 44,
+ keyboardShouldPersistTaps: Platform.select({
+ ios: 'never',
+ android: 'always',
+ }),
+ onInputTextChanged: null,
+ maxInputLength: null,
+ forceGetKeyboardHeight: false,
+ inverted: true,
+ extraData: null,
+ minComposerHeight: MIN_COMPOSER_HEIGHT,
+ maxComposerHeight: MAX_COMPOSER_HEIGHT,
};
GiftedChat.propTypes = {
- messages: PropTypes.arrayOf(PropTypes.object),
- text: PropTypes.string,
- initialText: PropTypes.string,
- placeholder: PropTypes.string,
- messageIdGenerator: PropTypes.func,
- user: PropTypes.object,
- onSend: PropTypes.func,
- locale: PropTypes.string,
- timeFormat: PropTypes.string,
- dateFormat: PropTypes.string,
- isAnimated: PropTypes.bool,
- loadEarlier: PropTypes.bool,
- onLoadEarlier: PropTypes.func,
- isLoadingEarlier: PropTypes.bool,
- renderLoading: PropTypes.func,
- renderLoadEarlier: PropTypes.func,
- renderAvatar: PropTypes.func,
- showUserAvatar: PropTypes.bool,
- onPressAvatar: PropTypes.func,
- renderUsernameOnMessage: PropTypes.bool,
- renderAvatarOnTop: PropTypes.bool,
- renderBubble: PropTypes.func,
- renderSystemMessage: PropTypes.func,
- onLongPress: PropTypes.func,
- renderMessage: PropTypes.func,
- renderMessageText: PropTypes.func,
- renderMessageImage: PropTypes.func,
- imageProps: PropTypes.object,
- videoProps: PropTypes.object,
- lightboxProps: PropTypes.object,
- renderCustomView: PropTypes.func,
- renderDay: PropTypes.func,
- renderTime: PropTypes.func,
- renderFooter: PropTypes.func,
- renderChatFooter: PropTypes.func,
- renderInputToolbar: PropTypes.func,
- renderComposer: PropTypes.func,
- renderActions: PropTypes.func,
- renderSend: PropTypes.func,
- renderAccessory: PropTypes.func,
- onPressActionButton: PropTypes.func,
- bottomOffset: PropTypes.number,
- minInputToolbarHeight: PropTypes.number,
- listViewProps: PropTypes.object,
- keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled']),
- onInputTextChanged: PropTypes.func,
- maxInputLength: PropTypes.number,
- forceGetKeyboardHeight: PropTypes.bool,
- inverted: PropTypes.bool,
- textInputProps: PropTypes.object,
- extraData: PropTypes.object,
- minComposerHeight: PropTypes.number,
- maxComposerHeight: PropTypes.number,
- alignTop: PropTypes.bool,
+ messages: PropTypes.arrayOf(PropTypes.object),
+ text: PropTypes.string,
+ initialText: PropTypes.string,
+ placeholder: PropTypes.string,
+ messageIdGenerator: PropTypes.func,
+ user: PropTypes.object,
+ onSend: PropTypes.func,
+ locale: PropTypes.string,
+ timeFormat: PropTypes.string,
+ dateFormat: PropTypes.string,
+ isAnimated: PropTypes.bool,
+ loadEarlier: PropTypes.bool,
+ onLoadEarlier: PropTypes.func,
+ isLoadingEarlier: PropTypes.bool,
+ renderLoading: PropTypes.func,
+ renderLoadEarlier: PropTypes.func,
+ renderAvatar: PropTypes.func,
+ showUserAvatar: PropTypes.bool,
+ onPressAvatar: PropTypes.func,
+ renderUsernameOnMessage: PropTypes.bool,
+ renderAvatarOnTop: PropTypes.bool,
+ renderBubble: PropTypes.func,
+ renderSystemMessage: PropTypes.func,
+ onLongPress: PropTypes.func,
+ renderMessage: PropTypes.func,
+ renderMessageText: PropTypes.func,
+ renderMessageImage: PropTypes.func,
+ imageProps: PropTypes.object,
+ videoProps: PropTypes.object,
+ lightboxProps: PropTypes.object,
+ renderCustomView: PropTypes.func,
+ renderDay: PropTypes.func,
+ renderTime: PropTypes.func,
+ renderFooter: PropTypes.func,
+ renderChatFooter: PropTypes.func,
+ renderInputToolbar: PropTypes.func,
+ renderComposer: PropTypes.func,
+ renderActions: PropTypes.func,
+ renderSend: PropTypes.func,
+ renderAccessory: PropTypes.func,
+ onPressActionButton: PropTypes.func,
+ bottomOffset: PropTypes.number,
+ minInputToolbarHeight: PropTypes.number,
+ listViewProps: PropTypes.object,
+ keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled']),
+ onInputTextChanged: PropTypes.func,
+ maxInputLength: PropTypes.number,
+ forceGetKeyboardHeight: PropTypes.bool,
+ inverted: PropTypes.bool,
+ textInputProps: PropTypes.object,
+ extraData: PropTypes.object,
+ minComposerHeight: PropTypes.number,
+ maxComposerHeight: PropTypes.number,
+ alignTop: PropTypes.bool,
};
const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- safeArea: {
- flex: 1,
- },
+ container: {
+ flex: 1,
+ },
+ safeArea: {
+ flex: 1,
+ },
});
-export { GiftedChat, Actions, Avatar, Bubble, SystemMessage, MessageImage, MessageText, Composer, Day, InputToolbar, LoadEarlier, Message, MessageContainer, Send, Time, GiftedAvatar, utils, };
-//# sourceMappingURL=GiftedChat.js.map
\ No newline at end of file
+export {
+ GiftedChat,
+ Actions,
+ Avatar,
+ Bubble,
+ SystemMessage,
+ MessageImage,
+ MessageText,
+ Composer,
+ Day,
+ InputToolbar,
+ LoadEarlier,
+ Message,
+ MessageContainer,
+ Send,
+ Time,
+ GiftedAvatar,
+ utils,
+};
+// # sourceMappingURL=GiftedChat.js.map
diff --git a/node_modules/react-native-gifted-chat/lib/InputToolbar.js b/node_modules/react-native-gifted-chat/lib/InputToolbar.js
index d3f75d3..36a6611 100644
--- a/node_modules/react-native-gifted-chat/lib/InputToolbar.js
+++ b/node_modules/react-native-gifted-chat/lib/InputToolbar.js
@@ -23,28 +23,28 @@ const styles = StyleSheet.create({
},
});
export default class InputToolbar extends React.Component {
- constructor() {
- super(...arguments);
- this.state = {
- position: 'absolute',
- };
- this.keyboardWillShowListener = undefined;
- this.keyboardWillHideListener = undefined;
- this.keyboardWillShow = () => {
- if (this.state.position !== 'relative') {
- this.setState({
- position: 'relative',
- });
- }
- };
- this.keyboardWillHide = () => {
- if (this.state.position !== 'absolute') {
- this.setState({
- position: 'absolute',
- });
- }
- };
- }
+ // constructor() {
+ // super(...arguments);
+ // this.state = {
+ // position: 'absolute',
+ // };
+ // this.keyboardWillShowListener = undefined;
+ // this.keyboardWillHideListener = undefined;
+ // this.keyboardWillShow = () => {
+ // if (this.state.position !== 'relative') {
+ // this.setState({
+ // position: 'relative',
+ // });
+ // }
+ // };
+ // this.keyboardWillHide = () => {
+ // if (this.state.position !== 'absolute') {
+ // this.setState({
+ // position: 'absolute',
+ // });
+ // }
+ // };
+ // }
componentWillMount() {
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
@@ -91,7 +91,7 @@ export default class InputToolbar extends React.Component {
return (<View style={[
styles.container,
this.props.containerStyle,
- { position: this.state.position },
+ // { position: this.state.position },
]}>
<View style={[styles.primary, this.props.primaryStyle]}>
{this.renderActions()}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment