React Native Lens UI Kit 🌿 (alpha)

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

Getting started 🚀

Prerequisites

First, install and configure React Native SVG.

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 />

Default props

query = {
  name: "explorePublications",
  publicationTypes: ["POST", "COMMENT", "MIRROR"],
  sortCriteria: "LATEST",
  limit: 20
}
ListHeaderComponent = null
ListFooterComponent = null
feed = null
signedInUser = null
hideLikes = false
hideComments = false
hideMirrors = false
hideCollects = false
infiniteScroll = true
onEndReachedThreshold = .65

# Functions
onCollectPress = publication => console.log({ publication })
onCommentPress = publication => console.log({ publication })
onMirrorPress = publication => console.log({ publication })
onLikePress = publication => console.log({ publication })
onProfileImagePress = profile => console.log({ profile })

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 />

Default Props

query = {
  name: 'getFollowing',
  sortCriteria: 'MOST_FOLLOWERS',
  limit: 25
}
profileData = null
onEndReachedThreshold = .7
infiniteScroll = true

# Functions
onFollowPress = profile => console.log({ profile })
onProfilePress = profile => console.log({ profile })

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
  profile={profile}
/>

Default props

profile (required)
ListHeaderComponent = null
ListFooterComponent = null
feed = null
signedInUser = null
hideLikes = false
hideComments = false
hideMirrors = false
hideCollects = false
infiniteScroll = true
onEndReachedThreshold = .65
onProfileImagePress

# Functions
onFollowingPress = profile => console.log({ profile })
onFollowersPress = profile => console.log({ profile })
onProfileImagePress = publication => console.log({ publication })
onCollectPress = publication => console.log({ publication })
onCommentPress = publication => console.log({ publication })
onMirrorPress = publication => console.log({ publication })
onLikePress = publication => console.log({ publication })

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
  profile={profile}
  // or profileId={profileId}
/>

Default props

profileId = null
profile = null
onFollowingPress = profile => console.log({ profile })
onFollowersPress = profile => console.log({ profile })

Styles

ProfileHeaderStyles

Publication

Renders an individual publication.

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

<Publication
  publication={publication}
/>

Default props

publication = undefined (required)
signedInUser = null
hideLikes = false
hideComments = false
hideMirrors = false
hideCollects = false

# Functions
onCollectPress = publication => console.log({ publication })
onCommentPress = publication => console.log({ publication })
onMirrorPress= publication => console.log({ publication })
onLikePress = publication => console.log({ publication })
onProfileImagePress = publication => console.log({ publication })

Styles

PublicationStyles

ProfileListItem

Renders a list item for a profile overview.

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

<ProfileListItem
  profile={profile}
/>

Default props

profile (required)
isFollowing
onProfilePress
onFollowPress

Styles

ProfileListItemStyles

Roadmap

Currently this project is in Alpha.

Beta Roadmap

Configure development or production endpoint (Mainnet or Mumbai)
Search
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
Support gifs
Gallery view for Feed

V1 Roadmap

Theming
More rich content types (video, gif, audio)
Better TypeScript support
Support audio

Contribute

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

Clone the repo:

git clone git@github.com:lens-protocol/react-native-lens-ui-kit.git

Install the dependencies

npm install 

# or use yarn, pnpm, etc..

Open watcher.js and configure the directory of your React Native project (destDir).
Run the develop scripts:

npm run dev

0xMycaleum/react-native-lens-ui-kit

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages