Merge pull request #1 from idopterlabs/developer/tdanin

Melhorias no Boilerplate - Setembro

CHANGELOG.md

@@ -0,0 +1,47 @@
+# Changelog 📝
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2022-09-26
+
+### Added
+
+- Adicionado componente alternativo ao Alert para mostrar erros de forma mais sutil (Snackbar)
+- Adicionado retornos original de http status e http response data para erros de request
+- Adicionado exemplo de testes usando FireEvent
+- Adicionado Mock para RN Reanimated
+- Adicionado Mock para RN Safe Area Context
+
+### Changed
+
+- Definindo versão fixa de instalação do React Native Reanimated
+- Primeira letra do campo de erro é mostrado com letra maiúscula
+- Novo componente de input com suporte melhor a dark mode, eventos de troca de texto e mostrar label personalizada.
+
+### Fixed
+
+- Usando estilo compatível com VSCode Styled
+- Alinhando texto de erro no input
+- Status 422 agora mostrar o erro processado
+- Tirando opacidade da cores em componentes desabilitados
+- Adicionado opção para configurar cor do `placeholder`
+- Mock de navegação incorporar o tema
+- Evitar problemas de sobreposição do teclado no iOS onde há scroll
+- Suporte a DarkMode para o Select
+- FormData não funcionar no Jest
+- Falhas na importação de funções do RN Platform
+- Corrigido problema do Safe Area Context não funcionar no Jest
+
+## [1.0.1] - 2022-06-20
+
+### Fixed
+
+- Aplicando cor no fundo que faltava 
+
+## [1.0.0] - 2022-06-13
+
+### Added
+
+- Criado boilerplate

README.md

@@ -37,7 +37,7 @@ Há duas maneiras de usar esse boilerplate.
 - [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation)
 - [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash#setup-1)
 - [react-native-screens](https://github.com/software-mansion/react-native-screens#installation)
-
+- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
 ## Configurações
 
 ### Variável de Ambiente
@@ -226,6 +226,34 @@ const [isFocus, setIsFocus] = useState<boolean>(false);
 const [currentValue, setNewValue] = useState<string>('');
 ```
 
+- Passando atributos no Styled. Atributos que utilizam as `props`, devem ter `return` em seu corpo pois a extensão do VSCode do styled buga sem esse padrão de estilo de código.
+
+❌ Não fazer
+
+```ts
+export const ContainerTextInput = styled(TextInputComponent).attrs((props) => ({
+  mode: props.mode || 'outlined',
+  autoCapitalize: props.autoCapitalize || 'words',
+  placeholderTextColor:
+    props.placeholderTextColor || props.theme.colors.placeholderText,
+  dense: true,
+}))``;
+```
+
+✅ Fazer isso
+
+```ts
+export const ContainerTextInput = styled(TextInputComponent).attrs((props) => {
+  return {
+    mode: props.mode || 'outlined',
+    autoCapitalize: props.autoCapitalize || 'words',
+    placeholderTextColor:
+      props.placeholderTextColor || props.theme.colors.placeholderText,
+    dense: true,
+  };
+})``;
+```
+
 ## Testes
 
 Para testes unitários está sendo utilizado biblioteca [Jest](https://jestjs.io/docs/getting-started) e para escrever os testes é necessário criar arquivos `.spec.ts`/ `.spec.tsx` dentro do mesmo diretório em que se encontra o fragmento de código.
@@ -359,3 +387,4 @@ Os mocks a serem consumido no projeto podem ser criados em [`src/tests/mocks/`](
 - [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer): Permitir importar arquivos .SVG
 - [@react-native-firebase/remote-config](https://rnfirebase.io/remote-config/usage): Integração com Firebase Remote Config
 - [react-native-camera](https://github.com/react-native-camera/react-native-camera): Suporte para usar câmera nativamente do dispositivo
+- [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view): Evitar problemas de sobreposição do teclado 

package.json

@@ -27,10 +27,12 @@
     "react-hook-form": "^7.29.0",
     "react-native": "0.68.2",
     "react-native-device-info": "^8.7.1",
-    "react-native-element-dropdown": "^1.8.10",
-    "react-native-gesture-handler": "^2.3.2",
+    "react-native-element-dropdown": "^2.3.0",
+    "react-native-gesture-handler": "^2.5.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-mask-text": "^0.7.0",
     "react-native-paper": "^4.12.0",
+    "react-native-reanimated": "^2.9.1",
     "react-native-safe-area-context": "^4.2.4",
     "react-native-screens": "^3.13.1",
     "react-native-svg": "^12.3.0",

patches/react-native-element-dropdown+2.3.0.patch

@@ -0,0 +1,24 @@
+diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+index a8feae8..94edebf 100644
+--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
++++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+@@ -449,7 +449,6 @@ const DropdownComponent = React.forwardRef<any, DropdownProps>(
+               ref={refList}
+               onScrollToIndexFailed={scrollIndex}
+               data={listData}
+-              inverted
+               renderItem={_renderItem}
+               keyExtractor={(_item, index) => index.toString()}
+               showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+diff --git a/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx b/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
+index ad33b78..2c306e8 100644
+--- a/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
++++ b/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
+@@ -420,7 +420,6 @@ const MultiSelectComponent = React.forwardRef<any, MultiSelectProps>(
+               {...flatListProps}
+               keyboardShouldPersistTaps="handled"
+               data={listData}
+-              inverted
+               renderItem={_renderItem}
+               keyExtractor={(_item, index) => index.toString()}
+               showsVerticalScrollIndicator={showsVerticalScrollIndicator}

patches/react-native-paper+4.12.1.patch

@@ -1,3 +1,20 @@
+diff --git a/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx b/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
+index 07e6d3c..75dc406 100644
+--- a/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
++++ b/node_modules/react-native-paper/src/components/TextInput/Label/InputLabel.tsx
+@@ -91,12 +91,6 @@ const InputLabel = (props: InputLabelProps) => {
+         labelTranslationX,
+       ]}
+     >
+-      {labelBackground?.({
+-        parentState,
+-        labelStyle,
+-        labelProps: props.labelProps,
+-        maxFontSizeMultiplier: maxFontSizeMultiplier,
+-      })}
+       <AnimatedText
+         onLayout={onLayoutAnimatedText}
+         style={[
 diff --git a/node_modules/react-native-paper/src/components/TextInput/TextInputOutlined.tsx b/node_modules/react-native-paper/src/components/TextInput/TextInputOutlined.tsx
 index f6d1880..3e0958f 100644
 --- a/node_modules/react-native-paper/src/components/TextInput/TextInputOutlined.tsx

src/App.tsx

@@ -9,6 +9,7 @@ import {
 import { Theme } from 'react-native-paper/lib/typescript/types';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+
 import {
   ThemeProvider,
   DefaultTheme as DefaultThemeStyled,
@@ -21,6 +22,9 @@ import Routes from '@routes/index';
 import AllProviders from './contexts/AllProviders';
 
 LogBox.ignoreLogs([
+  'Could not find Fiber with id "225"',
+  'Non-serializable values were found in the navigation state',
+  "ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'",
   "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
 ]);
 
@@ -54,6 +58,7 @@ export default () => {
         text: theme.colors[colorSchemeName].primaryText,
         error: theme.colors[colorSchemeName].attention,
         disabled: theme.colors[colorSchemeName].disabled,
+        placeholder: theme.colors[colorSchemeName].placeholder,
       },
     };