Colocar uma variavel dentro do estilo CSS

Fala, Fernando ! Tudo certo ?

Tem uma maneira sim de passar uma variável para o CSS, essa técnica foi ensinada pela instrutora Natália no curso React Native: criando menu e navegando entre telas. Vou deixar o link do curso caso queira dar uma olhada.

Para fazer isso vamos criar uma função com o StyleSheet dentro dela, e para essa função vamos passar uma variável como parâmetro que queremos usar dentro do StyleSheet. Vou usar de exemplo o que a instrutora utilizou no curso, que é a seguinte:

const estilosFuncao = (grande) => StyleSheet.create({
    estrela: {
        width: grande ? 36 : 12,
        height: grande ? 36 : 12,
        marginRight: 2,
    }
});

Olhando o código acima, temos uma função que o nome é estilosFuncao, ela recebe como parâmetro uma variável chamada de "grande". A função vai retornar os objetos do StyleSheet com a variável sendo utilizado dentro deles. É um pouco confuso, mas essa é uma maneira de utilizar uma variável dentro dos nossos estilos.

Depois disso, vamos chamar essa função que criamos, no caso estilosFuncao, passando o parâmetro que ela tem que receber e armazenando o que ela irá retornar. Da seguinte forma:

export default function Estrela({grande}) {
    const estilos = estilosFuncao(grande);


    return (
    //código 

)
}

Depois disso, podemos apenas usar a variável estilos para referenciar os estilos que criamos. Da mesma forma que estamos acostumados a fazer. Então para utilizar esses estilos vamos fazer da seguinte forma:

export default function Estrela({grande}) {
    const estilos = estilosFuncao(grande);


    return ( <Image 
                     source={“link imagem”} 
                     style={estilos.estrela} /> )
   }

Eu espero que tenha ajudado e qualquer coisa estou por aqui.

Abraço