gatec-rn-framework

Biblioteca de React Native GAtec

Installation

Abra o terminal na pasta do seu projeto e rode o código

npm install gatec-rn-framework

ou

yarn add gatec-rn-framework

A biblioteca tem algumas dependências com outros pacotes, para adiciona-los basta rodar o seguinte código:

yarn add react-native-image-picker@4.1.2 react-native-signature-capture@0.4.12 react-native-snackbar@2.4.0 react-native-sound@0.11.1 react-native-vector-icons@9.0.0 react-native-fs@2.18.0 react-native-tab-view@3.1.1 react-native-reanimated react-native-maps@0.28.0 react-native-shimmer@0.6.0 react-native-swipe-list-view@3.2.9 styled-components@4.4.1 react-native-safe-area-context@3.3.2 react-native-linear-gradient@2.5.6 react-native-camera@4.2.1 @react-native-async-storage/async-storage react-native-pager-view react-native-geolocation-service@5.3.0-beta.3 @react-native-community/datetimepicker react-native-uuid-generator@6.1.1

Para adiconar as fontes Roboto utilizadas na bibliteca, precisamos criar um arquivo na raiz do projeto chamado react-native.config.js com o seguinte conteúdo:

module.exports = {
  assets: ['./node_modules/gatec-rn-framework/src/assets/fonts'],
};

Precisamos fazer algumas configurações nos arquivos do Android e do IOS do projeto.

IOS

No arquivo Podfile na pasta ios do projeto, temos que adicionar algumas permissões:

target 'YourAwesomeProject' do

  # …

  permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
  pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"

end

AppDelegate.h

#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import "RNAppAuthAuthorizationFlowManager.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, RNAppAuthAuthorizationFlowManager>

@property(nonatomic, weak)id<RNAppAuthAuthorizationFlowManagerDelegate>authorizationFlowManagerDelegate;
@property (nonatomic, strong) UIWindow *window;

@end

ANDROID

Para adicionar as permissões no android precisamos acessar o arquivo AndroidManifest no caminho : android/app/src/main/AndroidManifest.xml , e adicionar o seguinte código:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.myawesomeapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

  <!-- … -->

</manifest>

android/settings.gradle

...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')

android/app/build.gradle

...
dependencies {
    ...
    implementation project(':react-native-fs') // <--- insert this line
}

...

defaultConfig {
    ...

    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
    manifestPlaceholders = [
            appAuthRedirectScheme: 'com.NAME_OF_YOUR_APPLICATION'  // <--- insert this
        ]
  }

IMPORTANTE!

Caso ao utilizar as animações do pacote de um erro relacionado ao Lottie que são as fontes das animações, você deve arrumar alguns arquivos no Android;

android/app/src/main/java/<AppName>/MainApplication.java

• Adicionar no campo de importações: import com.airbnb.android.react.lottie.LottiePackage;
• Adicionar : packages.add(new LottiePackage()); no List<ReactPackage> getPackages();

android/app/build.gradle

• Adicionar implementation project(':lottie-react-native') no bloco de dependencies

android/settings.gradle Adicionar

include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

Caso for utilizar mapa, deve incluir a GoogleApiKey no AndroidManifest em android/app/src/main/AndroidManifest.xml

<application>
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>

   <uses-library android:name="org.apache.http.legacy" android:required="false"/>
</application>

Após toda configuração

Para salvar todas as configurações no projeto, você deve rodar :

npx react-native link
npx jetify

No MacOs

cd ios
pod install

Usage

A biblioteca necessita de um Provider envolvendo a aplicação, assim:

import React from 'react';
import { GAThemeProvider } from 'gatec-rn-framework';
import { Routes } from './routes';

const App = () => {
  return (
    <GAThemeProvider>
      <Routes />
    </GAThemeProvider>
  );
};

export default App;

Code Contributors

This project exists thanks to all the people who contribute.

License

MIT