-
Notifications
You must be signed in to change notification settings - Fork 82
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
Issue using <View> with renderLink #48
Comments
Definitely happy to see if there's something we can do to make this work as using more complex elements within the linked text output is definitely something that's come up before. Currently, Autolink wraps the entire output in a single Text component, which is why generally just outputting a View using renderLink is problematic. RN60 introduced some limited support for inline Views within Text, but it's still only partially supported as of RN 61. I just played around with it and while I could get a View to display nicely within the output, all the text within that View was invisible - not exactly ideal. I'd imagine support will improve though. Thinking about it, we could make the wrapping component a prop so that you can choose to have Autolink wrap the output in a View rather than Text. I'm struggling to figure out how to handle the style and other Text-related props which currently get passed through to that root Text node though. <Autolink
text="some text to link..."
component={View}
// this would work now
renderLink={(text) => <View><Text>{text}</Text></View>}
// not sure how to handle these without massive breaking changes
style={someStyles}
numberOfLines={2}
/> |
By default, Autolink will continue to behave as before: output will be wrapped in a single Text node and non-Autolink props will be passed through to that node. To allow for more customization, you can now specify a custom component, for example View, to use as the container instead of Text using the `component` prop. Any non-Autolink props will be passed through to this component instead, and all text within is wrapped with Text components as required by RN. Additionally, the new `linkProps` and `textProps` props allow you to pass any props to links or text components, respectively. And the new `renderText` prop allows you to completely customize how text is wrapped in the output. BREAKING CHANGE: Non-Autolink props are no longer passed to links. Only styles supplied to `linkStyle` and props supplied to `linkProps` are used when rendering links. You are still free to use `renderLink` to fully customize link rendering. closes #48
Just released v3.0.0 with support for customizing the container component via the To get you started, something like the following should now be possible: <Autolink
text={text}
component={View}
renderLink={(text, match, index) => <LinkPreviewComponent />}
// Might need to remove leading spaces after block elements
renderText={(text, index) => <Text>{text.trim()}</Text>
/> |
Thanks a lot @joshswan for this fast change. I'll try it right away. |
Hi there,
I am trying to create a newsfeed with automatic links previewing that would look like the following example from react-native-url-preview.
In order to detect URLs within the text of each posts, I am using this great autolink library. Then, �I hopped to use 'renderLink' prop to design and render the preview of the link.
However, there is a limitation from the library as renderLink can only return a Text component. So when I try to add a view to renderLink like the following:
renderLink={(text, match, index) => (<View><Text>{text}</Text></View)}
I get those funny file icons:
Would someone see anyway I could tackle this issue ?
Thanks for the help!
The text was updated successfully, but these errors were encountered: