npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lens-protocol/react-native-lens-ui-kit

v0.2.9

Published

React Native UI Kit for Lens Protocol

Downloads

99

Readme

React Native Lens UI Kit 🌿 (alpha)

React Native Lens

A React Native UI kit for Lens Protocol. Get started building with as little as 2 lines of code. Mix and match components to supercharge your mobile development workflow.

Example app codebase located here

You can also view a video tutorial of how to use the library here

Getting started 🚀

Prerequisites

First, install and configure React Native SVG and React Native Video into your Expo or bare React Native project.

Installation

npm install @lens-protocol/react-native-lens-ui-kit

Components 🍃

Feed

A feed of posts from Lens.

import { Feed } from '@lens-protocol/react-native-lens-ui-kit'

<Feed />

Options

profileId?: string
publicationsQuery?: PublicationsQuery
ListHeaderComponent?: React.FC
ListFooterComponent?: React.FC
signedInUser?: ProfileMetadata
feed?: ExtendedPublication[]
onCollectPress?: (publication: ExtendedPublication) => void
onCommentPress?: (publication: ExtendedPublication) => void
onMirrorPress?: (publication: ExtendedPublication) => void
onLikePress?: (publication: ExtendedPublication) => void
onProfileImagePress?: (publication: ExtendedPublication) => void
hideLikes?: boolean
hideComments?: boolean
hideMirrors?: boolean
hideCollects?: boolean
iconColor?: string
infiniteScroll?: boolean
onEndReachedThreshold?: number
styles?: FeedStyles
publicationStyles?: PublicationStyles

Styles

styles = StyleSheet.create({
  container: {
    flex: 1
  },
  loadingIndicatorStyle : {
    marginVertical: 20
  },
  noCommentsMessage: {
    margin: 20,
    fontSize: 14,
    fontWeight: '500'
  }
})

Query options for Feed

explorePublications (default)
explorePublications

getPublications
getPublications

getComments
getPublications

Profiles

A list of profiles

import { Profiles } from '@lens-protocol/react-native-lens-ui-kit'

<Profiles />

Options

onFollowPress?: (profile: ExtendedProfile, profiles: ExtendedProfile[]) => void
onProfilePress?: (profile: ExtendedProfile) => void
profileData?: ExtendedProfile[]
onEndReachedThreshold?: number
infiniteScroll?: boolean
profilesQuery?: ProfilesQuery
signedInUserAddress?: string

Query options for Profiles

exploreProfiles (default)
exploreProfiles

getFollowing
getFollowing

Profile

Renders an individual profile

import { Profile } from '@lens-protocol/react-native-lens-ui-kit'

<Profile
  handle="nader.lens"
  // or profileId={profileId}
  // or handle={profile}
/>

Options

profile: ExtendedProfile
ListHeaderComponent?: React.FC
ListFooterComponent?: React.FC
feed?: Publication[]
signedInUser?: ProfileMetadata
hideLikes?: boolean
hideComments?: boolean
hideMirrors?: boolean
hideCollects?: boolean
iconColor?: string
infiniteScroll?: boolean
onEndReachedThreshold?: number
headerStyles?: ProfileHeaderStyles
feedStyles?: FeedStyles
publicationStyles?: PublicationStyles
publicationsQuery?: publicationsQuery
onFollowingPress?: (profile: ExtendedProfile) => void
onFollowersPress?: (profile: ExtendedProfile) => void
onProfileImagePress?: (publication: ExtendedPublication) => void
onCollectPress?: (publication: ExtendedPublication) => void
onCommentPress?: (publication: ExtendedPublication) => void
onMirrorPress?: (publication: ExtendedPublication) => void
onLikePress?: (publication: ExtendedPublication) => void

Styles

publicationStyles = PublicationStyles
headerStyles = ProfileHeaderStyles
feedStyles = FeedStyles

Profile Header

Renders a profile header component.

import { ProfileHeader } from '@lens-protocol/react-native-lens-ui-kit'

<ProfileHeader
  handle="nader.lens"
  // or profileId={profileId}
  // or profile={profile}
/>

Options

profileId?: number
profile?: ExtendedProfile
onFollowingPress?: (profile: ExtendedProfile) => void
onFollowersPress?: (profile: ExtendedProfile) => void
styles?: ProfileHeaderStyles

Styles

ProfileHeaderStyles

Publication

Renders an individual publication.

import { Publication } from '@lens-protocol/react-native-lens-ui-kit'

<Publication
  publication={publication}
/>

Options

publication: ExtendedPublication
signedInUser?: ProfileMetadata
hideLikes?: boolean
hideComments?: boolean
hideMirrors?: boolean
hideCollects?: boolean
iconColor?: string
onCollectPress?: (publication: ExtendedPublication) => void
onCommentPress?:(publication: ExtendedPublication) => void
onMirrorPress?: (publication: ExtendedPublication) => void
onLikePress?: (publication: ExtendedPublication) => void
onProfileImagePress?: (publication: ExtendedPublication) => void
styles?: PublicationStyles

Styles

PublicationStyles

ProfileListItem

Renders a list item for a profile overview.

import { ProfileListItem } from '@lens-protocol/react-native-lens-ui-kit'

<ProfileListItem
  profile={profile}
/>

Options

profile: ExtendedProfile
onProfilePress?: (profile: ExtendedProfile) => void
onFollowPress?: (profile: ExtendedProfile) => void
isFollowing?: boolean
styles?: ProfileListItemStyles

Styles

ProfileListItemStyles

Search

A component for searching profiles and publications.

Options

searchType?: SearchType
styles?: SearchStyles
placeholder?: string
autoCapitalize?: AutoCapitalizeOptions
selectionColor?: string
ListFooterComponent?: React.FC
iconColor?: string
profilesQuery?: ProfilesQuery
publicationsQuery?: publicationsQuery
infiniteScroll?: boolean
onEndReachedThreshold?: number
publicationStyles?: PublicationStyles
signedInUser?: ProfileMetadata
hideLikes?: any
hideComments?: boolean
hideMirrors?: boolean
hideCollects?: boolean
onCollectPress?: (publication: ExtendedPublication) => void
onCommentPress?: (publication: ExtendedPublication) => void
onMirrorPress?: (publication: ExtendedPublication) => void
onLikePress?: (publication: ExtendedPublication) => void
onProfileImagePress?: (publication: ExtendedPublication) => void
onFollowPress?: (profile: ExtendedProfile, profiles: ExtendedProfile[]) => void
onProfilePress?: (profile: ExtendedProfile) => void

Usage

import { Search } from  '@lens-protocol/react-native-lens-ui-kit'

<Search />

// default is profile search, for publication search:
import { Search, SearchType } from  '@lens-protocol/react-native-lens-ui-kit'

<Search
  searchType={SearchType.publication}
/>

LensProvider

Allows you to pass global configurations to React Native Lens UI Kit.

Options

environment? = 'testnet' | 'mainnet' (default) | 'sandbox'
theme? = 'light' (default) | 'dark

Usage

import {
  LensProvider,
  Theme,
  Environment
} from '@lens-protocol/react-native-lens-ui-kit'

<LensProvider
  environment={Environment.mainnet}
  theme={Theme.dark}
>
  <App />
</LensProvider>

Roadmap

Currently this project is in Alpha.

Beta Roadmap

  • Custom styling / layout (temporary implementation in place, want to make it more granular)
  • More query options (easy contribution, help wanted)
  • Authentication
  • Custom components
  • Support video
  • Gallery view for Feed

V1 Roadmap

  • Improved theme-ing
  • Better TypeScript support
  • Support audio

Contribute

To run and develop with the project locally, do the following:

  1. Clone the repo:
git clone [email protected]:lens-protocol/react-native-lens-ui-kit.git
  1. Install the dependencies
npm install 

# or use yarn, pnpm, etc..
  1. Open watcher.js and configure the directory of your React Native project (destDir).

  2. Run the develop scripts:

npm run dev