###########################################

##################### App motoclinik #####################

###########################################
https://nodejs.org/pt-br/download/

Versao do 14 pra cima

https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable

YARN instala pelo npm, tem que instalar o node primeiro

npm install --global expo-cli

npm install --global yarn

depois que instala isso tudo, baixa o projeto, entra na pasta app e da o comando

yarn

ele vai instalar as dependencias,

depois da o comando

expo start

ele vai executar o projeto

baixa o 'expo go' no android pra poder emular o app no android

yarn add @react-native-clipboard/clipboard

iniciar ambiante
npx expo start

############################################
########## CONTAIER MTC ##########
############################################
Entrar no Portainer: https://wstech.up2solucoes.net/portainer/#/home

Usuario: wstech
Senha: kqklpi123

Duplicar o container: wstech-api

NÃO ALTERAR A INFORMAÇÃO

com.docker.compose.project.working_dir = /root/apis/wstech/wstech/api

Alterar os dados do container novo:

ENV:
DB_NAME = <NOME DO BANCO PG>
GLOBAL_PREFIX = /<NOME SISTEMA NOVO>

LABELS:
traefik.http.routers.wstechserver.entrypoints -> traefik.http.routers.<NOME SISTEMA
NOVO>server.entrypoints
traefik.http.routers.wstechserver.rule -> traefik.http.routers.<NOME SISTEMA
NOVO>server.rule
traefik.http.routers.wstechserver.service -> traefik.http.routers.<NOME SISTEMA
NOVO>server.service = <NOME SISTEMA NOVO>server
traefik.http.routers.wstechserver.tls.certresolver -> traefik.http.routers.<NOME
SISTEMA NOVO>server.tls.certresolver
traefik.http.services.wstechserver.loadbalancer.server.port ->
traefik.http.services.<NOME SISTEMA NOVO>server.loadbalancer.server.port

############################################
########## Comandos úteis Node.js ##########
############################################

Iniciar novo projeto:

{ Pasta onde o projeto vai ser criado }
npx react-native init {nome do projeto}

Iniciar o projeto:
{ Pasta onde o projeto está }
npx react-native start

Iniciar o emulador android:

{ Pasta onde o projeto está }
npx react-native run-android

Executar o projeto via Expo Go

Fazer login no expo
npx eas-cli login

Executar projeto
npx expo start

gerar apk
{ CMD como Admin }
--X--expo build:android -t apk--X--
--> (cmd admininstrador) eas build -p android

Iniciar ambiante
--> npx expo start

{ Pasta onde está o projeto / instalar as dependencias do yarn}

- comando para instalar as dependencias do yarn
{ Pasta onde está o projeto > yarn }
npx expo start
url [path] Log a URL for opening the project in Expo Go
url:ipa [path] Log the download URL for the standalone iOS
binary
url:apk [path] Log the download URL for the standalone Android
binary

{Parar processos:
Ctrl + C

Habilitar log de debug

npx react-native log-android
{ console.debug() }

##################################################
############### Clipboard ###############
##################################################

yarn add @react-native-clipboard/clipboard

##################################################
############### Telas de navegação ###############
##################################################
Instalar dependencias do Navigation
https://reactnavigation.org/docs/getting-started
{ Abrir a pasta do projeto ]
npm install @react-navigation/native

Dependencias para um projeto simples

npm install react-native-screens react-native-safe-area-context

Com o Expo
expo install react-native-screens react-native-safe-area-context

{ Abrir o arquivo MainActivity.java em android/app/src/main/java/ }

adicionar ao arquivo
import android.os.Bundle; //No topo

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
} //dentro de MainActivity class

{ Instalar o Stack - Telas sobrepondo a anterior }

npm install @react-navigation/native-stack

{ Instalar Tab }
npm install @react-navigation/bottom-tabs

{ Drawer - Sidemenu }
npm install @react-navigation/drawer

# Sem o Expo
npm install react-native-gesture-handler react-native-reanimated

# Com o Expo
expo install react-native-gesture-handler react-native-reanimated

###################################################

Para quem está está fazendo o projeto na nova versão do react-navigation, precisa
de algumas alterações para fazer funcionar:

(No meu caso, considerando que vou testar em um dispositivo Android)

As informações aqui citadas foram retiradas da própria documentação, disponível em:

Iniciando com React Navigation

1° Instalar o React Navigation e o Gesture Handler

npm install react-navigation

npm install react-native-gesture-handler
2° Fazer algumas alterações no MainActivity (Considerando que as linhas que estão
com o + no início devem ser incluídas):

O Arquivo fica em: exercicio/android/app/src/main/java/com/exercicio/

package com.exercicio;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "exercicio";
}

+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }

3° Para fazer o Drawer ou qualquer outro agora é necessário usar o

createAppContainer, então meu arquivo Menu.js ficou da seguinte forma:

import React from 'react';

import { createAppContainer, createDrawerNavigator } from 'react-navigation';

import Simples from './componentes/Simples';

import Parimpar from './componentes/Parimpar';
import { Inverter } from './componentes/Multi';

const drawerNavigator = createDrawerNavigator({

Inverter: {
screen: () => <Inverter texto='React Nativo' />,
navigationOptions: { title: 'Inverter' }
},
Parimpar: {
screen: () => <Parimpar numero={33} />
},
Simples: {
screen: () => <Simples texto='Flexivel' />,
navigationOptions: { title: 'Simples' }
}
}, { drawerWidth: 300, edgeWidth: 100 });

export default createAppContainer(drawerNavigator);

2° Fazer algumas alterações no MainActivity (Considerando que as linhas que estão

com o + no início devem ser incluídas):
{O Arquivo fica em: exercicio/android/app/src/main/java/com/exercicio/}

package com.exercicio;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "exercicio";
}

+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }

3° Para fazer o Drawer ou qualquer outro agora é necessário usar o

createAppContainer, então meu arquivo Menu.js ficou da seguinte forma:

import React from 'react';

import { createAppContainer, createDrawerNavigator } from 'react-navigation';

import Simples from './componentes/Simples';

import Parimpar from './componentes/Parimpar';
import { Inverter } from './componentes/Multi';

const drawerNavigator = createDrawerNavigator({

Inverter: {
screen: () => <Inverter texto='React Nativo' />,
navigationOptions: { title: 'Inverter' }
},
Parimpar: {
screen: () => <Parimpar numero={33} />
},
Simples: {
screen: () => <Simples texto='Flexivel' />,
 navigationOptions: { title: 'Simples' }
}

}, { drawerWidth: 300, edgeWidth: 100 });

export default createAppContainer(drawerNavigator);

coloquei o edgeWidth para definir a que distância da borda da visualização de

conteúdo o gesto deve ser ativado, apenas para ficar melhor os testes.

###################################################

##################################################
############### Adicionando icones ###############
##################################################

https://github.com/oblador/react-native-vector-icons#android

npm install --save react-native-vector-icons

Para usar as fontes mudar o texto de iconFontNames

FontAwesome by Dave Gandy (v4.7.0, 675 icons)
FontAwesome 5 by Fonticons, Inc. (v5.15.3, 1598 (free) 7848 (pro) icons)
Ionicons by Iconic Framework (v5.0.1, 1227 icons)

Edite android/app/build.gradle

project.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf', 'FontAwesome.ttf' ] // Name of the font files
you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

##################################################
############### Native Elements ###############
##################################################
https://reactnativeelements.com/docs

*Ocorreu erro ao instalar apos os elementos acima

npm install react-native-elements

Usando o yarn e Expo Go

/*
Caso de erro de permissão
Set-ExecutionPolicy Unrestricted CurrentUser
*/
yarn add react-native-elements

Alternativa
npm install react-native-safe-area-context

{ Instalar o vector icons }

npm install react-native-vector-icons

##################################################
############## FlatList e ListItem ###############
##################################################
https://reactnativeelements.com/docs/listitem

Avatar
https://reactnativeelements.com/docs/avatar/