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
You can also view a video tutorial of how to use the library here
Getting started π
Prerequisites
First, install and configure React Native SVG.
Installation
npm install @lens-protocol/react-native-lens-ui-kitComponents π
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
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
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
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:
- Clone the repo:
git clone [email protected]:lens-protocol/react-native-lens-ui-kit.git- Install the dependencies
npm install
# or use yarn, pnpm, etc..-
Open
watcher.jsand configure the directory of your React Native project (destDir). -
Run the develop scripts:
npm run dev