Crear un proyecto de react native:

npx create-expo-app .

npx expo start

Elementos básicos

Todo el texto debe ser renderizado dentro de un <Text>. Nunca podrás usar <h1>, <h2> o <p>.

El segundo elemento es el <View>, que es el componente que sirve para crear cualquier vista para interfaz. Es lo más parecido al <div>. Por defecto View se comporta como un contenedor con flexbox.

No tenemos Botones, tenemos elementos Touchable. En vez de usar onclick, usaremos onpress().

No podemos hacer que una View o Texto tenga onpress, pero podemos envolver estos elementos y ponerlos como hijos en un componente TouchableWithoutFeedback por ejemplo.

Estilizado básico

No podemos estilar con CSS en react native.

Por ello, se pueden usar la prop style de react.

<View style={{marginTop: Constants.statusBarHeight, flexGrow:1}}>...</View>

En el estilizado hemos utilizado constantes que se hacen realmente útiles, ya que cambian en función del dispositivo automáticamente.

Nota: Este estilizado no está bien. Es solo para explicar las constantes.

Renderizado de listas

Si renderizamos una lista muy larga de elementos, vermos que no hay un scroll automático.