react-native-design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
How to use
Zainstaluj skill w swoim projekcie agenta, upewniając się że masz dostęp do repozytorium wshobson/agents.
Zaimportuj StyleSheet z biblioteki React Native i zdefiniuj style dla swoich komponentów, grupując je w obiekcie utworzonym za pomocą StyleSheet.create() — to zapewnia optymalizację wydajności.
Gdy budujesz komponenty, łącz style dynamicznie używając tablicy stylów, aby obsługiwać warianty (primary, secondary) i stany (disabled, active) — skill pokaże Ci jak stosować warunkowe style.
Dla nawigacji między ekranami użyj React Navigation 6+, definiując stosy nawigacyjne (stack navigators) i konfigurując przejścia między ekranami zgodnie z wytycznymi platformy.
Gdy potrzebujesz animacji, zastosuj Reanimated 3 do tworzenia płynnych przejść i transformacji — skill obejmuje wzorce dla animacji opartych na gestach i wartościach współdzielonych.
Testuj layout na różnych rozmiarach ekranu i platformach, używając flex-boxa i responsywnych jednostek, aby zapewnić spójny wygląd na iOS i Android.