React Native con Expo: Guida base e styling con Tailwind (NativeWind)

Introduzione pratica a React Native con Expo e styling avanzato mediante Tailwind (NativeWind) per lo sviluppo di app mobile.

Preparazione dell'Ambiente

Installazione di Node.js e npm - Assicurati di avere Node.js e npm installati. Puoi scaricarli da nodejs.org.

Possiamo usufruire di due installer per creare il progetto base della nostra app in questo caso:

Expo CLI
Comando npx create-expo-app

Terminal

// Alternativa expo-cli

npm install -g expo-cli
expo init NomeProgetto

Noi procederemo con il comando npx create-expo-app che ne facilita l'installazione. Aggiungeremo "--template expo-template-blank-typescript" per assicurarci il supporto di Typescript all'interno del nostro progetto.

Terminal

npx create-expo-app NomeProgetto --template expo-template-blank-typescript
cd NomeProgetto

Una volta lanciato il comando npx e successivamente aver navigato all'interno della directory corretta, procediamo installando le dipendenze necessarie.

Installazione delle dipendenze di navigazione di React Native (React Navigation)

Terminal

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

Installazione di NativeWind (Tailwind)

Terminal

npm install nativewind

Sarà fondamentale, configurare Babel con il supporto al plugin di NativeWind.

JavaScript

// babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [['nativewind/babel', { mode: 'compileOnly' }]],
  };
};

Una volta effettuati questi passaggi, possiamo procedere nella creazione della struttura del nostro progetto.

Struttura del Progetto

Organizziamo il codice in file distinti:

App.tsx: Punto di ingresso che configura il navigatore.
src/navigation/stack-navigator.tsx: Gestisce la navigazione tra le schermate.
src/screens/home-screen.tsx e src/screens/detail-artcode-screen.tsx: Definiscono le schermate dell'app.

JavaScript

// src/screens/home-screen.tsx

import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { withExpoSnack } from 'nativewind';
import { styled } from 'nativewind';

/* Utilizziamo styled da NativeWind per creare versioni stilizzate dei componenti nativi. 
Questo metodo converte classi Tailwind in stili React Native. */
const StyledView = styled(View)
const StyledText = styled(Text)
const StyledTouchableOpacity = styled(TouchableOpacity)

export const HomeScreen = () => {

  // useNavigation da @react-navigation/native permette di gestire la navigazione tra le schermate
  const navigation = useNavigation();
  
  return (
    <StyledView className="p-4 items-center justify-center flex-1">
      {/* StyledView è il contenitore principale che usa classi Tailwind per padding e allineamento. */}

      <StyledText className="text-xl">Benvenuti nella Home</StyledText>
      <StyledText className="text-m">artCode ti da il benvenuto!</StyledText>

      {/* StyledTouchableOpacity funge da bottone con uno stile definito e utilizza la funzione OnPress per la navigazione */}
      <StyledTouchableOpacity
        className="bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded-lg shadow-lg border border-blue-700 mt-4"
        onPress={() => navigation.navigate("Details")}
      >
        <StyledText className="text-white text-lg">Vai alla Pagina dettaglio</StyledText>
      </StyledTouchableOpacity>
    </StyledView>
  );
}

// withExpoSnack è un HOC (Higher Order Component) di NativeWind che garantisce il corretto funzionamento dell'applicazione in Expo Snack.
export default withExpoSnack(HomeScreen);

JavaScript

// src/screens/detail-artcode-screen.tsx

import { View, Text } from 'react-native';

import { withExpoSnack } from 'nativewind';
import { styled } from 'nativewind';

const StyledView = styled(View)
const StyledText = styled(Text)

export const DetailArtCodeScreen = () => {
  return (
    <StyledView className="p-4 items-center justify-center flex-1">
      <StyledText className="text-xl">Ciao da artCode</StyledText>
      <StyledText className="text-m">Pagina di dettaglio!</StyledText>
    </StyledView>
  );
}

export default withExpoSnack(DetailArtCodeScreen);

JavaScript

// src/navigation/stack-navigator.tsx

import { createNativeStackNavigator } from '@react-navigation/native-stack';

// Screens
import { HomeScreen } from '../screens/home-screen';
import { DetailArtCodeScreen } from '../screens/detail-artcode-screen';

const Stack = createNativeStackNavigator();

export const StackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailArtCodeScreen} />
    </Stack.Navigator>
  );
}
export default StackNavigator;

Infine, procediamo con la configurazione del file App.tsx nel nostro progetto.

JavaScript

// App.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './src/navigation/stack-navigator';

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

Una volta che hai configurato i componenti nel tuo progetto, ecco come puoi procedere attraverso l'uso degli emulatori come Xcode/iOS:

Avvio dell'applicazione

Terminal

npm start / npm run ios / npm run android

Avviata l'app, ti troverai all'interno di una schermata molto simile a quella di seguito (Home Screen). Inoltre, cliccando sul button "StyledTouchableOpacity", allo scatenarsi della funzione all'onPress, verrà effettuata la navigazione alla screen dettagli!

Attraverso questa guida, abbiamo esplorato come configurare un'applicazione React Native con Expo e NativeWind, integrando elegantemente Tailwind CSS. Questo strumento offre un'ampia gamma di possibilità per personalizzare e ottimizzare l'interfaccia utente. Pensa alle applicazioni che puoi sviluppare e ai problemi che puoi risolvere.

React Native, tramite Expo e NativeWind, hanno reso sicuramente più accessibile e meno complesso lo sviluppo di applicazioni mobile. Con questi strumenti, puoi facilmente portare le tue idee creative in vita.

E tu? Quali nuove funzionalità ti piacerebbe esplorare?

React Native con Expo: Guida base e styling con Tailwind (NativeWind)

Preparazione dell'Ambiente

Installazione delle dipendenze di navigazione di React Native (React Navigation)

Installazione di NativeWind (Tailwind)

Avvio dell'applicazione

Siamo anche qui!