Nos termos do próprio skill
Este skill ensina padrões de estilização do React Native, React Navigation 6+ e Reanimated 3 para a construção de aplicações móveis multiplataforma. Ele aborda StyleSheet e styled-components para estilização, layouts responsivos para diferentes tamanhos de tela, designs específicos para iOS e Android, interações orientadas por gestos com o Gesture Handler, e técnicas de otimização de performance.
O skill foca na criação de experiências de usuário com qualidade nativa, com animações a 60fps executadas na UI thread, definições de tipo de navegação adequadas, e práticas de teste em dispositivos reais.
O que ele produz
- Componentes React Native com interfaces TypeScript, definições de StyleSheet e animações Reanimated
- Componentes animados usando Reanimated 3 com useSharedValue e useAnimatedStyle para performance de 60fps
Como funciona
- 01Estilizar com StyleSheet
Defina os estilos dos componentes usando StyleSheet.create em vez de estilos inline, para melhor performance.
- 02Construir Navegação com Rotas Tipadas
Implemente a navegação usando React Navigation 6+ com definições de tipo ParamList em TypeScript para todos os navegadores, garantindo segurança de tipos entre as telas.
- 03Anime na UI Thread
Crie animações de alta performance com worklets do Reanimated 3 que rodam na UI thread, usando useSharedValue e useAnimatedStyle para alcançar 60fps.
- 04Trate Gestos com GestureDetector
Implemente interações baseadas em gestos usando Gesture Handler, envolvendo gestos com GestureDetector e usando simultaneousHandlers para resolver conflitos.
- 05Otimize a Renderização
Use React.memo e useCallback para evitar rerenderizações desnecessárias. Para listas, sempre use FlatList em vez de ScrollView com map.