How to apply expo react-native custom font to the entire container

Question

I tried to load a custom font for my react-native app that i'm developing with expo but i don't know how to load a font in a simplier way for the whole screen container.

Currently i used the offical expo doc: Expo Custom Font Documentation

They said to use a Font.loadAsync() function and then use the this.state.fontLoaded? like this:

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  {
    this.state.fontLoaded ? (
      <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
        Hello, world!
      </Text>
    ) : null
  }
</View>

but did it exist a solution for applying the font on a container for example? I think it's not easy to e forced to surround EACH Text elements with the same function...

Currently the font is loading on ONE text element, but i would like to be able to easily use my font on a container, or many Text elements at once.

Here is my code:

    state = {
        fontLoaded: false,
    };

    async componentDidMount() {
        await Font.loadAsync({
            'ubuntu-medium': require('../assets/fonts/Ubuntu-Medium.ttf'),
        });
        this.setState({ fontLoaded: true });
    }
    render() {
        return (
            <View style={styles.main_container}>

                <View style={styles.inner_main_container}>

                    <View style={styles.top_links_container}>
                        <View style={styles.profile_and_arrow_container}>
                            <Icon
                                name='arrow-back'
                                color='white'
                                style={styles.icon} />
                            {
                                this.state.fontLoaded ? (
                                    <Text style={styles.top_links_profile}>Profil</Text>
                                ) : null
                            }
                        </View>
                        <View style={styles.profile_edit_container}>
                            <Text style={styles.top_links_edit}>Editer</Text>
                        </View>
                    </View>
                    <View style={styles.profile_avatar_container}>
                        <Avatar
                            rounded
                            size='xlarge'
                            source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}>
                        </Avatar>
                    </View>
                    <View style={styles.profile_infos_container}>
                        {
                            this.state.fontLoaded ? (
                                <Text style={styles.user_name}> Dupont Jean </Text>
                            ) : null
                        }
                        <Text style={styles.user_title}> CSD - Product Owner </Text>
                    </View>
                    <View style={styles.subprofile_infos_container}>

                        <View style={styles.user_experience}>
                            <Text>Experience </Text>
                            <Text style={styles.user_experience_years}> 7ans</Text>
                        </View>

                        <View style={styles.user_grade}>
                            <Text>Grade </Text>
                            <Text style={styles.user_grade_letter}> D </Text>
                        </View>
                    </View>
                    <View numberOfLines={6}>
                        <Text style={styles.user_bio}> Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry. Lorem Ipsum has been the industry's standard…</Text>
                    </View>
                    <View>
                        <Text style={styles.user_bio_see_more_link}> Voir plus</Text>
                    </View>
                    <Divider style={styles.divider} />
                    <View style={styles.bottom_container}>
                        <View style={styles.bottom_cm_text_info_container}>
                            <Text style={styles.bottom_cm_text_info}>Carrière Manager d'Evelyne</Text>
                            <Text style={styles.bottom_cm_text_user_name}>Jerôme Durand</Text>
                        </View>
                        <View style={styles.bottom_cm_avatar}>
                            <Avatar
                                rounded
                                size='small'
                                source={{ uri: 'https://randomuser.me/api/portraits/men/27.jpg' }}
                            />
                            <Icon
                                name='right'
                                type='antdesign'
                                color='grey'
                                onPress={() => console.log('hello button cm view')}
                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

Answer 1

Finally i found a nicely working solution.

I had to create a custom component like this one:

1. Create a custom component TextCustom.js for example and put this into:

import React from 'react'
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native'
import * as Font from 'expo-font'

export default class TextCustom extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            loading: true,
        }
    }

    async componentWillMount() {
        await Font.loadAsync({
            'Ubuntu': require('./../assets/fonts/Ubuntu-Medium.ttf')
        })
        this.setState({ loading: false })
    }

    render() {
        if (this.state.loading) {
            return <ActivityIndicator/>
        }
            return (
                <View>
                    <Text style={[styles.defaultStyle, this.props.style]}>
                        {this.props.children}
                    </Text>
                </View>
            )
    }
}

const styles = StyleSheet.create({
    defaultStyle: {
        fontFamily: 'Ubuntu'
    },
})

Don't forget to import Font from Expo (for people using Expo)

2. in the component you want to use the custom font, simply import and use the newly created component:

import TextCustom from './TextCustom'
import TextBoldCustom from './TextBoldCustom'  (if you want to use a Bold or italic font)

and use it:

<View>
    <TextCustom style={styles.info_welcome}>Bonjour</TextCustom>
</View>