Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: numberOfLines control #69

Open
paolitaclo opened this issue Sep 5, 2019 · 5 comments
Open

Feature: numberOfLines control #69

paolitaclo opened this issue Sep 5, 2019 · 5 comments

Comments

@paolitaclo
Copy link

paolitaclo commented Sep 5, 2019

I'm using this library, and when passing the numberOfLines prop it works on IOS but it doesn't on Android. This is my code:

export const MessageTextParsed = ({
  children,
  messageTextColor,
  messageTextFontSize,
  messageTextOpacity,
  parseSettings,
  numberOfLines
}) => {
  return (
    <MessageText
      messageTextColor={messageTextColor}
      messageTextFontSize={messageTextFontSize}
      messageTextOpacity={messageTextOpacity}
      parse={parseSettings}
      childrenProps={{ allowFontScaling: false }}
      selectable
      numberOfLines={numberOfLines}
    >
      {children}
    </MessageText>
  );
};

const MessageText = styled(ParsedText)`
  color: ${({ messageTextColor }) => messageTextColor};
  font-family: OpenSans;
  font-size: ${({ messageTextFontSize }) => messageTextFontSize || 16};
  opacity: ${({ messageTextOpacity }) => messageTextOpacity || 1};
`;

and I'm implementing my component like this:

<MessageTextParsed
                  mentions={mentions}
                  messageTextColor={colors.primaryFontColor}
                  messageTextFontSize={14}
                  numberOfLines={2}
                >
                  {message.content}
</MessageTextParsed>
@sunny1105
Copy link

sunny1105 commented May 17, 2020

Any update on the above issue?
Not only numberOfLines but also another TextProp I am trying to use i.e. onTextLayout that is also not working for me.

@fbartho
Copy link
Contributor

fbartho commented Jun 11, 2020

@sunny1105 -- the way this library works is that it renders a different text component for every item you match.

That means that you can't easily limit it to a specific number of lines.

This also applies to other "complex" attributes on <Text like your onTextLayout function -- as I read the code, it will pass that method through to the children-text-components, but I don't know if it will do what you want it to.

Sorry for the bad news!

If somebody wants to add a feature for supporting numberOfLines and can figure out a way to do this, I'm working on a new release in #79

@fbartho fbartho changed the title numberOfLines is not working for Android Feature: numberOfLines control Jun 11, 2020
@fbartho
Copy link
Contributor

fbartho commented Jun 11, 2020

To elaborate, the fact that this works on iOS/not on android is a fluke. The relevant code is here:

return textExtraction.parse().map((props, index) => {
const { style: parentStyle } = this.props;
const { style, ...remainder } = props;
return (
<Text
key={`parsedText-${index}`}
style={[parentStyle, style]}
{...this.props.childrenProps}
{...remainder}
/>

That said, you may have success if you pass the numberOfLines prop to the childrenProps parameter!

@vijayst
Copy link

vijayst commented Aug 27, 2020

If i set numberOfLines in childrenProps, it does not seem to work. It works if I set it directly on the component.

@pierroo
Copy link

pierroo commented Feb 8, 2023

By any chance, was onTextLayout implemented or considered since? :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants