diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -209,13 +209,27 @@ ); } + const viewStyle = [styles.alignment]; + if (!__DEV__) { + // We don't force view height in dev mode because we + // want to measure it in Message to see if it's correct + if (item.messageShapeType === 'text') { + viewStyle.push({ height: item.contentHeight }); + } else if (item.messageShapeType === 'multimedia') { + const height = item.inlineEngagementHeight + ? item.contentHeight + item.inlineEngagementHeight + : item.contentHeight; + viewStyle.push({ height }); + } + } + return ( - + {deliveryIcon} {messageBox} diff --git a/native/chat/failed-send.react.js b/native/chat/failed-send.react.js --- a/native/chat/failed-send.react.js +++ b/native/chat/failed-send.react.js @@ -139,6 +139,7 @@ paddingHorizontal: 3, }, failedSendInfo: { + flex: 1, flexDirection: 'row', justifyContent: 'flex-end', marginRight: 20, diff --git a/native/chat/message.react.js b/native/chat/message.react.js --- a/native/chat/message.react.js +++ b/native/chat/message.react.js @@ -46,7 +46,6 @@ type Props = { ...BaseProps, +keyboardState: ?KeyboardState, - +viewStyle: { +height: number }, }; class Message extends React.Component { shouldComponentUpdate(nextProps: Props): boolean { @@ -65,10 +64,6 @@ } render() { - // We don't force view height in dev mode because we - // want to measure it in the onLayout below to see if it's correct - const viewStyle = __DEV__ ? undefined : this.props.viewStyle; - let message; if (this.props.item.messageShapeType === 'text') { message = ( @@ -80,7 +75,6 @@ toggleFocus={this.props.toggleFocus} verticalBounds={this.props.verticalBounds} shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator} - style={viewStyle} /> ); } else if (this.props.item.messageShapeType === 'multimedia') { @@ -91,7 +85,6 @@ toggleFocus={this.props.toggleFocus} verticalBounds={this.props.verticalBounds} shouldDisplayPinIndicator={this.props.shouldDisplayPinIndicator} - style={viewStyle} /> ); } else { @@ -103,7 +96,6 @@ focused={this.props.focused} toggleFocus={this.props.toggleFocus} verticalBounds={this.props.verticalBounds} - style={viewStyle} /> ); } @@ -125,7 +117,7 @@ } const measuredHeight = event.nativeEvent.layout.height; - const expectedHeight = this.props.viewStyle.height; + const expectedHeight = messageItemHeight(this.props.item); const pixelRatio = 1 / PixelRatio.get(); const distance = Math.abs(measuredHeight - expectedHeight); @@ -154,17 +146,7 @@ const ConnectedMessage: React.ComponentType = React.memo( function ConnectedMessage(props: BaseProps) { const keyboardState = React.useContext(KeyboardContext); - - const viewStyle = React.useMemo( - () => ({ - height: messageItemHeight(props.item), - }), - [props.item], - ); - - return ( - - ); + return ; }, ); diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -196,12 +196,19 @@ const contentAndHeaderOpacity = useContentAndHeaderOpacity(item); + const viewStyle = {}; + if (!__DEV__) { + // We don't force view height in dev mode because we + // want to measure it in Message to see if it's correct + viewStyle.height = item.contentHeight; + } + return ( {timestamp} - +