Forem: Lacerda

Como Interceptar Notificações no Android com OneSignal

Lacerda — Tue, 06 Jan 2026 19:23:00 +0000

Neste tutorial, vou mostrar passo a passo como interceptar as notificações do seu aplicativo que está integrado ao OneSignal.

Isso permitirá que você tenha total controle sobre o fluxo da notificação antes que ela seja exibida ao usuário.

Todo o passo a passo será realizado no Android, utilizando Expo Bare Workflow e OneSignal.

Este tutorial assume que o OneSignal já esteja configurado e aborda exclusivamente a interceptação de notificações.

Vamos iniciar o tutorial.

No seu projeto, procure pela pasta Android, pois é nela que vamos trabalhar, ou seja, iremos mexer com código nativo e não com JS/TS.

Dentro da pasta Android, procure por app -> src -> main -> java e vamos criar um novo arquivo. Olhe o exemplo abaixo na imagem.

Eu dei o nome de NotificationServiceExtension com a extensão java

Dentro desse arquivo, é onde nós iremos trabalhar para poder interceptar as notificações.

Vamos criar uma classe, implementar uma interface e sobrescrever um método.

package com.lacerda.mobile.notification; // mude para o seu pacote

import androidx.annotation.Keep;
import com.onesignal.notifications.IActionButton;
import com.onesignal.notifications.IDisplayableMutableNotification;
import com.onesignal.notifications.INotificationReceivedEvent;
import com.onesignal.notifications.INotificationServiceExtension;

@Keep
public class NotificationServiceExtension implements INotificationServiceExtension {

     @Override
     public void onNotificationReceived(INotificationReceivedEvent event) {
        IDisplayableMutableNotification notification = event.getNotification();

        Log.d("NotificationService", "Recebendo notificação");
        Log.d("NotificationService", "Corpo: " + notification.getAdditionalData());
     }
}

Com esse código, se você receber uma notificação, será possível ver o conteúdo dela no console. Mas ainda falta um passo importante para essa classe realmente funcionar, que é dizer para o SDK do OneSignal que ele precisar chamar a nossa classe, e isso é feito no AndroidManifest.xml

Será necessário colocar a seguinte linha:

  <meta-data 
    android:name="com.onesignal.NotificationServiceExtension"
    android:value="com.lacerda.mobile.notification.NotificationServiceExtension" />

Preste atenção que o value deve apontar exatamente para a classe que acabamos de criar. O com.lacerda.mobile.notification é o meu pacote, coloque exatamente o seu.

Agora veja como fica no AndroidManifest:

Com tudo configurado, sempre que uma notificação for recebida, a classe responsável irá interceptá-la e exibir seu conteúdo no console. A partir desse ponto, é possível executar outras ações, como acordar o aplicativo ou exibir uma tela de chamada.

É possível consultar a própria documentação do OneSignal:

https://documentation.onesignal.com/docs/en/service-extensions#prevent-notification-from-displaying

Fonts personalizadas no Swift e UIkit

Lacerda — Fri, 05 Dec 2025 23:12:04 +0000

Nesse tutorial vou demonstrar como utilizar fonts personalizadas no Swift com UIKit.

Vou demonstrar com a font Montserrat e a Hind. Elas podem ser baixadas direto do Google Fonts.

Depois de ter baixado as fonts, extraia o zip e normalmente o que nos interessa está dentro da pasta static.

Eu não vou usar todas as fonts que vem no pacote, apenas algumas. São elas:
Montserrat-Regular, Montserrat-SemiBold, Hind-Medium e Hind-Regular.

Na raiz do seu projeto crie as pastas com os nomes das fonts que irá utilizar. Exemplo:

E dentro de cada pasta coloque as variáveis de fonts que irá utilizar. Exemplo:

Feito, isso, devemos configurar elas no infoplist do projeto e adicionar elas.

Iremos adicionar uma nova propriedade, o nome é:** Fonts provided by application**. Essa prop vai ser um array e vai ser permitir configurar mais de uma font.

O valor de cada chave deve ser exatamente o nome da font junto com a extensão. Se digitar errado, ela não vai funcionar.

Depois disso é só utilizar a font nas suas interfaces.

Esse foi um tutorial rápido de como usar fonts diferentes no seu projeto. Espero que tenha ajudado de alguma forma.

Como configurar um projeto Swift sem StoryBoard

Lacerda — Fri, 07 Nov 2025 12:27:30 +0000

Atenção!

para seguir com o post, é necessário possuir um computador da Apple e ter instalado o Xcode.

Quando criamos um novo projeto no Xcode, ele geralmente vem configurado para usar Storyboards na construção das telas. Porém, em muitos casos, trabalhar diretamente com UIKit em código pode ser mais simples, flexível e organizado.

Neste post vou explicar, passo a passo, como remover o Storyboard e configurar a interface inicial do app usando apenas Swift + UIKit.

Vamos começar abrindo o Xcode e criando um novo projeto.

Selecione a opção para criar um projeto. Depois de selecionado, ele vai mostrar uma tela onde iremos selecionar um template para o projeto.

Aperte em next, na próxima tela irá pedir o nome do projeto. Deixe a parte de interface com a opção StoryBoard selecionada e a linguagem com Swift

Selecione onde deseja Salvar esse projeto e aperte em create. Agora temos um projeto criado com Swift e StoryBoard. Mas nós não queremos o StoryBoard e sim Swift e UIKit. Então, precisaremos fazer mais algumas configurações.

Quando o projeto for criado, tu irá ver que no lado esquerdo existem alguns arquivos que vieram de forma padrão:

Tem dois arquivos que iremos apagar, eles são: Main e o LaunchScreen, eles são arquivos para se trabalhar com StoryBoard. Então, pode apagar esses dois arquivos sem nenhum problema.

Depois de apagado deve ficar assim:

Agora vamos continuar a configuração. Selecione a opção de mais alto nível no seu projeto:

Ele abre as opções do seu projeto. Veja que existe uma lista de opções. Selecione a Info.

Procure por uma opção por Application Scene Manifest e depois por StoryBoard Name e apague essa opção.

Ainda no Info procure por Launch screen interface file base name e troque o valor para SplashViewController.

Agora, selecione a opção Build Settings, onde iremos fazer mais uma coisa. No campo filter procure por main.

Em baixo de build options há uma parte Info.plist Values. Selecione o último item e apague ele.

Estamos quase chegando no final. Iremos configurar o último arquivo. Volte na aba esquerda onde ficam os arquivos do projeto e selecione o arquivo SceneDelegate.

Vou colar um código aqui, onde tu vai poder copiar e colar no seu.

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }

        let window = UIWindow(windowScene: windowScene)

        let viewController = UIViewController();

        viewController.view.backgroundColor = .red

        let navigation = UINavigationController(rootViewController: viewController)

        window.rootViewController = navigation

        self.window = window
        window.makeKeyAndVisible()

    }

Depois disso rode o projeto em um Emulador ou dispositivo Real e veja se tudo irá ocorrer normalmente. Em caso afirmativo, tu deverá ver uma tela vermelha, ela é uma tela que nós acabamos de criar, mas em código. Essa criação esta na linha 23 e linha 25 nós falamos que o background vai ser vermelho.

Esse foi o post de como configurar um projeto Swift com UIKit. Depois quero criar outros posts, onde ensino como utilizar elementos como UILabel, UIView, UIScrollView, UIImageView, etc.

Criar Builds de App RN

Lacerda — Sun, 02 Nov 2025 16:54:19 +0000

Neste post vou estar explicando como criar builds do seu app expo para conseguir publicar nas lojas (Apple e Google Play).

Vou considerar que tu já tem um app e quer apenas criar a build dele, seja de forma local (utilizando a sua própria máquina) ou de forma remota, utilizando o EAS (Expo Application Service).

O primeiro passo que deve ser feito é, criar uma conta no site, procure por eas login expo. Caso já tenha uma conta, pode pular essa parte. Mas de forma resumida esse serviço da Expo nos permite criar os builds do nosso app, automatizar a publicação do app nas lojas, etc.

Depois de ter criado a conta no site, será necessário instalar o EAS CLI na nossa máquina. Na documentação oficial ela nos da o seguinte comando:

npm install -g eas-cli

Então, com esse comando, nós estaremos instalando o EAS-CLI na nossa máquina de forma global.

Depois, de instalado, nós precisamos fazer o login, mas dessa vez, será direto pelo terminal, para podemos configurar o app no serviço da EXPO e conseguir fazer os builds.

eas login

Nesse processo tu fazer login na conta que acabou de criar. Feito isso, nós vamos poder começar a configurar o aplicativo no serviço.

No terminal, rode o seguinte comando:

eas build:configure

Ele irá pergunta ser tu quer configurar o aplicativo para todas as plataformas ou de forma individual. Pode selecionar qualquer uma das opções, se selecionar todas, não irá precisar configurar outra plataforma depois, se selecionar só uma, vai precisar configurar a outra, caso queira fazer build para a aquela plataforma.

Depois desse processo, tu vai notar que na raiz do seu projeto irá surgir um novo arquivo, ele se chama eas.json, dentro dele há algumas coisas, onde fazemos configurações, como enviar o app para a loja com o EAS Submit e fazer build do app. Nesse arquivo, nós organizamos por perfis, ou seja, temos o perfil de produção (build específico para loja), preview (APK, por exemplo).

Abaixo, vou estar colocando um template que sempre utilizo no meu eas.json. Veja que nele não há nada demais. Temos o atributo Build e submit e dentro de cada um temos os perfis.

{
  "cli": {
    "version": ">= 16.6.1",
    "appVersionSource": "remote"
  },
  "build": {
        "development": {
            "developmentClient": true,
            "distribution": "internal"
        },
        "preview": {
            "android": {
                "distribution": "internal",
                "image": "ubuntu-22.04-jdk-17-ndk-r26b",
                "autoIncrement": "versionCode"
            },
            "ios": {
                "simulator": true,
                "autoIncrement": "buildNumber"
            }
        },
        "production": {
            "autoIncrement": true,
            "android": {
                "autoIncrement": "versionCode",
                "image": "ubuntu-22.04-jdk-17-ndk-r26b"
            }
        }
    },
    "submit": {
        "production": {}
    }
}

Note que dentro de build, temos três perfis, mas normalmente eu só uso o de preview e production. E dentro de cada perfil, eu coloquei algumas configurações, dentro de android eu coloquei uma versão específica do java, pois na hora do build, o serviço estava usando uma versão que estava dando conflito na hora build, mas isso apenas no Android.

Com esse arquivo configurado, nós temos, duas opções para realizar o build. Podemos fazer na nuvem (Serviço EAS) ou local, usando a nossa própria máquina. (Para builds do IOS de forma local, será necessário possuir um MacBook).

Build na nuvem IOS:

O comando é composto por algumas partes, primeiro chamamos o eas cli que instalamos, depois falamos para qual plataforma vai ser o build e qual é o perfil (preview ou production)

eas build -p iOS --profile production

Para fazer build do Android é a mesma coisa, só precisamos alterar a plataforma.

eas build -p android --profile production

Ou se quiser, fazer o build direto para as duas plataformas:

eas build -p all --profile production

Ele vai fazer o build para Android e IOS.

Caso queira fazer o build de forma local é só passar o parâmetro '--local no final':

eas build -p android --profile production --local.

Se tu quiser gerar o APK do app e distribuir sem passar pela loja, troque o production por preview.

Esse foi o passo a passo de como usar o EAS para executar os builds dos nossos apps.

Tipando rotas no React Native

Lacerda — Mon, 21 Apr 2025 13:28:32 +0000

Neste post, vou mostrar como tipar as rotas no React Native usando TypeScript, garantindo segurança e autocompletar durante a navegação.

Vou considerar que você já saiba o que é o React Navigation e que já tenha utilizado pelo menos uma vez.

Então vamos aprender como tipar as rotas.

Com o React Navigation já instalado e configurado no seu projeto, vamos ver o que acontece quando não tipamos as rotas.

Veja o exemplo na imagem abaixo:

essa abordagem funciona, mas o typescript fica reclamando. Então como fazer para ele parar de reclamar?

Dentro da pasta src do seu projeto, crie um pasta chamada de @types.

A estrutura deve ficar assim:

Em questões de organização, essa pasta nos diz que ali fica as tipagens do nosso projeto.

Agora crie um arquivo chamado de navigation.d.ts dentro da pasta @types.

Nós iremos trabalhar dentro desse arquivo.

Primeiro vamos fazer uma declaração global:

export declare global { // declaração global


}

Agora vamos acessar o namespace que é o mesmo usado internamente pela lib @react-navigation/native.

export declare global { // declaração global
  namespace ReactNavigation { // lib do React Navigation

  }
}

Depois disso vamos criar uma interface com o RootParamList do React Navigation, pois ele é o responsável por dizer quais rotas existem e quais parâmetros cada uma espera.

export declare global { // declaração global
  namespace ReactNavigation { // lib do React Navigation
    interface RootParamList { // informa quais rotas existem

    }
  }
}

E dentro dessa interface nós falamos as nossas rotas e se elas esperam algum parâmetro.

No início do post eu mostrei com a rota chamada new e o typescript estava reclamando, agora vamos passar essa rota nessa interface que acabamos de fazer.

export declare global { // declaração global
  namespace ReactNavigation { // lib do React Navigation
    interface RootParamList { // informa quais rotas existem
       new: undefined;
       // o primeiro atributo diz qual é o nome da rota
       // o segundo atributo diz quais parâmetros aquela rota tem
       // como a minha rota não tem parâmetro, então coloquei
       // undefined
    }
  }
}

Agora já temos a rota configurada e o typescript não vai mais ficar reclamando. E se você tiver mais rotas o auto-completar vai mostrar quais rotas tem disponíveis.

Parâmetros

Se a sua rota tiver parâmetros, então você precisa dizer o nome dele e o seu tipo, por exemplo, vamos imaginar que a rota new recebe o parâmetro nome, então na declaração daquele arquivo de tipagem iremos fazer o seguinte.

export declare global { // declaração global
  namespace ReactNavigation { // lib do React Navigation
    interface RootParamList { // informa quais rotas existem
       new: {
        nome: string 
        // primeiro atributo, nome do parâmetro
        // segundo atributo, tipo do parâmetro
      }
    }
  }
}

E quando você navegar para essa rota, o typescript vai informar se aquela rota espera ou não um parâmetro.

Path Mapping no React Native

Lacerda — Sun, 20 Apr 2025 20:31:58 +0000

Vou estar mostrando como deixar as importações no React Native de forma mais elegante, deixando-as mais dinâmicas.

Em vez de usarmos aquela importação de ../../components podemos usar @components

veja exemplos nas imagens abaixo:

Primeiro, comece instalando a seguinte dependência:

yarn add babel-plugin-module-resolver

npm install babel-plugin-module-resolver

Depois, procure na raiz do seu projeto o seguinte arquivo:

babel.config.js

Nele iremos fazer algumas configurações que será o path personalizado que iremos utilizar.

Dentro desse arquivo deve existir alguma configuração com presets.

Exemplo:

Coloque uma vírgula depois dessa configuração, pois iremos fazer a nossa.

primeiro comece colocando da seguinte forma:

plugins: [

],

Dentro dos colchetes abre outro e coloque entre aspas o seguinte:

'module-resolver'

plugins: [
  [
    'module-resolver'
  ]
],

Agora coloque uma vírgula depois de module-resolver e abra chaves, pois vamos fazer o mapeamento dos caminhos.

plugins: [
  [
    'module-resolver',
    {

    }
  ]
],

Dentro de chaves colocamos o seguinte atributo para apontar para a pasta principal dos nosso arquivos, normalmente criamos uma pasta chamada de src e vamos estruturando nosso projeto ali.

plugins: [
  [
    'module-resolver',
    {
      root: ['./src'], // pasta raiz dos nossos arquivos
    }
  ]
],

Vamos dizer como deve ser o alias dessas pastas que estão dentro de src.

plugins: [
  [
    'module-resolver',
    {
      root: ['./src'], // pasta raiz dos nossos arquivos
      alias: {
        '@components': './src/components'
        // o primeiro atributo diz como vai ser o alias (apeliado)
        // o segundo atributo é o caminho daquela pasta.
        // você pode fazer com outras pastas, exemplo:
        // assets, screens, styles.
      }
    }
  ]
],

Typescript

se você estiver usando typescript, mais um passo deve ser realizado para ele entender a nossa configuração.

no arquivo tsconfig.json, vamos fazer umas configurações também.

{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "strict": true,
        "baseUrl": "./",
        "paths": {
            "@components/*": ["./src/components/*"],


        }
    }
}

Agora você já pode iniciar a sua aplicação e testar a nova forma de importação.

Lembre, sempre que fazer um mapeamento de uma nova importação, é preciso primeiro, fazer no babel.config.js e se estiver usando typescript, também é necessário colocar no arquivo tsconfig.json. Depois é só iniciar a aplicação, se algo der errado, limpe o cache da aplicação e teste novamente.

Fonts Personalizadas no React Native CLI

Lacerda — Sat, 01 Mar 2025 13:36:38 +0000

Como Personalizar Fonts no React Native CLI.

Primeiro, vamos montar uma estrutura de pastas no nosso projeto (Estou utilizando o vscode).

Vamos criar a seguinte estrutura src > assets > fonts

A imagem abaixo demonstra como deve ficar depois de criado essa estrutura.

Depois de termos feito isso, devemos acessar o Google Fonts e escolher a font que queremos utilizar.

link do Google Fonts:
https://fonts.google.com

Eu escolhi a Roboto, você pode estar escolhendo outra.

Depois de ter escolhido a font, baixe ela e extraia o zip.

Quando você extrair, uma pasta vai ser gerada, igual a imagem abaixo.

Acesse essa pasta que foi gerada e dentro dela hávera pasta outra chamada de static, ela possui o conteúdo que nos interessa.

Copie tudo que está dentro dela e cole dentro da pasta fonts que criamos na estrutura de pastas do projeto.

Feito isso, vamos criar um arquivo de configuração na raiz do projeto.

O nome do arquivo é: react-native.confg.js

cole o seguinte conteúdo dentro dele:

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./src/assets/fonts'],
};

Essa configuração garante que as fonts personalizadas sejam disponibilizadas pelo nosso aplicativo.

Agora temos que executar o seguinte comando no terminal para fazer esse vínculo das fonts.

npx react-native-asset

Caso você esteja fazendo essa configuração para o Iphone, faça essas passos:

cd ios
pod install

Depois de ter feito isso, a font deve ter sido configurada corretamente e agora podemos utilizar nossa font customizada.