Pular para o conteúdo principal

Novo endereço

Fala galera, beleza? Esse blog aqui ja ta parado a muito tempo, se você quer mais conteúdo tech basta ir para  https://tuliocalil.com.br/ . 

Estilizar o Picker no React Native no Android

React Native Logo

Uma duvida que algumas pessoas tem durante o desenvolvimento com React Native no Android, você passa as configurações no style, no itemStyle, porém não altera em nada no Android, que tal então descobrirmos por que e o como fazer para alterar ?

Diversos componentes do React Native tem comportamentos e estilizações diferentes entre o Ios e Android, e esta é a resposta mais curta. Se formos até a documentação do Picker vamos perceber que algumas propriedades são validas apenas para um OS, e no itemStyle podemos ver que é uma prop exclusiva do iOS (RN 0.61 <):

Mas por que ? 
Nativamente, no Android, a estilização do Picker acontece pelo arquivo styles.xml, declarando estilos para o Spinner, SpinnerItem e SpinnerDropDownItem e não diretamente no Widget, como acontece com outros componentes, e por isso o React Native não é capaz de modificar essas props da forma "tradicional".

Logo, teremos que alterar este arquivo diretamente, então vamos lá!
Navegue até: <seu projeto>/android/app/src/main/res/values/styles.xml, você verá algo similar a isto:

Caso não tenha familiaridade com os estilos nativos do Android, pode consultar a documentação oficial.
Aqui vou dar um exemplo de estilo, para modificar as propriedades do item selecionado:
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textSize">13dp</item>
        <item name="android:android:paddingLeft">5dp</item>
    </style>
Para alterar as propriedades do Drop Down que é aberto quando clica:
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textSize">18dp</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:gravity">center</item>
    </style>
E para que os estilos sejam aplicados ao Spinner, precisamos vincular ao tema, então dentro do estilo "AppTheme", adicione:
(lembrando que, o name passado anteriormente nos styles serve como um id, onde vamos referenciar ele logo abaixo, quando fazemos @styles/<o name definido nos styles>)
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>

Ficando assim:
E o resultado:

Então é isso, componente estilizado! 
Boa sorte e até a próxima!

Comentários

Postagens mais visitadas deste blog

Documentando APIs Rest - Swagger, OpenApi e Insomnia

Acredito que seja "batido" dizer que documentação é uma boa prática e deveria ser um pré-requisito nos projetos(as vezes até é, só não é implementado).

3 Kits de Interface para React Native - Ui Kits 2020

Já aconteceu de você precisar desenvolver um app em pouco tempo ou mesmo não ser muito bom na interface e acabar travando por isso? E que tal acelerar ainda mais o desenvolvimento de seus apps no React Native com componentes prontos, já estilizados e muito bonitos ? Então aqui vai os 3 kits de interface (ui kits) para você arrasar no prazo e no desgin dos seus apps! NativeBase O Ui kit que mais uso é o native base, como o nome sugere, ele consegue entregar uma interface com "estilização nativa" para o android e ios.  É um kit muito completo, robusto e simples de usar. Além de ser muito bonito ele conta com uma ferramenta incrível de temas ( similar ao do styled components ), para você personalizar as cores, fontes e tamanhos direto nesse app web aqui. Alguns componentes desse kit; Botões Cards Ui Kitten   Esse é um kit bem legal, baseado no Eva Design System , tem uns recursos bem legais pra estilização e tema, que...