Skip to content
Permalink
Browse files

feat(keyboard avoiding view): strip isAnimated and add keyboard avoid…

…ing view
  • Loading branch information
shamilovtim authored and xcarpentier committed Nov 19, 2019
1 parent cd7c642 commit c3ddc9a77e4aeed76e15aea7f897d3cd62948fe3
Showing with 56 additions and 66 deletions.
  1. +1 −1 README.md
  2. +1 −1 flow-typedefs/GiftedChat.js.flow
  3. +54 −64 src/GiftedChat.tsx
@@ -280,8 +280,8 @@ interface QuickReplies {
- **`locale`** _(String)_ - Locale to localize the dates
- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'`
- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'`
- **`isAnimated`** _(Bool)_ - Animates the view when the keyboard appears
- **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button
- **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
- **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
- **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
- **`renderLoading`** _(Function)_ - Render a loading view when initializing
@@ -53,7 +53,7 @@ export type GiftedChatProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
locale?: string,
timeFormat?: string,
dateFormat?: string,
isAnimated?: boolean,
isKeyboardInternallyHandled?: boolean,
loadEarlier?: boolean,
isLoadingEarlier?: boolean,
showUserAvatar?: boolean,
@@ -10,6 +10,7 @@ import {
SafeAreaView,
FlatList,
TextStyle,
KeyboardAvoidingView,
} from 'react-native'

import { ActionSheetProvider } from '@expo/react-native-action-sheet'
@@ -68,8 +69,6 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
timeFormat?: string
/* Format to use for rendering dates; default is 'll' */
dateFormat?: string
/* Animates the view when the keyboard appears */
isAnimated?: boolean
/* Enables the "Load earlier messages" button */
loadEarlier?: boolean
/*Display an ActivityIndicator when loading earlier messages*/
@@ -79,6 +78,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
/* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
showAvatarForEveryMessage?: boolean
/* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
isKeyboardInternallyHandled?: boolean
/* Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is true */
renderAvatarOnTop?: boolean
inverted?: boolean
/* Extra props to be passed to the <Image> component created by the default renderMessageImage */
@@ -209,11 +210,6 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
locale: null,
timeFormat: TIME_FORMAT,
dateFormat: DATE_FORMAT,
isAnimated: Platform.select({
ios: true,
android: false,
default: false,
}),
loadEarlier: false,
onLoadEarlier: () => {},
isLoadingEarlier: false,
@@ -247,6 +243,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
renderActions: null,
renderSend: null,
renderAccessory: null,
isKeyboardInternallyHandled: true,
onPressActionButton: null,
bottomOffset: 0,
minInputToolbarHeight: 44,
@@ -275,7 +272,6 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
locale: PropTypes.string,
timeFormat: PropTypes.string,
dateFormat: PropTypes.string,
isAnimated: PropTypes.bool,
loadEarlier: PropTypes.bool,
onLoadEarlier: PropTypes.func,
isLoadingEarlier: PropTypes.bool,
@@ -553,13 +549,6 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
)
}

prepareMessagesContainerHeight(value: number) {
if (this.props.isAnimated === true) {
return new Animated.Value(value)
}
return value
}

safeAreaIphoneX = (bottomOffset: number) => {
if (isIphoneX()) {
return bottomOffset === this._bottomOffset ? 33 : bottomOffset
@@ -568,35 +557,25 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
}

onKeyboardWillShow = (e: any) => {
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 {
if (this.props.isKeyboardInternallyHandled) {
this.setIsTypingDisabled(true)
this.setKeyboardHeight(
e.endCoordinates ? e.endCoordinates.height : e.end.height,
)
this.setBottomOffset(this.safeAreaIphoneX(this.props.bottomOffset!))
const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard()
this.setState({
messagesContainerHeight: newMessagesContainerHeight,
})
}
}

onKeyboardWillHide = (_e: any) => {
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 {
if (this.props.isKeyboardInternallyHandled) {
this.setIsTypingDisabled(true)
this.setKeyboardHeight(0)
this.setBottomOffset(0)
const newMessagesContainerHeight = this.getBasicMessagesContainerHeight()
this.setState({
messagesContainerHeight: newMessagesContainerHeight,
})
@@ -632,22 +611,41 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
}

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()}
forwardRef={this._messageContainerRef}
/>
{this.renderChatFooter()}
</AnimatedView>
<>
{this.props.isKeyboardInternallyHandled && (
<KeyboardAvoidingView enabled>
<View
style={{
height: this.state.messagesContainerHeight,
}}
>
<MessageContainer
{...this.props}
invertibleScrollViewProps={this.invertibleScrollViewProps}
messages={this.getMessages()}
forwardRef={this._messageContainerRef}
/>
{this.renderChatFooter()}
</View>
</KeyboardAvoidingView>
)}
{!this.props.isKeyboardInternallyHandled && (
<View
style={{
height: this.state.messagesContainerHeight,
}}
>
<MessageContainer
{...this.props}
invertibleScrollViewProps={this.invertibleScrollViewProps}
messages={this.getMessages()}
forwardRef={this._messageContainerRef}
/>
{this.renderChatFooter()}
</View>
)}
</>
)
}

@@ -693,9 +691,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
this.setState({
text: this.getTextFromProp(''),
composerHeight: newComposerHeight,
messagesContainerHeight: this.prepareMessagesContainerHeight(
newMessagesContainerHeight,
),
messagesContainerHeight: newMessagesContainerHeight,
})
}

@@ -715,9 +711,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
)
this.setState({
composerHeight: newComposerHeight,
messagesContainerHeight: this.prepareMessagesContainerHeight(
newMessagesContainerHeight,
),
messagesContainerHeight: newMessagesContainerHeight,
})
}

@@ -756,9 +750,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
isInitialized: true,
text: this.getTextFromProp(initialText),
composerHeight: newComposerHeight,
messagesContainerHeight: this.prepareMessagesContainerHeight(
newMessagesContainerHeight,
),
messagesContainerHeight: newMessagesContainerHeight,
})
}

@@ -771,9 +763,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
) {
this.setMaxHeight(layout.height)
this.setState({
messagesContainerHeight: this.prepareMessagesContainerHeight(
this.getBasicMessagesContainerHeight(),
),
messagesContainerHeight: this.getBasicMessagesContainerHeight(),
})
}
if (this.getIsFirstLayout() === true) {

0 comments on commit c3ddc9a

Please sign in to comment.
You can’t perform that action at this time.