diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index 8cf24067..c5bb3af8 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -25,3 +25,17 @@ exports[`components/Text nested 1`] = ` /> `; + +exports[`components/Text prop "selectable" value of false 1`] = ` +
+`; + +exports[`components/Text prop "selectable" value of true 1`] = ` +
+`; diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js index 4d7957d0..e95a0f80 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js @@ -21,5 +21,15 @@ describe('components/Text', () => { expect(container.firstChild).toMatchSnapshot(); }); - test('prop "numberOfLines"', () => {}); + describe('prop "selectable"', () => { + test('value of false', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + + test('value of true', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + }); }); diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js index d03c7aa3..cd8396e2 100644 --- a/packages/react-native-web/src/exports/Text/index.js +++ b/packages/react-native-web/src/exports/Text/index.js @@ -111,6 +111,7 @@ const Text = forwardRef((props, forwardedRef) => { const style = [ props.style, numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines }, + selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable ]; @@ -207,6 +208,9 @@ const styles = StyleSheet.create({ notSelectable: { userSelect: 'none' }, + selectable: { + userSelect: 'text' + }, pressable: { cursor: 'pointer' }