diff --git a/example/src/App.tsx b/example/src/App.tsx index 6727af133..390b258a2 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -74,8 +74,10 @@ import PinInputExample from "./PinInputExample"; import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample"; import ThemeExample from "./ThemeExample"; import LoadingIndicatorExample from "./LoadingIndicatorExample"; +import SelectableTextExample from "./SelectableTextExample"; const ROUTES = { + SelectableText: SelectableTextExample, LoadingIndicator: LoadingIndicatorExample, Theme: ThemeExample, AudioPlayer: AudioPlayerExample, diff --git a/example/src/SelectableTextExample.tsx b/example/src/SelectableTextExample.tsx new file mode 100644 index 000000000..93b8b12da --- /dev/null +++ b/example/src/SelectableTextExample.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SelectableText, withTheme } from "@draftbit/ui"; +import Section, { Container } from "./Section"; + +const SelectableTextExample: React.FC = () => { + return ( + +
+ +
+
+ +
+
+ ); +}; + +export default withTheme(SelectableTextExample); diff --git a/packages/core/src/components/SelectableText.tsx b/packages/core/src/components/SelectableText.tsx new file mode 100644 index 000000000..9aca3796c --- /dev/null +++ b/packages/core/src/components/SelectableText.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { + Platform, + TextInput, + Text, + TextStyle, + I18nManager, + StyleSheet, + TextInputProps, + TextProps, + StyleProp, +} from "react-native"; + +type Props = { + style?: StyleProp; + text?: string; +} & (TextInputProps | TextProps); + +const SelectableText: React.FC = ({ style, text, ...rest }) => { + const writingDirection: "auto" | "ltr" | "rtl" = I18nManager.isRTL + ? "rtl" + : "ltr"; + + const baseStyle = [styles.baseText, { writingDirection }, style]; + if (Platform.OS === "ios") { + return ( + + ); + } + return ( + + {text} + + ); +}; + +const styles = StyleSheet.create({ + baseText: { + textAlign: "left", + }, +}); + +export default SelectableText; diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index d520e40ae..1427e346a 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -80,6 +80,7 @@ export { default as SimpleStyleScrollView } from "./components/SimpleStyleScroll export { default as SimpleStyleSectionList } from "./components/SimpleStyleScrollables/SimpleStyleSectionList"; export { default as SimpleStyleSwipeableList } from "./components/SimpleStyleScrollables/SimpleStyleSwipeableList"; export { default as LoadingIndicator } from "./components/LoadingIndicator"; +export { default as SelectableText } from "./components/SelectableText"; /* Deprecated: Fix or Delete! */ export { default as AccordionItem } from "./deprecated-components/AccordionItem"; diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index cba761dd6..3af2cfd62 100644 --- a/packages/ui/src/index.tsx +++ b/packages/ui/src/index.tsx @@ -76,6 +76,7 @@ export { SimpleStyleSectionList, SimpleStyleSwipeableList, LoadingIndicator, + SelectableText, } from "@draftbit/core"; export {