1

I've been trying to make a function in my React Native app which outputs a paragraph with a dropcap. Here's the code I'm using:

export function returnFirstParagraph(contentRef) {
 return (
  <View>
      <View style={{ flex: 1, flexDirection: 'row', marginTop: 40, marginBottom: 10 }}>
        <Text style={{ fontSize: 16, lineHeight: 28, alignSelf: 'flex-start' }}>
          <Text style={{ fontSize: 40, lineHeight: 28, }}>
            {contentRef.charAt(0)}
          </Text>
            {contentRef.slice(1)}
        </Text>
      </View>
   </View>
  );
}

contentRef is simply a string which is passed from another file and contains the relevant text.

Here is the iOS output: iOS output

And here's the Android version: Android output

As you can see, the iOS version cuts off the top of the first line, adds padding/margin under the first line and doesn't look right. The Android version, meanwhile, is being output as I would expect.

Can anyone suggest why this is happening?

Edit: It was suggested to remove the lineHeight from the code. This has changed things, but not solved the problem:

iOS: iOS no line spacing

Android: android no line spacing

Sternjobname
  • 740
  • 1
  • 10
  • 23

1 Answers1

0

The problem is with the lineHeight value. Remove that and try as below

<View style={{ flexDirection: 'row', marginTop: 40, marginBottom: 10 }}>
    <Text style={{ fontSize: 16, padding: 20 }}>
      <Text style={{ fontSize: 40}}>
        {contentRef.charAt(0)}
      </Text>
      <Text style={{ lineHeight: 28}}>
        {contentRef.slice(1)}
      </Text>
    </Text>
  </View>
arjun
  • 3,514
  • 4
  • 27
  • 48
  • That makes a difference, but in iOS there is still a larger space under the first line than the rest of the spacing. Also, the UI requires the line spacing as the paragraph line spacing is meant to have a decent amount of vertical white space between it. The Android version then adds a tonne of spacing - I've updated my original question to show this – Sternjobname May 17 '17 at 10:43
  • set padding to top `` and check if it works – arjun May 17 '17 at 11:05
  • Sadly not - the padding just appears around the text element as a block and doesn't affect the line spacing in any way. – Sternjobname May 17 '17 at 12:43