Pular para o conteúdo

Template de Social

Mosaic Social Community App

A photo-first community app: a feed with stories, an Explore mosaic, profiles, messages and group chats, short videos and live rooms.

  • 25 telas
  • iOS e Android
  • Precisa de Supabase
  • Atualizado em 4 de nov. de 2026
  • Versão verificada
  • 1 cópia criada

Cópia grátis · Código completo · Sem cartão

Telas

6 telas do app em funcionamento.

O que vem incluído

  1. A photo-first feed with stories and double-tap likes
  2. Explore as a mosaic of photos, clips and live rooms
  3. Profiles with places, posts, videos and tags
  4. Messages and group chats with photos, shared posts and reactions
  5. Full-screen videos and live rooms with comments
  6. Supabase accounts, posts, media and messages, with sample data until connected

Sobre este modelo

Overview

Mosaic is a React Native photo community in the family of Instagram, VSCO and Retro. Photos carry the colour; the chrome is ink on white, and one coral accent means something is alive for you: a like, a new story, a live room, an unread message.

It opens on sample data so every screen works when you fork it: a cast of twelve people with their posts, stories, live rooms and conversations, while your own profile starts empty. Connect your Supabase project under Server for accounts, posts, media and messages.

Key features

  • Feed and stories — Posts edge to edge with double-tap likes, a stories rail, send to a chat and save.

  • Explore — Search and topics over a mosaic of big and tall tiles, with clips and live rooms in the mix.

  • Profiles — Name, bio, counts, follow and message, places that filter the grid, posts, videos and tags; private accounts.

  • Messages — Conversations and group chats with photos, shared posts, reactions and unread counts.

  • Videos and live — Full-screen videos with likes and comments, and live rooms with a comment stream.

  • Create — Choose up to ten photos, add a caption and a place, or open the camera.

Screens included

Community

  • Home

  • Explore

  • Profile

  • Post

  • Story

  • Activity

  • Follow requests

Messages and media

  • Messages

  • Conversation

  • Videos

  • Live

  • Live room

  • New post

  • Camera

Account

  • Your profile

  • Edit profile

  • Profile menu

  • Accounts

  • Log in

  • Sign up

  • Reset password

  • About

  • Privacy policy

  • Terms of use

Built with

  • Framework — React Native and Expo SDK 57 on the FluxNative base 13 kernel: native iOS and Android, Liquid Glass chrome on iOS.

  • Backend — Supabase Auth, Postgres and Storage for accounts, posts, media, stories and messages; a migration ships in the supabase folder.

  • Sample mode — With no backend connected, every service answers from realistic sample data kept on the device.

Good fit for

  • Photo and creator communities

  • Local and interest communities with group chats

  • Startups building a social app around photos

social networkphoto feedstoriessupabasereact nativemessaginglive streamingcommunity

O que você recebe

  • Código completo: Expo e React Native em TypeScript, como um app no seu espaço de trabalho.
  • Prévia ao vivo: teste cada mudança no navegador ou no celular.
  • Versão verificada: compila e todas as telas abrem sem erros.
  • Assistente de IA: mude o que quiser pelo chat; cada mudança usa créditos.
  • Builds e envio às lojas: builds de iOS e Android, enviados à App Store e ao Google Play pelo Publish.
  • Copiar não gasta créditos: a cópia em si não custa nada.

Feito com a versão atual do FluxNative.

O que você precisa

  • Uma conta FluxNative: o plano Free comporta até 2 apps.
  • Seu próprio Supabase: para os seus dados; até lá o app usa dados de exemplo.
  • Creator ou superior: para builds nativos e envio às lojas.
  • Contas das lojas: Apple Developer Program (US$ 99 por ano) e Google Play (US$ 25 uma vez), para publicar.

O que vem no código

telas
25
arquivos na sua cópia
397
linhas escritas para este app
11,7 mil
componentes de UI prontos
142

Textos do app em inglês e vietnamita

Stack técnica

Expo SDK
57.0.22
React Native
0.86.3
React
19.2.8
TypeScript
6.0.3
Expo Router
57.0.21
Supabase JS
2.112.0

Do package.json desta versão.

Design system

Títulos
Fraunces
Texto
Fonte do sistema
  • Modos claro e escuro
  • Liquid Glass
  • Botões em pílula
  • Cards simples

Configuração depois do fork

Sua cópia abre com o assistente de IA que a criou. Siga os passos em ordem: conecte em Server o que um passo pedir e depois envie cada prompt.

  1. Connect your Supabase project

    Add your Supabase project URL and access token under Server › Backend › Supabase first. Until then Mosaic runs on a sample community kept on the device.

    Prompt para a IA

    Supabase is connected under Server. Create the tables this app reads (profiles, follows, posts and their media and tags, likes, saves, comments, stories and views, conversations, members and messages, activity, live streams and live comments) with row-level security, the avatars and media storage buckets and the increment_post_views function, apply the migration in supabase/migrations, write the public values into .env, and check that sign-up, the feed, a new post and Messages work on my project.

  2. Add reporting and blocking

    The App Store and Google Play require apps where people post to let them report content and block other people. The template does not include this yet.

    Prompt para a IA

    Add reporting and blocking: a Report action on posts, comments, stories, messages and profiles that saves the report with its reason in my Supabase project, and Block on profiles that hides that person's posts, stories and messages from me. Add the tables and row-level security they need, and tell me where I can read new reports.

  3. Set your app icon

    Make an AI logo or upload your own icon in App settings. The launcher icon, splash screen and store listing all use it.

    Prompt para a IA

    I set a new app icon in App settings. Match the splash screen background and the Android icon background to its edge colour, so the icon sits on one continuous colour.

  4. Write your community rules and legal pages

    Prepare your community guidelines, support contact, privacy policy and terms. The app has its own Privacy and Terms screens with sample text to replace before you publish.

    Prompt para a IA

    Add my community guidelines where people sign up and in the profile menu: [your community guidelines]. Put my privacy policy and terms into the app's Privacy and Terms screens: [your privacy policy and terms], and set the support contact to [your support email].

  5. Check and publish a build

    Sign up, post a photo, add a story, message someone and open a live room on a phone, then build for the stores from Publish.

    Prompt para a IA

    Run a final check of every screen in light and dark mode: sign-in, the feed, stories, Explore, posting, profiles, Messages and group chats, videos, live rooms and activity. Fix anything broken or still showing template content, then get the app ready for a store build.

Como usar este template

  1. Use o template para ter uma cópia editável, com o código-fonte, no seu espaço de trabalho (Templates).
  2. Peça ao assistente de IA as mudanças que quiser, com suas próprias palavras (Trabalhar com o assistente).
  3. Teste cada mudança na prévia ao vivo ou no seu celular (Prévia).
  4. No Creator ou superior, gere o app para iOS e Android e envie às lojas (Visão geral da publicação).

Licença e suporte

Licença

O app criado para você é seu; o código do modelo continua da InspireUI e é licenciado para uso nos seus apps (Termos › Nossa propriedade intelectual).

Ajuda

  • Guias sobre templates, o assistente e a publicação.
  • Falar com o suporte em Ajuda; respondemos em geral em 1–2 dias úteis.
  • Na sua cópia, pergunte ao assistente de IA sobre qualquer tela ou arquivo.

Feito pelo FluxNative

Política de suporte

Perguntas

É grátis?

Copiar um template grátis não custa nada, nem créditos; um Premium é uma compra única por site. Mudanças pelo chat e builds usam créditos.

O que é meu?

Você é dono do app feito para você. O código do template continua da InspireUI e é licenciado para uso nos seus apps (Terms › Our intellectual property).

Preciso saber programar?

Não. Peça mudanças ao assistente com suas palavras; o código completo está lá quando quiser.

Vem com backend?

Não. Um app completo diz qual backend precisa e você conecta o seu em Server; um design usa dados de exemplo.

Posso mudar o design?

Sim. A aba Design muda cor da marca, cores, fontes e cantos sem gastar créditos; o assistente muda o resto.

Qual plano preciso para publicar?

Creator ou superior faz build e envia às lojas, com suas próprias contas Apple e Google. O app de um template Premium faz build em qualquer plano depois que o site é conectado.

Posso baixar o código?

Sim, com Download source ou Push to GitHub, depois que seu espaço de trabalho comprar um plano, créditos ou um template pago. O app de um template Premium também precisa do site conectado.

E se foi feito com um FluxNative anterior?

Sua cópia funciona como está. Peça ao assistente para atualizá-la com recursos novos, como idiomas e moedas do app; é o último passo da configuração.

Pronto para transformar no seu app?

Comece a partir de Mosaic Social Community App e mude o que quiser pelo chat. Sua cópia vem com o código-fonte completo.

Cópia grátis. Sem cartão de crédito.

Taking a little longer than usual…

Loading FluxNative