Vamos continuar, depois se a gente quiser a gente pode ensinar mais estilos, tá bom? Então a gente tem um e-mail e tem alguma coisa para digitar. Agora, a gente também vai ter outro para o password, né, para a senha. Primeiro, vamos ver o spinner aqui. Deixa aqui de lado por enquanto, tá bom? Depois a gente vê como vai acontecer um botão para o spinner. A gente vai fazer um negócio que você não sabe o spinner é. Você deixa estar fazendo uma busca. Esse negócio aqui, essa imagem de carregando, esse aqui, tá bom? Esse negócio que vai aparecer. A gente quer fazer isso em vez de mostrar somente a palavra carregando. Vamos lá. Vamos mudar o report react, from react. Tá bom? Vamos fazer com o spinner, eu defini props e exportar default spinner, né? A gente vai retornar o template. Mas o que a gente vai retornar? Vamos retornar o chamado activity indicator, tá bom? É um negócio de react native aqui, se você for activity, deixa eu clicar aqui get started. Activity indicator, esse componente aqui. Vai mostrar de carregando, tá bom? E um corte que você quiser olhar, mas o modo é activity indicator dentro do react native. Então vamos lá. Vamos colocar activity indicator. Você tem uma propriedade do tamanho, size, se quiser adicionar. Depende de você se você quiser adicionar com propriedade para o usuário poder selecionar o size ou não, tá bom? Deu. Se você quiser, pode pôr o size aqui, se não quiser, só põe assim, tá bom? Eu vou botar a sódia, só para aparecer. Então o size vai ser do props.size. Se for dado ou não, se não for dado, eu vou botar o padrão. Por padrão vai ser Lorde, tá bom? Esse aqui diz, se esse aqui for definido, use esse valor, se não use Lorde. Então vai ser dentro do props. Se quiser dar uma destruturada para não poder falar props.pode fazer. Então vamos ver lá isso. Esse size aqui é esse size aqui. Então você vai precisar importar esse cara do react native. Activity indicator. Do react native, tá bom? No maneiro que está aqui, esse cara pode parecer qualquer local. Não vai ter nenhum estilo assim de alinhado esquerdo e direito, alguma coisa. Mas se você quiser adicionar alinhamento, a gente pode botar um view aqui. Vamos para o view com o estilo spinner style, sei lá. Importa view do react native. E aqui define o estilo const style, style sheet, create. Passa um objeto, folha de estilos, spinner style. Se quiser dar um justify content, senta para centralizar o cara. Se não te justifica content, se o flex direct por padrão é column, esse cara vai alinhar verticalmente no centro. E para alinhar horizontalmente, você usa line items. E dá um flex zoom só de leve aqui. Vamos ver o que acontece. Vamos voltar aqui para o nosso login form para testar o componente. Vamos importar aqui port spinner, from common spinner. Use ele em algum local, sei lá, vou colocar aqui spinner. Não vou dar size, vai padrão ser default. O default vai ser o large, se não der com propriedade aqui. Vamos lá testar. Ah, style sheet não definido, esqueci de importar style sheet. Aqui, desculpa, style sheet do react native. Vamos lá. Está aí, aparece esse cara aqui, está vendo? Se não acho que está em cima dos re-re-re, não sei o que. Porque o flex, o outro cara não tem flex, então está dando um conflito aí. Mas está ok. Tudo cool. Isso que é o active indicator, só para indicar que está carregando. Está bom?