Text overflows right margin when links are added.

[narnett]

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.",

[narnett]

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]

@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)