Установка

https://expo.dev

https://www.nativewind.dev

Установка

npx create-expo-app my-app

или создаем папку и в ней запускаем установку, в конце ставим точку

npx create-expo-app .
yarn

Устанавливаем XCode Simulator

Установка NativeWind

yarn add nativewind
yarn add --dev tailwindcss

npx tailwindcss init

./tailwind.config.js

module.exports = {
- content: [],
+ content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Babel plugin

./babel.config.js

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

APP.JS

./App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';

export default function App() {
  return (
-   <View style={styles.container}>
+   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Если не работает!

После установки возможно появление надписи process(.css) для этого нужно установить более старую версию TailwindCSS

yarn add --dev tailwindcss@3.3.2

Запускаем

yarn start

Для запуска симулятора нажимаем i на клавиатуре

i

Для запуска на Iphone, установите прилодение - Expo

Если не запускается XCode

npx expo start -c --ios

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer