Widget iOS completo sem Swift — só TypeScript e Expo Widgets

Construa um widget iOS sem abrir o Xcode

Sim: é possível criar, estilizar e publicar um widget funcional para iOS sem nenhuma linha de Swift. Usando Expo Widgets e Expo UI, você acelera o ciclo de entrega, poupa tempo e leva seu app para outro patamar.

O que você precisa instalar

Dependências essenciais

Para começar rápido, instale: expo-dev-client para builds locais e expo-widgets para o suporte aos widgets no ecossistema Expo. Ambos são instalados com comandos simples via Bun ou npm.

Configurando o widget no app.json

Vá na sua array de plugins e insira o plugin de configuração do expo-widgets, declarando nome técnico, display name, descrição e suportes de tamanhos. Use “systemSmall” e “systemMedium” para hidratação — mas você pode adaptar para vários outros formatos.

Exemplo prático

Configure o widget “Hydration Widget” com nome técnico e descrição. Essas infos aparecerão na seleção do widget no iOS.

Crie o arquivo base do widget

Organize seu widget em uma pasta, por exemplo /widgets/hydration-widget.tsx . Inicie declarando o tipo das props (ex: <em>progress</em> , <em>goal</em> ) e lembre de importar diretrizes e componentes do Expo UI, como HStack , ZStack e Text .

Construa a UI declarativa do widget

Com SwiftUI sob o capô do Expo UI, monte o layout usando pilhas horizontais, verticais e capas (HStack, VStack, ZStack). Todo o visual é personalizável: cores, gradientes, espaçamentos, fontes e alinhamento.

Mantenha o widget sempre atualizado

Utilize o hydrationWidget.updateSnapshot ou métodos semelhantes para garantir que qualquer alteração no valor de progresso ( <em>progress</em> ) atualize o widget em tempo real sempre que o usuário interagir.

Como fazer o cálculo da barra de progresso

Calcule facilmente o percentual alcançado usando: <em>ratio = Math.min(progress / goal, 1)</em> . Multiplique a altura da barra pelo ratio e atribua ao preenchimento. Tudo dentro do mesmo componente para garantir atualização suave.

Customizando ainda mais: gradientes e fundos

Dê destaque visual ao widget aplicando gradientes radiais, cores de fundo customizadas e separação visual clara entre barra, texto e botão — tudo com Expo UI usando foregroundStyle e containerRelativeFrame .

Conteúdo interativo: botão com deep link

Inclua um botão com ícone (drop + plus) que, ao ser tocado, abre diretamente uma rota específica do app usando deep linking com Expo Router. Toda navegação funciona com Link e o schema do app definido no app.json.

Suporte a múltiplos tamanhos de widget

O segredo está em utilizar a prop environment.widgetFamily . Com um simples if/else no render, adapte layout, espaçamento, tamanho de fonte e conteúdo para cada tamanho (pequeno, médio…). Cada contexto deve ser otimizado para ser legível e útil.

Problemas comuns ao criar widgets iOS com React Native

Pode acontecer do widget não atualizar, não aparecer na lista de widgets ou não aceitar certos estilos. Sempre cheque se rodou prebuild após alterações no plugin, valide o app.json e observe erros no console nativo.

Use inteligência artificial para acelerar seu widget

Ferramentas como ChatGPT e Copilot conseguem gerar snippets baseados em exemplos reais de widgets. Você pode pedir para criar variáveis, componentes, layout ou até mesmo toda a lógica — basta descrever o que quer de forma clara.

Itere rápido: cada teste é instantâneo

Com Expo Dev Client, toda alteração é testada direto no simulador — esqueça builds demorados de Xcode ou envio para TestFlight. O ciclo de desenvolvimento fica tão rápido quanto telas normais de React Native.

Publicando e distribuindo seu widget

Ao empacotar e publicar seu app na App Store, o widget estará disponível nativo junto. Siga os requisitos da Apple (como cores, privacidade e informações exatas) para não ter problemas na aprovação.

Widgets mudam a forma como as pessoas usam apps no iOS

Não subestime o poder dos widgets: aumentam drasticamente a frequência de uso e promovem engajamento. Entregue valor onde as pessoas passam mais tempo: na home do próprio iPhone.

Aprenda mais: vídeo completo no canal do Dev Doido

Quer ver o passo-a-passo com exemplos visuais, debug e dicas que não estão em texto? Confira o vídeo de referência no canal Dev Doido: <a href="https://www.youtube.com/@DevDoido">@DevDoido</a> . Aproveite para se inscrever e receber dicas diretas de produção de software moderno.

Perguntas frequentes

Por que «O que você precisa instalar» importa agora em Como criar Widget iOS com TypeScript e Expo Widgets sem?

Para começar rápido, instale: expo-dev-client para builds locais e expo-widgets para o suporte aos widgets no ecossistema Expo. Ambos são instalados com comandos simples via Bun ou npm. Em «O que você precisa instalar», trate como experimento com dono e prazo — não como lista de intenções.

Como isolar «Configurando o widget no app.json» sem montar um plano de 30 dias?

Comece pelo mecanismo: Vá na sua array de plugins e insira o plugin de configuração do expo-widgets, declarando nome técnico, display name, descrição e suportes de tamanhos. Use “systemSmall” e “systemMedium” para hidratação — mas você pode adaptar para vários outros formatos.

Qual restrição «Crie o arquivo base do widget» deixa explícita?

Critério do material: Organize seu widget em uma pasta, por exemplo /widgets/hydration-widget.tsx . Inicie declarando o tipo das props (ex: progress , goal ) e lembre de importar diretrizes e componentes do Expo UI, como HStack , ZStack e Text . Se precisar de segundo sinal: Organize seu widget em uma pasta, por exemplo /widgets/hydration-widget.tsx . Inicie declarando o tipo das props (ex: progress , goal ) e lembre de importar diretrizes e.

O que falha se você pular «Construa a UI declarativa do widget»?

O artigo aponta: Com SwiftUI sob o capô do Expo UI, monte o layout usando pilhas horizontais, verticais e capas (HStack, VStack, ZStack). Todo o visual é personalizável: cores, gradientes, espaçamentos, fontes e alinhamento. Ajuste ao contexto de `how-to-build-an-ios-widget` antes de escalar.

Continue explorando