Merge pull request #54 from fawaz-ahmed/add-override-see-more-contain…

…er-style

add see more container overlap style

README.md

@@ -70,13 +70,12 @@ export default Home;
 | `wrapperStyle` | `object or array` | no | style for wrapper `View`
 | `numberOfLines` | `number` | no | defaults to `3`
 | `animate` | `bool` | no | defaults to `true` => applies a subtle animation to see more and see less text, not the complete text itself
-| `backgroundColor` | `string` | no | (removed in v2.1.0 and above) defaults to `white` => supply `backgroundColor` if your background color is something other than white
 | `customTextComponent` | `React component` | no | defaults to `Text`
 | `expandOnly` | `bool` | no | defaults to `false` => hide see less option similar to a linkedIn post
 | `onExpand` | `func` | no | optional callback executed when expanded
 | `onCollapse` | `func` | no | optional callback executed when collapsed
 | `onReady` | `func` | no | optional callback executed when see more placement measurements are completed
-| `preserveLinebreaks` | `bool` | no | (removed in v2.1.0 and above) defaults to `false` => preserves `\n` in the content while in the collapsed state. This prop is in experimental stage.
+| `seeMoreContainerStyleSecondary` | `object` | no | Incase of text overlap, pass { position: 'relative' } see [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/52)
 
 Any additional props are passed down to underlying `Text` component.
 

example/src/ReadMore.js

@@ -41,6 +41,7 @@ const ReadMore = ({
   seeMoreOverlapCount,
   debounceSeeMoreCalc,
   onReady,
+  seeMoreContainerStyleSecondary,
   ...restProps
 }) => {
   const [additionalProps, setAdditionalProps] = useState({});
@@ -585,7 +586,9 @@ const ReadMore = ({
       </TextComponent>
       {/* See more component */}
       {seeMore && collapsed && afterCollapsed && (
-        <View style={seeMoreContainerStyle} onLayout={onSeeMoreViewLayout}>
+        <View
+          style={[seeMoreContainerStyle, seeMoreContainerStyleSecondary]}
+          onLayout={onSeeMoreViewLayout}>
           {!hideEllipsis && (
             <TextComponent
               key={`${isMeasured}-${hideEllipsis}`}
@@ -692,6 +695,7 @@ ReadMore.propTypes = {
   onLayout: PropTypes.func,
   onTextLayout: PropTypes.func,
   onReady: PropTypes.func,
+  seeMoreContainerStyleSecondary: PropTypes.object,
 };
 
 ReadMore.defaultProps = {
@@ -716,6 +720,7 @@ ReadMore.defaultProps = {
     ios: undefined,
   }),
   onReady: () => {},
+  seeMoreContainerStyleSecondary: {},
 };
 
 export default memo(ReadMore);

index.d.ts

@@ -22,6 +22,7 @@ export interface ReadMoreProps {
     onLayout?: (event: LayoutChangeEvent) => void;
     onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
     onReady?: () => void;
+    seeMoreContainerStyleSecondary: StyleProp<ViewStyle>;
 }
 declare const ReadMore: React.FC<ReadMoreProps>;
 export default ReadMore;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fawazahmed/react-native-read-more",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.",
   "main": "index.js",
   "types": "index.d.ts",