React Native: 2025 Apps Reais, React/Expo do Zero ao Hero!

Suporte técnico (WhatsApp) 62 9 9857-9084

Suporte técnico (WhatsApp) 62 9 9857-9084

Suporte técnico (WhatsApp) 62 9 9857-9084

Chame no WhatsApp

Contato para alunos ou suporte 62 9 9857-9084

Atenção o código da aula está em arquivo zip em baixo:

Qualquer dúvida suporte.

Suporte técnico (WhatsApp) 62 9 9857-9084

Atenção o código da aula está em arquivo zip em baixo:

Qualquer dúvida suporte.

Suporte técnico (WhatsApp) 62 9 9857-9084

Link para download

https://github.com/srodrigo28/expo-tailwind

Todos nossos arquivos de configuração.

** 0. criando o projeto

npx create-expo-app@latest --template

** 1. instalando dependência do tailwind

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

** 2. Setup tailwind

npx tailwindcss init

** 3. babel.config.js

module.exports = function (api) {

    api.cache(true);

    return {

      presets: [

        ["babel-preset-expo", { jsxImportSource: "nativewind" }],

        "nativewind/babel",

      ],

    };

  };

** 4. metro.config.js

const { getDefaultConfig } = require("expo/metro-config");

const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./src/styles/global.css" });

** 5. nativewind-env.d.ts

/// <reference types="nativewind/types" />

tailwind.config.js

     /** @type {import('tailwindcss').Config} */

     module.exports = {

      content: ["./src/**/*.{js,jsx,ts,tsx}"],

      presets: [require("nativewind/preset")],

      theme: {

          extend: {},

      },

      plugins: [],

  }

**** Criandos  arquivos do projeto ****

** 6° Crie o arquivo: src/app/_layout.tsx

  import '../styles/global.css'

  import { Slot } from 'expo-router'

  export default function Layout(){

    return <Slot />

  }

** 7° Crie o arquivo: src/app/styles/global.css

@tailwind base;

@tailwind components;

@tailwind utilities;

** 8° Crie o arquivo: src/app/index.tsx

import { View, Text } from "react-native"

export default function Index(){

    return(

        <View className="h-screen bg-black flex items-center justify-center">

            <Text className="text-white text-3xl">Hello World Native Wind</Text>

        </View>

    )  

}