[X] I have confirmed that this bug has not been reported yet
Description
When using a custom font is used and applying line height property in the base styles, the first line of a paragraph tag does not respect that line height, issue is only present on Android, works as expected on IOS
React Native Information
"react": "18.1.0",
6.3.4"react-native": "0.70.5",
RNRH Version
6.3.4
Tested Platforms
[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows
Reproduction Platforms
[X] Android
[ ] iOS
[ ] Web
[ ] MacOS
[ ] Windows
Minimal, Reproducible Example
import React from 'react'
import { useWindowDimensions } from 'react-native'
import RenderHtml, { defaultSystemFonts } from 'react-native-render-html'
import { useFonts, Arimo_400Regular } from '@expo-google-fonts/arimo'
import { SafeAreaView } from 'react-native'
const source = {
html: `
<p>
Sed sit amet tempus nisl. Etiam eget maximus dui. Pellentesque ut est non diam facilisis tincidunt faucibus vel ex. Curabitur felis turpis, tincidunt nec imperdiet ac, tristique in leo. Praesent id odio porta, eleifend nulla sit amet, porta enim. Integer magna justo, venenatis aliquam sapien sit amet, tempus varius tortor. Morbi non gravida quam, vel blandit velit. Suspendisse a dolor maximus sapien consequat tincidunt. Aliquam sed lectus sed diam mollis luctus. Vivamus in orci sit amet odio placerat tincidunt nec ac lorem. Donec blandit et risus vulputate pretium. Integer eget condimentum metus. Nulla accumsan orci non ullamcorper gravida. Duis laoreet facilisis nibh, in sollicitudin neque vehicula ut. Donec auctor eu leo a vehicula. Sed magna ipsum, vestibulum sed leo id, pretium sollicitudin urna.
</p>`
}
function FontLoader({ children }) {
const [fontsLoaded] = useFonts({
arimo: Arimo_400Regular
})
if (!fontsLoaded) {
return null
}
return <>{children}</>
}
const fonts = ['arimo', ...defaultSystemFonts]
export default function App() {
const { width } = useWindowDimensions()
const fontFamily = 'arimo'
return (
<SafeAreaView>
<FontLoader>
<RenderHtml
systemFonts={fonts}
contentWidth={width}
source={source}
baseStyle={{ lineHeight: 20, fontSize: 16, fontFamily }}
/>
</FontLoader>
</SafeAreaView>
)
}
Additional Notes
This issue does not occur when using a system font.
Decision Table
<yyy>
is not rendered”Good Faith Declaration
Description
When using a custom font is used and applying line height property in the base styles, the first line of a paragraph tag does not respect that line height, issue is only present on Android, works as expected on IOS
React Native Information
RNRH Version
6.3.4
Tested Platforms
Reproduction Platforms
Minimal, Reproducible Example
Additional Notes
This issue does not occur when using a system font.