Widget iOS completo sem Swift — só TypeScript e Expo Widgets
Não precisa Xcode nem fazer gambiarra: aprenda como criar widgets avançados para iOS só com TypeScript e Expo, incluindo deep linking, tamanho adaptável e estilos profissionais.
Por que isso é importante
Widget iOS: WidgetKit e budget de refresh — simulador otimista, device sincero.
Leitura relacionada: Curso React Native · Expo SDK 55 · RN vs Flutter · Cursos CrazyStack.
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.
Atenção
Você só precisa de Node (ou Bun), TypeScript e o Expo Dev Client instalado. Todo processo é feito no editor de código, inclusive testes com hot reload direto no simulador.
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.
Atenção
Sempre rode um expo prebuild após customizar o plugin de widgets no seu app.json, garantindo que tudo será migrado corretamente para o projeto nativo.
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: progress , goal ) 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.
Dica
Divida seu layout em dois: esquerda (barra de progresso) e direita (texto, botão). Assim, você consegue adaptar facilmente para múltiplos tamanhos de widget depois.
Mantenha o widget sempre atualizado
Utilize o hydrationWidget.updateSnapshot ou métodos semelhantes para garantir que qualquer alteração no valor de progresso ( progress ) atualize o widget em tempo real sempre que o usuário interagir.
Cuidado
Com widgets, variáveis e funções externas não podem ser usadas dentro do diretório marcado (@widget). Mantenha tudo o que for necessário para renderização dentro do próprio arquivo do widget.
Como fazer o cálculo da barra de progresso
Calcule facilmente o percentual alcançado usando: ratio = Math.min(progress / goal, 1) . 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.
Importante
Clicar fora do botão abre apenas o app, mas clicar no botão leva diretamente à tela de hidratação (ou qualquer outra do seu router).
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.
Dica Avançada
Inspire-se nos widgets de grandes apps da loja: o widget pequeno deve focar em exibir só progresso, o médio adiciona texto e botão, e o grande pode incluir histórico, gráficos ou outras ações rápidas.
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.
Alerta
Se aparecer erro de plugin: exclua build e pastas nativas, rode prebuild, reinstale deps e execute novamente no simulador.
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: @DevDoido . 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
Continue: Curso React Native · Expo SDK 55 · RN vs Flutter · Cursos CrazyStack.
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.
O que você precisa instalar
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.
Como fazer o cálculo da barra de progresso
Calcule facilmente o percentual alcançado usando: ratio = Math.min(progress / goal, 1) . Multiplique a altura da barra pelo ratio e atribua ao preenchimento. Tudo dentro do mesmo componente para garantir atualização suave.