Skip to content

Commit

Permalink
feat: enableTailView option, by default its set to true,
Browse files Browse the repository at this point in the history
  • Loading branch information
lohenyumnam committed Mar 18, 2023
1 parent be4cea1 commit 7652068
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 1 deletion.
11 changes: 11 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,17 @@ export default function App() {
containerStyle={styles.textContainer}
enableOnPressToggle={false}
/>

<TruncatedTextView
text={DATA}
style={styles.textStyle}
tailTextStyle={styles.tailText}
numberOfLines={2}
enableShowLess={true}
containerStyle={styles.textContainer}
enableOnPressToggle={false}
enableTailView={false}
/>
</ScrollView>
</View>
</SafeAreaView>
Expand Down
10 changes: 9 additions & 1 deletion src/component/truncated_text_view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
enableLayoutAnimation = true,
collapsedText = '.. See more',
expandedText = '.. See Less',
enableTailView = true,
} = props;

const {
Expand Down Expand Up @@ -92,13 +93,20 @@ export const TruncatedTextView = (props: TruncatedTextViewProps) => {
}, [_numberOfLine, enableShowLess, isExpanded, numberOfLines]);

const _shouldShowTailView = useMemo(() => {
if (!enableTailView) return false;

if (numberOfLines === 0) return false;

return Platform.select({
ios: _shouldShowTailViewIOS,
android: _shouldShowTailViewAndroid,
});
}, [_shouldShowTailViewAndroid, _shouldShowTailViewIOS, numberOfLines]);
}, [
_shouldShowTailViewAndroid,
_shouldShowTailViewIOS,
enableTailView,
numberOfLines,
]);

// this will hide the text view if the text is empty
if (!fullText) return <View />;
Expand Down
5 changes: 5 additions & 0 deletions src/types/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ export type TruncatedTextViewProps = {
*/
enableShowLess?: boolean;

/**
* Whether to enable the See more & show less functionality, default value is true
*/
enableTailView?: boolean;

/**
* The tail text to be displayed when collapsed, default value is ".. See more"
*/
Expand Down

0 comments on commit 7652068

Please sign in to comment.