1. Nessa aula, nós começamos a juntar teoria e prática, para isso, nós vamos criar um projeto expo do 0, programando enquanto entendemos os conceitos apresentados. Para criar um novo projeto Expo podemos utilizar o comando npx create-expo-app e o template blank:

npx create-expo-app base-rn

1. Vamos tratar de dois conceitos importantes aqui no React Native, que é o Fast Refresh e StyleSheet, começando pelo Fast Refresh

2. O Fast Refresh é uma ferramenta que nos dá um feedback imediato das alterações da aplicação. Nós podemos vir no arquivo “App.js” e nele alteramos o texto que temos. Alterando esse texto, ao salvar o arquivo, podemos ver que no emulador foi modificado na mesma hora também.

3. Ele é utilizado para caso a gente queira dar um reload no app. Aqui no simulador, nós podemos dar “R + R”, e dará um reload no app. Ou, seguramos Ctrl + M, fazendo com que abra essa tela que temos opções de debug também, e virmos na opção de reload app. E ele vai ser reiniciado, isso é essencial quando fazemos alterações de estrutura no app, e você reinicia ele assim para baixar as alterações.

4. Para o seu celular, você com o app aberto, pode descer a barra de notificação e clicar no ícone de seta e também fará o reload. Como está sendo mostrado na tela.

5. Agora vamos falar sobre o StyleSheet. Ele é, de forma resumida, o jeito mais simples de estilizarmos nosso aplicativo no React Native. O StyleSheet trabalha de forma parecida com CSS usado na web, tendo muitas propriedades iguais, como para background, font, margin, padding, etc. Podemos ver através do código gerado pelo projeto padrão do Expo como o StyleSheet funciona:

   Obs.: repare que, por não utilizarmos traços no javascript usamos o padrão camelCase, e não o kebab-case como no CSS.

// ...

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1. Os estilos no React Native são basicamente inline, podemos utilizar o atributo style em um componente e passar um objeto com estilos, mas para não deixar o código desorganizado utilizamos uma convenção, que é definir os estilos separadamente com o StyleSheet.create() e então utilizar o objeto resultante nos componentes:

<View style={styles.container}>

1. Vale destacar aqui as principais diferenças entre o CSS e a estilização do React Native:

   • camelCase no lugar de kebab-case (como mencionado anteriormente)
   • Dimensões fixas: no React Native não usamos unidades de medida como ‘px’ ou ‘rem’, pois todas as dimensões são calculadas com pixels fixos.
   • Dimensões percentuais: outra opção de dimensionar componentes é utilizando porcentagem, isso é feito através de strings com %, ou seja, algo como ”50%”
   • Flex: no React Native também podemos utilizar o algoritmo Flexbox para montar os layouts, tendo acesso a propriedades como flex, flexDirection, alignItems, justifyContent, etc.

2. Essas são principais diferenças, para outros detalhes ou dúvidas você pode conferir a documentação do React Native em https://reactnative.dev/. Vamos agora experimentar um pouco com o StyleSheet criando nossos próprios estilos. Vamos mudar o componente <Text> para ter um tamanho e cor diferentes, e também mudar a cor de fundo da tela: