diff --git a/packages/uikit-react-native-foundation/src/components/TextInput/index.tsx b/packages/uikit-react-native-foundation/src/components/TextInput/index.tsx index 2c7a7d998..05a4bca8c 100644 --- a/packages/uikit-react-native-foundation/src/components/TextInput/index.tsx +++ b/packages/uikit-react-native-foundation/src/components/TextInput/index.tsx @@ -15,6 +15,10 @@ const TextInput = React.forwardRef(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 ( (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(function TextInput( const styles = createStyleSheet({ input: { - paddingVertical: 8, - paddingHorizontal: 16, + includeFontPadding: false, + paddingTop: 8, + paddingBottom: 8, + paddingLeft: 16, + paddingRight: 16, }, }); diff --git a/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts b/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts index cf03c1e8c..da6eef585 100644 --- a/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts +++ b/packages/uikit-react-native-foundation/src/styles/createStyleSheet.ts @@ -18,11 +18,15 @@ const preProcessor: Partial = { '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, diff --git a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx index 4632546fa..92d64f054 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx +++ b/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(function EditInput( { + style, text, onChangeText, messageToEdit, @@ -81,7 +76,7 @@ const EditInput = forwardRef(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', }, diff --git a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx index 19cd66d67..c64ef13dd 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx +++ b/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(function SendInput( { + style, VoiceMessageInput, MessageToReplyPreview, AttachmentsButton, @@ -173,7 +173,7 @@ const SendInput = forwardRef(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, diff --git a/packages/uikit-react-native/src/components/ChannelInput/index.tsx b/packages/uikit-react-native/src/components/ChannelInput/index.tsx index dcb05a4d1..d0f96366b 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/index.tsx +++ b/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; + // 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} /> )} @@ -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); diff --git a/sample/src/screens/SignInScreen.tsx b/sample/src/screens/SignInScreen.tsx index ad7025681..be44bd01f 100644 --- a/sample/src/screens/SignInScreen.tsx +++ b/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, }, });