Gluestack UI v4 - Component Patterns

This sub-skill focuses on component usage, compound component patterns, icon handling, and provider setup for gluestack-ui v4.

Rule 1: Gluestack Components Over React Native Primitives

Always use Gluestack components instead of direct React Native imports:

React Native	Gluestack Equivalent
View from "react-native"	Box from "@/components/ui/box"
Text from "react-native"	Text from "@/components/ui/text"
TouchableOpacity from "react-native"	Pressable from "@/components/ui/pressable"
ScrollView from "react-native"	ScrollView from "@/components/ui/scroll-view"
Image from "react-native"	Image from "@/components/ui/image"
TextInput from "react-native"	Input, InputField from "@/components/ui/input"
FlatList from "react-native"	FlatList from "@/components/ui/flat-list"