/react-native-lens-ui-kit

Lens UI Kit for React Native

Primary LanguageTypeScript

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

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)
  • 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 git

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:

  1. Clone the repo:
git clone git@github.com: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