search

juiceo / react-native-easy-markdown

Simple & customizable React Native component to render Github-flavoured markdown using minimal native components.
https://www.npmjs.com/package/react-native-easy-markdown
65 stars 62 forks source link

Text overflows right margin when links are added. #7

Open narnett opened 6 years ago

narnett commented 6 years ago

When I add a link to wrapped text, the text overflows the margin and is cut off. Note that the bullet and text are also no longer aligned, which is not as severe an issue. Maybe related - I also had to add a maxWidth style to the containing View in order to keep small amounts of listItem text from being cut off, regardness of whether or not a link was included.

E.g., the following markDown source results in the screenshot (using the Genymotion emulator on Windows 10).

"+ [**Body scan**](http://www.healthforthewholeself.com/2010/11/my-favorite-relaxation-technique-the-body-scan-meditation/) – toes to head, noticing sensations.",

image

narnett commented 6 years ago

FYI, I've tried dozens of style combinations to try and solve this - no luck. My work-around is to put links on a line by themselves.

juiceo commented 6 years ago

@narnett sorry for a bit of a late response, have been super busy with other things lately.

Anyhoo, have you tried playing around with the flexWrap style property, or adding a flex: 1 to the text element that is overflowing? Text wrapping is sometimes a bit mysterious in RN, but that has occasionally fixed issues for me.

For the bullet alignment, it would be a matter of editing the following style property:

listItem: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginVertical: 5,
},

and setting alignItems: 'flex-start' (to align the bullet to the top of that list item)