Search code examples
react-nativeinputfont-familyreact-native-elements

How to set fontFamily for an input (react-native-elements) label?


fontFamily is not working at labelStyle attribute of an Input component from react-native-elements. What am I missing?

I am using react 16.8.6, react-native 0.60.4 and react-native-elements 1.1.0. I have been using this font family (Arciform) on my entire app and it has been working so far.

StyleSheet code - file definicoesBase

export const definicoesBase = {
    tamanhoFonteTextoComum : 16,
    alturaLinhaTextoComum : 22,
    fontFamilyTextoComum : 'Arciform',
    corFonteTextoCabecalho : "#fff",
    tamanhoFonteTextoCabelho: 20,
    corFonteTextoComum : "#212121",
    corFonteTextoAvaliacao : "#e7a74e",
    fontWeightCabecalho:"bold",
    backgroundGeral : "#fff",
    backgroundAnuncio : "#FFF",
    corBordaAnuncio : "#bdbdbd",
    corBarraSlider : "#bdbdbd",
    corBotaoSlider : "#0288d1",
    backgroundCabecalho : "#0288d1",
};

StyleSheet code - file StyleFaleConosco

import { StyleSheet } from "react-native";

import StyleBase, { definicoesBase } from "./StyleBase";

const StyleFaleConosco = StyleSheet.create({
...
    corpoText:{
        fontFamily: definicoesBase.fontFamilyTextoComum,
        fontSize: definicoesBase.tamanhoFonteTextoComum,
        color: definicoesBase.corFonteTextoComum,
        lineHeight: definicoesBase.alturaLinhaTextoComum
    },
...
});
export default StyleFaleConosco;

Input file code

import React, { Component } from "react";
import { ScrollView, Linking, Text, TouchableOpacity, View, BackHandler } from "react-native";
import { Input, Icon } from "react-native-elements";
import StyleFaleConosco from "../../styles/StyleFaleConosco";
import { navigationOptions } from "../../styles/StyleBase";
export default class FaleConosco extends Component {
...
  render() {
    return (
...

  state = {
    titulo: "",
    descricao: ""
  };
...
            <Input
              label="Título"
              labelStyle={StyleFaleConosco.corpoText}
              onChangeText={titulo => this.setState({ titulo })}
            />
...
            <Input
              label="Descreva o seu problema/sugestão"
              onChangeText={descricao => this.setState({ descricao })}
              multiline={true}
              numberOfLines={4}
              containerStyle={{ width: '90%', }}
              labelStyle={StyleFaleConosco.corpoText}
              inputContainerStyle={{
                borderWidth: 1,
                borderRadius: 5,
              }}
            />
...

    );
  }
}

It keeps showing default fontFamily for those 2 labels instead of Arciform.


Solution

  • Set the fontWeight to 'normal':

     <Input
        labelStyle={{
            color: 'white',
            fontFamily: 'Montserrat-Light',
            fontWeight: 'normal'
        }}
        editable={false}
        autoCapitalize="none"
        autoCorrect={false}
        label="EMAIL ADDRESS"
      />