iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
604 stars 172 forks source link

Uneven spacing between headings #238

Open JLucasGaldino opened 3 weeks ago

JLucasGaldino commented 3 weeks ago

I am building a prayer app for Orthodox Christians, and for that I must include pages with many paragraphs of text. For some reason, the spacing between headings and text varies almost arbitrarily.

imageOfApp

This is the relevant code:

const rules = {
    heading1: (node, children, parent, styles) =>
        <Text key={node.key} style={{textAlign: 'center', marginTop: 30, marginBottom: 20,}}>
            {children}
        </Text>
}

export default function ConfessionGuide() {
    const { language } = useLanguage()
    i18n.defaultLocale = "en";
    i18n.locale = language;
    return(
        <View style={styles.container}>
            <ScrollView style={styles.scrollView} horizontal={false}>
                <Markdown style={styles.markdown} rules={rules}>{i18n.t("prayerContent.eveningPrayersV2")}</Markdown>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    markdown: {
        body: {
            color: '#fff',
            fontSize: 18,
            textAlign: 'justify',
        },
        em: {
            color: '#999',
            fontSize: 18,
            fontStyle: 'normal',
            alignSelf: 'stretch',
            textAlign: 'justify',
        },
        strong: {
            fontWeight: '800',
        },
        textgroup: {
            textAlign: 'justify',
        },
        heading1: {
            fontSize: 25,
            fontWeight: '600',
            letterSpacing: 1.5,
        },
    },
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    scrollView: {
        flex: 1,
        paddingHorizontal: 40,
    },
});

And this is the relevant piece of the referred json file:

# Oração IV, de São Macário Egípcio

... poder da Tua preciosa Cruz, pelo amor de todos os Teus santos, guarda a minha pobre alma, ó Jesus Cristo, nosso Deus, pois Tu és santo e cheio de glória para sempre. Ámen.

# Oração V

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Senhor, nosso Deus, Tu que és bom e filantropo, perdoa os pecados que cometi hoje em palavras, atos e pensamentos. Concede-me um sono pacífico e imperturbável. Envia-me o Teu anjo da guarda para me proteger e me guardar de todo o mal. Pois Tu és o Guardião de nossas almas e dos nossos corpos, e a Ti damos glória, ao Pai ao Filho e ao Espírito Santo, agora e sempiternamente e pelos séculos dos séculos. Ámen.

# Oração VI

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Senhor nosso Deus, em quem cremos e cujo nome invocamos acima de qualquer outro, concede-nos, ...