expo-post-component

A lightweight, flexible React Native post feed and post component built for quickly rendering social-style feeds in mobile apps.

This package includes a ready-to-use Feed component for displaying lists of posts and a PostComponent for rendering individual posts. It’s designed to be easy to integrate, customizable, and framework-agnostic so you can plug it into your own backend, loaders, and state management.

I originally built this while working on my own projects and decided to open-source it so other developers can use it as well.

I'm a freelance React Native developer, and if you end up using this package:

Feel free to open issues if you find bugs

Submit PRs if you'd like to improve something

Reach out if you have feature suggestions

The goal is to keep this component simple, reusable, and easy to customize for any app that needs a social feed.

Installation

npm install @zackrypaul/post-component
# or
yarn add @zackrypaul/post-component

Usage

Feed Component

Render a full feed of posts:

import { Feed } from "@zackrypaul/post-component";

<Feed
  posts={postsArray}
  userLoader={fetchUserById}
  postLoader={fetchPostById}
  onPressPost={(post) => {
    /* handle post press */
  }}
  onPressLike={(post) => {
    /* handle like */
  }}
  onPressComment={(post) => {
    /* handle comment */
  }}
  styles={{
    feedContainer: { backgroundColor: "#fff" },
    feedContentContainer: { paddingTop: 20 },
    posts: {
      container: { marginVertical: 8 },
      header: { imageHeight: 40, borderColor: "#333" },
      textContent: { textStyles: { color: "#222" } },
    },
  }}
/>;

Render a single post:

import { PostComponent } from "@zackrypaul/post-component";

<PostComponent
  post={postObject}
  userLoader={fetchUserById}
  postLoader={fetchPostById}
  onPressPost={(post) => {
    /* handle post press */
  }}
  onPressLike={(post) => {
    /* handle like */
  }}
  onPressComment={(post) => {
    /* handle comment */
  }}
  styles={{
    container: { backgroundColor: "#f9f9f9" },
    header: { imageHeight: 40, borderColor: "#333" },
    textContent: { textStyles: { color: "#222" } },
  }}
/>;

Component Props

Feed

| Prop | Type | Required | Description | | ---------------- | -------------------------------- | -------- | --------------------------------- | | posts | array | Yes | Array of post objects | | userLoader | function(userId) => Promise | No | Fetch user data by userId | | postLoader | function(postId) => Promise | No | Fetch post data by postId | | onPressPost | function(post) | No | Called when a post is pressed | | onPressLike | function(post) | No | Called when like is pressed | | onPressComment | function(post) | No | Called when comment is pressed | | onPressQuotePost | function(post) | No | Called when quote post is pressed | | onPressUser | function(user) | No | Called when user is pressed | | onMenuPress | function(post) | No | Called when menu is pressed | | styles | FeedStyleProps | No | Custom styles for feed/posts |

PostComponent

| Prop | Type | Required | Description | | ---------------- | -------------------------------- | -------- | --------------------------------- | | post | object (PostType) | Yes | Post object | | userLoader | function(userId) => Promise | No | Fetch user data by userId | | postLoader | function(postId) => Promise | No | Fetch post data by postId | | onPressPost | function(post) | No | Called when post is pressed | | onPressLike | function(post) | No | Called when like is pressed | | onPressComment | function(post) | No | Called when comment is pressed | | onPressQuotePost | function(post) | No | Called when quote post is pressed | | onPressUser | function(user) | No | Called when user is pressed | | onMenuPress | function(post) | No | Called when menu is pressed | | styles | PostStyleProps | No | Custom styles for post sections | | ContentComponent | ReactNode | No | Custom content component |

Style Customization

You can customize styles for Feed and PostComponent using the styles prop. See below for structure:

FeedStyleProps

• feedContainer: Style for the feed container
• feedContentContainer: Style for the feed content container
• posts: PostStyleProps for each post

PostStyleProps

• container: Style for the post container
• header: Header styles (imageHeight, borderColor, etc.)
• textContent: Styles for post text (textStyles, mentionStyles, linkStyles)
• quotePost: Styles for quoted post section

Example:

styles={{
  container: { backgroundColor: "#f9f9f9" },
  header: { imageHeight: 40, borderColor: "#333" },
  textContent: { textStyles: { color: "#222" } }
}}

No Provider Required

You do not need to add any providers to your app. All context is handled internally.

Development

1. Clone the repository
2. Install dependencies: npm install
3. Build the package: npm run build

License

MIT