react-native-messageList add maxBubbleWidth prop

veerjainATgmail · Aug 28, 2018 · 4b2330b · 4b2330b
1 parent d928371
commit 4b2330b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/ReactNative/ios/RCTAuroraIMUI/RCTMessageListView.h b/ReactNative/ios/RCTAuroraIMUI/RCTMessageListView.h
@@ -31,6 +31,9 @@
 @property (nonatomic, copy) RCTBubblingEventBlock onPullToRefresh;
 
 // custom layout
+//maxBubbleWidth
+@property(assign, nonatomic) CGFloat maxBubbleWidth;
+
 @property(copy, nonatomic) NSString *messageListBackgroundColor;
 
 @property(strong, nonatomic) NSDictionary *sendBubble;

diff --git a/ReactNative/ios/RCTAuroraIMUI/RCTMessageListViewManager.m b/ReactNative/ios/RCTAuroraIMUI/RCTMessageListViewManager.m
@@ -97,6 +97,12 @@ - (UIView *)view
 
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(maxBubbleWidth, NSNumber, RCTMessageListView) {
+  NSNumber *widthPercent = [RCTConvert NSNumber: json];
+
+  IMUIMessageCellLayout.bubbleMaxWidth = UIScreen.mainScreen.bounds.size.width * widthPercent.floatValue;
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(sendBubbleTextColor, NSString, RCTMessageListView) {
   NSString *colorString = [RCTConvert NSString: json];
   UIColor *color = [UIColor hexStringToUIColorWithHex:colorString];

diff --git a/ReactNative/messagelist.ios.js b/ReactNative/messagelist.ios.js
@@ -117,7 +117,7 @@ MessageList.propTypes = {
   displayNameTextSize: PropTypes.number,
   displayNameTextColor: PropTypes.string,
   displayNamePadding: PropTypes.object,
-
+  maxBubbleWidth: PropTypes.number,
   eventTextLineHeight: PropTypes.number, //TODO:
   messageTextLineHeight: PropTypes.number, //TODO:
   ...ViewPropTypes

diff --git a/ReactNative/sample/App.js b/ReactNative/sample/App.js
@@ -519,6 +519,7 @@ export default class TestRNIMUI extends Component {
           datePadding={{ left: 5, top: 5, right: 5, bottom: 5 }}
           dateBackgroundColor={"#F3F3F3"}
           photoMessageRadius={5}
+          maxBubbleWidth={0.7}
           videoDurationTextColor={"#ffffff"}
         />
         <InputView style={this.state.inputViewLayout}