1
resposta

Não consigo deixar o texto do botão do produtor em negrito

Boa noite!

Estou utilizando o componente que foi criado em aula no texto do botão, porém por algum motivo o texto do botão "Voltar ao produtor" não fica em negrito, enquanto o "Voltar a Home" fica ok.

Poderiam me ajudar?

Texto.js

import React from 'react';
import { Text, StyleSheet } from 'react-native';

export default function Texto({ children, style }) {
  let estilo = estilos.texto;

  if(style?.fontWeight === 'bold') {
    estilo = estilos.textoNegrito;
  }

  return <Text style={[style, estilo]}>{ children }</Text>
}

const estilos = StyleSheet.create({
  texto: {
    // fontFamily: 'MontserratRegular',
    fontWeight: 'normal',
  },
  textoNegrito: {
    // fontFamily: 'MontserratBold',
    fontWeight: 'bold',
  }
});

Botões

<TouchableOpacity
            style={estilos.botao}
            onPress={() => {
              navigation.navigate('HomeScreen');
            }}>
            <Texto style={estilos.textoBotao}>{botaoHomePedidoFeito}</Texto>
          </TouchableOpacity>
          <TouchableOpacity
            style={[estilos.botao, estilos.botaoProdutor]}
            onPress={() => {
              navigation.navigate('Produtor', produtor);
            }}>
            <Texto style={[estilos.textoBotao, estilos.textoBotaoProdutor]}>
              {botaoProdutorPedidoFeito}
            </Texto>
          </TouchableOpacity>

Estilos botões e textos

botao: {
    marginTop: 16,
    backgroundColor: '#2A9F85',
    paddingVertical: 16,
    borderRadius: 6,
  },
  textoBotao: {
    textAlign: 'center',
    fontWeight: 'bold',
    color: '#ffffff',
    fontSize: 16,
    lineHeight: 26,
  },
  botaoProdutor: {
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#ECECEC',
  },
  textoBotaoProdutor: {
    color: '#464646',
    fontWeight: 'bold',
  },

Obrigado.

1 resposta

Olá Daniel.

Ví que você está usando fonte personalizada. Caso esteja com problemas com problemas no Android recomendo colocar na fontFamily o nome igual ao arquivo da fonte que está salva no projeto. Também há a questão no Android do fontWeight ter que ser o correto para a fontFamily definida.

const estilos = StyleSheet.create({
  texto: {
    fontFamily: 'Montserrat-Regular', // o arquivo deve ter o mesmo nome que está declarando, se tiver hífen deve colocá-lo, camelcase também 
    fontWeight: 'normal', // você também pode testar as valores númericos do peso da fontes que são "100","200","300","400","500",600","700","800","900" (use as aspas simples ou duplas para os valore numéricos também)
  },
});

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software