React Native IOS/Android style difference

Question

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:

And here's the Android version:

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:

Android:

Answer 1

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>