Skip to content

Commit

Permalink
fix: adjust lineHeight of iOS TextInput
Browse files Browse the repository at this point in the history
  • Loading branch information
bang9 committed Nov 17, 2023
1 parent 4f12feb commit c9c253e
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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,
},
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -27,6 +21,7 @@ interface EditInputProps extends ChannelInputProps {

const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
{
style,
text,
onChangeText,
messageToEdit,
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -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',
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { forwardRef } from 'react';
import {
NativeSyntheticEvent,
Platform,
TextInput as RNTextInput,
TextInputSelectionChangeEventData,
TouchableOpacity,
Expand Down Expand Up @@ -38,6 +37,7 @@ interface SendInputProps extends ChannelInputProps {

const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
{
style,
VoiceMessageInput,
MessageToReplyPreview,
AttachmentsButton,
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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,
Expand Down
31 changes: 27 additions & 4 deletions packages/uikit-react-native/src/components/ChannelInput/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -39,6 +39,9 @@ export type SuggestedMentionListProps = {
};

export type ChannelInputProps = {
// style
style?: StyleProp<TextStyle>;

// default
channel: SendbirdBaseChannel;
shouldRenderInput: boolean;
Expand Down Expand Up @@ -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({
Expand All @@ -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);
Expand Down Expand Up @@ -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 && (
Expand All @@ -152,6 +163,7 @@ const ChannelInput = (props: ChannelInputProps) => {
mentionedUsers={mentionedUsers}
messageToEdit={messageToEdit}
setMessageToEdit={setMessageToEdit}
style={textInputStyle}
/>
)}
</View>
Expand Down Expand Up @@ -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);
4 changes: 2 additions & 2 deletions sample/src/screens/SignInScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ const styles = StyleSheet.create({
width: '100%',
borderRadius: 4,
marginBottom: 32,
paddingHorizontal: 16,
paddingVertical: 16,
paddingTop: 16,
paddingBottom: 16,
},
});

Expand Down

0 comments on commit c9c253e

Please sign in to comment.