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.

Getting started 🚀

Prerequisites

First, install and configure React Native SVG.

Installation

npm install react-native-lens

Components 🍃

Feed

A feed of posts from Lens.

import { Feed } from 'react-native-lens'

<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 'react-native-lens'

<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 'react-native-lens'

<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 'react-native-lens'

<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 'react-native-lens'

<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 'react-native-lens'

<ProfileListItem
  profile={profile}
/>

Default props

profile (required)
isFollowing
onProfilePress
onFollowPress

Styles

ProfileListItemStyles

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
• Migrate the example application to Expo (easy contribution, help wanted)
• Custom components

V1 Roadmap

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

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.git

2. Install the dependencies

npm install 

# or use yarn, pnpm, etc..

3. Open watcher.js and configure the directory of your React Native project (destDir).

4. Run the develop scripts:

npm run dev