diff --git a/packages/react-native-web-examples/pages/text-input/index.js b/packages/react-native-web-examples/pages/text-input/index.js index bf9c0696..256a01ca 100644 --- a/packages/react-native-web-examples/pages/text-input/index.js +++ b/packages/react-native-web-examples/pages/text-input/index.js @@ -75,6 +75,11 @@ export default function TextInputPage() { rows={3} style={styles.multiline} /> + ); diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js index 6651b739..56c2cd45 100644 --- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js @@ -105,6 +105,14 @@ describe('components/TextInput', () => { }); }); + describe('prop "caretHidden"', () => { + test('value "true"', () => { + const { container } = render(); + const style = window.getComputedStyle(container.firstChild); + expect(style.caretColor).toEqual('transparent'); + }); + }); + describe('prop "clearTextOnFocus"', () => { const defaultValue = 'defaultValue'; diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index a5795513..5cfd6bad 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -99,6 +99,7 @@ const TextInput: React.AbstractComponent< autoCompleteType, autoCorrect = true, blurOnSubmit, + caretHidden, clearTextOnFocus, dir, editable, @@ -402,7 +403,8 @@ const TextInput: React.AbstractComponent< { '--placeholderTextColor': placeholderTextColor }, styles.textinput$raw, styles.placeholder, - props.style + props.style, + caretHidden && styles.caretHidden ]; supportedProps.type = multiline ? undefined : type; @@ -448,6 +450,9 @@ const styles = StyleSheet.create({ }, placeholder: { placeholderTextColor: 'var(--placeholderTextColor)' + }, + caretHidden: { + caretColor: 'transparent' } }); diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js index a842a355..5e879d8d 100644 --- a/packages/react-native-web/src/exports/TextInput/types.js +++ b/packages/react-native-web/src/exports/TextInput/types.js @@ -25,6 +25,7 @@ export type TextInputProps = { autoCorrect?: ?boolean, autoFocus?: ?boolean, blurOnSubmit?: ?boolean, + caretHidden?: ?boolean, clearTextOnFocus?: ?boolean, defaultValue?: ?string, dir?: ?('auto' | 'ltr' | 'rtl'),