Saltar al contenido

Plantilla 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 pantallas
  • iOS y Android
  • Necesita Supabase
  • Actualizada el 4 nov 2026
  • Versión verificada
  • 1 copia creada

Copia gratis · Código completo · Sin tarjeta

Pantallas

6 pantallas de la app en funcionamiento.

Qué incluye

  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

Acerca de esta plantilla

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

Qué obtienes

  • Código completo: Expo y React Native en TypeScript, como una app en tu espacio de trabajo.
  • Vista previa en vivo: prueba cada cambio en el navegador o en tu móvil.
  • Versión verificada: compila y cada pantalla abre sin errores.
  • Asistente de IA: cambia lo que quieras por chat; cada cambio usa créditos.
  • Compilaciones y subida a tiendas: compilaciones de iOS y Android, enviadas a App Store y Google Play desde Publish.
  • Copiar no gasta créditos: la copia en sí no cuesta nada.

Creada con la versión actual de FluxNative.

Qué necesitas

  • Una cuenta de FluxNative: el plan Free admite hasta 2 apps.
  • Tu propio Supabase: para tus datos; hasta entonces la app usa datos de ejemplo.
  • Creator o superior: para compilaciones nativas y subida a tiendas.
  • Cuentas de tienda: Apple Developer Program (99 US$ al año) y Google Play (25 US$ una vez), para publicar.

Qué incluye el código

pantallas
25
archivos en tu copia
397
líneas escritas para esta app
11,7 mil
componentes de UI listos
142

Textos de la app en inglés y vietnamita

Tecnologías

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

Del package.json de esta versión.

Sistema de diseño

Títulos
Fraunces
Texto
Fuente del sistema
  • Modo claro y oscuro
  • Liquid Glass
  • Botones de cápsula
  • Tarjetas planas

Configuración después del fork

Tu copia se abre con el asistente de IA que la creó. Sigue los pasos en orden: conecta en Server lo que pida un paso y luego envía 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 la 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 la 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 la 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 la 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 la 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.

Cómo usar esta plantilla

  1. Usa la plantilla para tener una copia editable, con su código fuente, en tu espacio de trabajo (Plantillas).
  2. Pide al asistente de IA los cambios que quieras, con tus propias palabras (Trabajar con el asistente).
  3. Prueba cada cambio en la vista previa en vivo o en tu teléfono (Vista previa).
  4. Con Creator o superior, compílala para iOS y Android y envíala a las tiendas (Resumen de la publicación).

Licencia y soporte

Licencia

La app creada para ti es tuya; el código de la plantilla sigue siendo de InspireUI y tiene licencia para usarse en tus apps (Términos › Nuestra propiedad intelectual).

Ayuda

  • Guías sobre plantillas, el asistente y la publicación.
  • Contactar con soporte desde Ayuda; respondemos normalmente en 1–2 días laborables.
  • En tu copia, pregunta al asistente de IA sobre cualquier pantalla o archivo.

Hecho por FluxNative

Política de soporte

Preguntas

¿Es gratis?

Copiar una plantilla gratis no cuesta nada, ni créditos; una Premium es un pago único por sitio web. Los cambios por chat y las compilaciones usan créditos.

¿Qué es mío?

Eres dueño de la app creada para ti. El código de la plantilla sigue siendo de InspireUI y tiene licencia para usarlo en tus apps (Terms › Our intellectual property).

¿Necesito saber programar?

No. Pide cambios al asistente con tus palabras; el código completo está ahí cuando lo quieras.

¿Incluye backend?

No. Una app completa indica el backend que necesita y conectas el tuyo en Server; un diseño usa datos de ejemplo.

¿Puedo cambiar el diseño?

Sí. La pestaña Design cambia el color de marca, los colores, las fuentes y las esquinas sin gastar créditos; el asistente cambia el resto.

¿Qué plan necesito para publicar?

Creator o superior compila y sube a las tiendas, con tus propias cuentas de Apple y Google. La app de una plantilla Premium compila en cualquier plan cuando su sitio web está conectado.

¿Puedo descargar el código?

Sí, con Download source o Push to GitHub, cuando tu espacio de trabajo haya comprado un plan, créditos o una plantilla de pago. La app de una plantilla Premium también necesita su sitio web conectado.

¿Y si se hizo con una versión anterior de FluxNative?

Tu copia funciona tal cual. Pide al asistente que la actualice a funciones nuevas, como idiomas y monedas de la app; es el último paso de configuración.

¿Lista para convertirla en tu app?

Empieza desde Mosaic Social Community App y cambia lo que quieras por chat. Tu copia incluye el código fuente completo.

Copia gratis. Sin tarjeta de crédito.

Taking a little longer than usual…

Loading FluxNative