fix: adjust lineHeight of iOS TextInput

Author: bang9

packages/uikit-react-native-foundation/src/components/TextInput/index.tsx

@@ -15,6 +15,10 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
   const variantStyle = colors['ui']['input'][variant];
   const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
   const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };
+  const fontStyle = {
+    ...typography.body3,
+    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,
+  };
 
   return (
     <RNTextInput
@@ -23,7 +27,7 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
       selectionColor={inputStyle.highlight}
       placeholderTextColor={inputStyle.placeholder}
       style={[
-        typography.body3,
+        fontStyle,
         styles.input,
         { color: inputStyle.text, backgroundColor: inputStyle.background },
         underlineStyle,
@@ -38,8 +42,11 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
 
 const styles = createStyleSheet({
   input: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    includeFontPadding: false,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
 });
 

packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts

@@ -18,11 +18,15 @@ const preProcessor: Partial<StylePreprocessor> = {
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,
+  'paddingVertical': SCALE_FACTOR_WITH_STR,
+  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
   'paddingTop': SCALE_FACTOR_WITH_STR,
   'paddingBottom': SCALE_FACTOR_WITH_STR,
   'paddingLeft': SCALE_FACTOR_WITH_STR,
   'paddingRight': SCALE_FACTOR_WITH_STR,
   'margin': SCALE_FACTOR_WITH_STR,
+  'marginVertical': SCALE_FACTOR_WITH_STR,
+  'marginHorizontal': SCALE_FACTOR_WITH_STR,
   'marginTop': SCALE_FACTOR_WITH_STR,
   'marginBottom': SCALE_FACTOR_WITH_STR,
   'marginLeft': SCALE_FACTOR_WITH_STR,

packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx

@@ -1,11 +1,5 @@
 import React, { forwardRef } from 'react';
-import {
-  NativeSyntheticEvent,
-  Platform,
-  TextInput as RNTextInput,
-  TextInputSelectionChangeEventData,
-  View,
-} from 'react-native';
+import { NativeSyntheticEvent, TextInput as RNTextInput, TextInputSelectionChangeEventData, View } from 'react-native';
 
 import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
@@ -27,6 +21,7 @@ interface EditInputProps extends ChannelInputProps {
 
 const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   {
+    style,
     text,
     onChangeText,
     messageToEdit,
@@ -81,7 +76,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           editable={!inputDisabled}
           autoFocus={autoFocus}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
@@ -112,13 +107,6 @@ const styles = createStyleSheet({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
   inputWrapper: {
     flexDirection: 'row',
   },

packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
@@ -38,6 +37,7 @@ interface SendInputProps extends ChannelInputProps {
 
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    style,
     VoiceMessageInput,
     MessageToReplyPreview,
     AttachmentsButton,
@@ -173,7 +173,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           onSelectionChange={onSelectionChange}
           editable={!inputDisabled}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={getPlaceholder()}
         >
           {mentionManager.textToMentionedComponents(
@@ -284,13 +284,6 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
   sendIcon: {
     marginLeft: 4,
     padding: 4,

packages/uikit-react-native/src/components/ChannelInput/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -39,6 +39,9 @@ export type SuggestedMentionListProps = {
 };
 
 export type ChannelInputProps = {
+  // style
+  style?: StyleProp<TextStyle>;
+
   // default
   channel: SendbirdBaseChannel;
   shouldRenderInput: boolean;
@@ -85,7 +88,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
   const { top, left, right, bottom } = useSafeAreaInsets();
-  const { colors } = useUIKitTheme();
+  const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
   const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
@@ -98,11 +101,18 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const mentionAvailable =
     sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
-
   const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
+  const fontStyle = useMemo(() => {
+    if (!typography.body3.fontSize) return typography.body3;
+    // NOTE: iOS does not support textAlignVertical, so we should adjust lineHeight to center the text in multiline TextInput.
+    return { ...typography.body3, lineHeight: typography.body3.fontSize * 1.275, textAlignVertical: 'center' };
+  }, [typography.body3.fontSize]);
+
+  const textInputStyle = StyleSheet.flatten([styles.input, fontStyle, props.style]);
+
   useTypingTrigger(text, channel);
   useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
@@ -138,6 +148,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 VoiceMessageInput={props.VoiceMessageInput ?? VoiceMessageInput}
                 AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
                 MessageToReplyPreview={props.MessageToReplyPreview ?? MessageToReplyPreview}
+                style={textInputStyle}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (
@@ -152,6 +163,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 mentionedUsers={mentionedUsers}
                 messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
+                style={textInputStyle}
               />
             )}
           </View>
@@ -211,6 +223,17 @@ const styles = createStyleSheet({
   inputDefault: {
     height: 56,
   },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    borderRadius: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    minHeight: 36,
+    // Android - padding area is hidden
+    // iOS - padding area is visible
+    maxHeight: Platform.select({ ios: 36 * 2 + 16, android: 36 * 2 }),
+  },
 });
 
 export default React.memo(ChannelInput);

sample/src/screens/SignInScreen.tsx

@@ -97,8 +97,8 @@ const styles = StyleSheet.create({
     width: '100%',
     borderRadius: 4,
     marginBottom: 32,
-    paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingTop: 16,
+    paddingBottom: 16,
   },
 });