- Instalar o GIT
- Instalar o NodeJS versão 14 para o projeto, sem utilizar o nvm já que o husky não funciona corretamente com o nvm.
Caso opte por mesmo assim utilizar o nvm terá que desinstalar todas as outras versões (menos a 14) para poder comitar as alterações do projeto.
- Caso não tenha o yarn instalado utilize o comando:
sudo npm install -g yarn
- EditorConfig (nome no VS Code: EditorConfig for VS Code)
- ESLint (nome no VS Code: ESLint)
- Prettier (nome no VS Code: Prettier - Code formatter)
- Styled Components (nome no VS Code: vscode-styled-components (Julien Poissonnier))
- Configurar para formatar o código ao salvar o arquivo
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"files.eol": "\n",
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true
},
"git.autofetch": truePastas dentro de src:
- assets: Todos os "assets" do aplicativo
- components: Componentes customizados para o aplicativo
- contexts: Contextos de controle dos estados ou funcionalidades usadas em todo o aplicativo
- entities: Interfaces para o autocompletar das API's
- helpers: Funções úteis para uso em geral no aplicativo
- routers: Rotas do aplicativo são controladas pelo StackNavigator, usando os dados em Routes.ts, a parte responsável pelos menus são controladas pelo DrawerNavigator, usando os dados em Routes.ts
- screens: Telas do aplicativo
- services: Serviços externos, como requisições das API's, ou ferramentas que não tem um porquê de estar misturada com a lógica da aplicação
- stores: Actions, reducers e custom hooks
- styles: Estilos do aplicativo
- Seguindo padrões mais novos do React, NÃO USE CONST PARA COMPONENTES. Olhando os exemplos mais novos, componentes são declarados como function ao invés de const. O motivo principal do React estar usando function ao invés de declarar const, é que a function funciona fora de ordem na chamada, e const precisa estar declarado anteriormente ao uso do mesmo. Um componente não é constante, e sim, função. Faz sentido usar const para funções anônimas, mas o componente por si só não é função anônima, e sim, uma função bem definida.
- Funções compartilhadas, ficam dentro de helpers apropriados. Não fique espalhando com Copy/Paste, códigos duplicados.
- Nomes no singular: Todas as pastas, exceto as pastas na raiz de "src"
- Nomes no plural: Todas as pastas na raiz de "src", nomes de arquivos específicos, como por exemplo, que trazem uma lista de dados. Ex: src/screens/noticias.tsx
- Idioma inglês: Todos os nomes, exceto nomes próprios, como seções ou páginas
- lowerCamelCase: Pastas, nomes de arquivos, custom hooks, variáveis, funções, propriedades, métodos. Ex: useAuth(), functionName
- UpperCamelCase: Nomes dos componentes, nomes de styled components, imports, interfaces. Ex: Home(), AuthProvider()
- spinal-case: Nomes de arquivos fonts, imagens ou svgs, nomes de classes CSS. Ex: src/pages/fale-conosco.tsx, public/images/banner-principal.jpg, public/svgs/svg-user.svg, .has-value
-
Instalação de NodeJS, Yarn e Android Studio de acordo com esse link https://react-native.rocketseat.dev/android/linux
-
Instalar Google Licensing Library https://www.kindacode.com/article/react-native-please-accept-all-necessary-android-sdk-licenses/
-
Aumentar o limite de arquivos observados no sistema https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached
-
Configurar o MultiDex https://developer.android.com/studio/build/multidex?hl=pt-br
-
Incluir no arquivo $HOME/.bashrc as linhas de código:
# NVM WITH YARN
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
# Load global yarn binaries
export PATH="$PATH:$(yarn global bin)"
# NVM USE
find-up() {
path=$(pwd)
while [[ "$path" != "" && ! -e "$path/$1" ]]; do
path=${path%/*}
done
echo "$path"
}
cdnvm() {
cd "$@";
nvm_path=$(find-up .nvmrc | tr -d '\n')
# If there are no .nvmrc file, use the default nvm version
if [[ ! $nvm_path = *[^[:space:]]* ]]; then
declare default_version;
default_version=$(nvm version default);
# If there is no default version, set it to `node`
# This will use the latest version on your machine
if [[ $default_version == "N/A" ]]; then
nvm alias default node;
default_version=$(nvm version default);
fi
# If the current version is not the default version, set it to use the default version
if [[ $(nvm current) != "$default_version" ]]; then
nvm use default;
fi
elif [[ -s $nvm_path/.nvmrc && -r $nvm_path/.nvmrc ]]; then
declare nvm_version
nvm_version=$(<"$nvm_path"/.nvmrc)
declare locally_resolved_nvm_version
# `nvm ls` will check all locally-available versions
# If there are multiple matching versions, take the latest one
# Remove the `->` and `*` characters and spaces
# `locally_resolved_nvm_version` will be `N/A` if no local versions are found
locally_resolved_nvm_version=$(nvm ls --no-colors "$nvm_version" | tail -1 | tr -d '\->*' | tr -d '[:space:]')
# If it is not already installed, install it
# `nvm install` will implicitly use the newly-installed version
if [[ "$locally_resolved_nvm_version" == "N/A" ]]; then
nvm install "$nvm_version";
elif [[ $(nvm current) != "$locally_resolved_nvm_version" ]]; then
nvm use "$nvm_version";
fi
fi
}
alias cd='cdnvm'
cd $PWD
- Para pegar a chave SHA1, digite no terminal: keytool -list -v -alias androiddebugkey -keystore android/app/debug.keystore
- Melhor opção para emulador é utilizando um aparelho, seguir este link https://react-native.rocketseat.dev/usb/android
- Executar no terminal: yarn install
-
Executar server em um terminal: yarn start --reset-cache ou para usar o ENV de produção: yarn start:prod --reset-cache
-
Executar emulador Android em outro terminal: yarn android ou a versão de produção yarn android --variant=release
-
Executar emulador IOS em outro terminal: yarn ios ou a versão de produção yarn ios --variant=release
-
MUITO CUIDADO ao fazer qualquer alteração dentro de "android", pode estar funcionando no emulador, mas não funcionar no APK
-
Primeiro executar no terminal: cd android && ./gradlew clean && cd ..
-
Depois executar no terminal o comando de bundle do env de desenvolvimento ou de produção: Env de desenvolvimento: yarn run publish:dev bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
Env de produção: yarn run publish bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
-
Depois executar no terminal o comando de APK versão debug ou release: Versão debug do APK: cd android && ./gradlew assembleDebug && cd ..
*Obs: os arquivos de APK se encontram na pasta android/app/build/outputs/apk/debug, cada arquivo é para um range de versões do Android, no Moto G7, por exemplo, funcionou o arquivo app-armeabi-v7a-debug
Versão release do APK: cd android && ./gradlew assembleRelease && cd ..
*Obs: os arquivos de APK se encontram na pasta android/app/build/outputs/apk/release, cada arquivo é para um range de versões do Android, no Moto G7, por exemplo, funcionou o arquivo app-armeabi-v7a-release
-
Se for alterado o valor de "appName" no arquivo app.json, para de funcionar o app, sempre que for necessário alterar esse valor, se deve mudar também em vários arquivos do Android e do IOS, uma alternativa é criar outro projeto e executar o comando: npx react-native init novo_nome --template react-native-template-typescript
-
Caso as alterações não estejam aparecendo na tela, no terminal onde está executando o server, digite R para atualizar o emulador
-
Problema de commit no Rusky com a mensagem de versão do NodeJS, reinicie o VS Code
- Erro ao executar algum comando, ou tela do app não abre no celular, ou algum erro que parece já ter sido corrigido:
- Executar no terminal: cd android && ./gradlew clean && cd ..
- E depois: yarn start --reset-cache
- Se persistir o erro, pare os processos, desconecte o celular, remova a pasta node_modules, instale novamente as bibliotecas e execute novamente
- Organizar "import" na ordem correta, tanto na ordem de contexto como na ordem alfabética. Ex:
// REACT AND REACT-NATIVE
import React from 'react';
import { Platform } from 'react-native';
// LIBRARY
import { NavigationContainer } from '@react-navigation/native';
// OTHERS
import { apiUrlLogin } from '../config';
import { useAuth } from '../../contexts/auth';
import { maskPhone } from './helpers/mask';
// COMPONENT
import { Modal } from './components/modal/modal';
// SCREEN
import Login from './screens/login/login';
// STYLE
import { layout } from './styles/layout';
// SVG
import imageName from './assets/svg/svg-svgName.svg';
// IMAGE
import imageName from './assets/image/imageName.jpg';- Organização de código dentro do componente
export default function ComponentName(): ReactElement {
// VARIABLE
const var1 = false;
// STYLE
const styles = StyleSheet.create({
style: {
flexGrow: 1,
justifyContent: 'center'
}
});
// STATE
const [state1, setState1] = useState('');
// FORM
const {
control,
errors,
formState: { touched },
handleSubmit
} = useForm({
mode: 'onChange'
});
// FUNCTION
function handleButton(): Dispatch<any> {
return dispatch(state1);
}
// RULE
if (state1) {
return <Redirect to="/" />;
}- Componentes, custom hooks, reducers não devem ser constantes, eu seja, funções do React são declaradas como function, já em funções de JavaScript, utilize const. Ex:
function Home(): ReactElement {
...
}
export default Home;
export function useApp(): IAppContext {...}
export const HomeStyled = styled.div`...`;
export const maskPhone = (value: string): IMask => {...}- Usar export default somente em componentes da pasta "src/screens", exceto em funções expecíficas. Ex:
import * as yup from 'yup';
yup.setLocale({
...
});
export default yup;- Quando for utilizado o export default, usar no final do arquivo. Ex:
function MyApp({ Component, pageProps }: AppProps): ReactElement {
...
}
export default MyApp;- Quando for usar a verificação de length no jsx, SEMPRE usar um operador de comparação. Ex:
stateLista.length > 0;-
Não se deve usar um componente de listagem do React Native (ex: FlatList) dentro de um componente ScrollView, por isso o ScrollView é utilizado somente nos locais necessários e não direto no componente de layout pai
-
Evitar utilizar estilos no componente de ScrollView, neste componente algumas propriedades não funcionam
-
Teste de envio - Firebase Cloud Messaging Send
Obs: NÃO ESQUECER da configuração do "android", necessário para funcionar corretamente "messaging().setBackgroundMessageHandler" parent: projects/app Request body: ```json { "message": { "token": "exkpBfYMQISJN1*UYIYjYG:APA91bEnWNMi3bsLy1J-euxI6had06GLT0CMHDUKZmemFl_zw44mgciQDZpPuFuUsne63Y3fMYVrzzvwAPyaMjGke43Pr*-8vuvKMTI3l0FTXUincrJpLPl6Vm0KVegczISia7Ltbpq3", "notification": { "title": "Título da notificação", "body": "Corpo da notificação" }, "android": { "priority": "HIGH", "notification": { "defaultVibrateTimings": false, "notificationPriority": "PRIORITY_DEFAULT", "vibrateTimings": [ "1.5s" ], "visibility": "PRIVATE" } }, "data": { "id": "1", "routeName": "Home", "title": "titulo" } } } ````
onChangeText={(
element: React.ChangeEvent<{ value: string }>
) => {
console.warn('element: ', element);
}}-
Limpar código desnecessário, combinar paths quando possível, deixar com o fill default, tirar sobras da viewbox do svg, entre outras otimizações, tudo isso pode ser feito com o programa Inkscape
-
Depois das otimizações no Inkscape, otimizar o arquivo no site SvgOmg
-
Os arquivos de svg se encontram na pasta 'Assets/Svgs', o nome dos arquivos e suas propriedades das tags, devem seguir o padrão das já existentes
-
Primeiro, na aba Edit abrir a janela XML editor, para poder visualizar a estrutura do svg, e na aba Object abrir a janela Fill and Stroke, para poder visualizar os preenchimentos de fill e stroke
-
Selecionar todo o svg e desagrupar usando as teclas ctrl + shift + g o máximo possível
-
Com o svg todo selecionada vá na aba Path e selecione a opção Union. (Usar nos paths que são da mesma cor. Caso ocorra algum problema com o svg, tentar unir os paths semelhantes)
-
Remover a cor de fill e stroke clicando no símbolo de interrogação
-
Selecionar todo o svg novamente e na aba Edit selecionar Resize Page to Selection
-
Ao salvar ir na opção Save As e clicar na opção Plain svg e salvar
-
Abrir o site SvgOmg e inserir o svg
-
Nas configurações de svg no site:
Em Precision colocar no valor 2
Marque a opção Prefer viewBox to width/height