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
First, install and configure React Native SVG.
npm install @lens-protocol/react-native-lens-ui-kitA feed of posts from Lens.
import { Feed } from '@lens-protocol/react-native-lens-ui-kit'
<Feed />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 = StyleSheet.create({
container: {
flex: 1
},
loadingIndicatorStyle : {
marginVertical: 20
},
noCommentsMessage: {
margin: 20,
fontSize: 14,
fontWeight: '500'
}
})
explorePublications (default)
explorePublications
getPublications
getPublications
getComments
getPublications
A list of profiles
import { Profiles } from '@lens-protocol/react-native-lens-ui-kit'
<Profiles />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 })
exploreProfiles (default)
exploreProfiles
getFollowing
getFollowing
Renders an individual profile
import { Profile } from '@lens-protocol/react-native-lens-ui-kit'
<Profile
profile={profile}
/>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 })
publicationStyles = PublicationStyles
headerStyles = ProfileHeaderStyles
feedStyles = FeedStyles
Renders a profile header component.
import { ProfileHeader } from '@lens-protocol/react-native-lens-ui-kit'
<ProfileHeader
profile={profile}
// or profileId={profileId}
/>profileId = null
profile = null
onFollowingPress = profile => console.log({ profile })
onFollowersPress = profile => console.log({ profile })
Renders an individual publication.
import { Publication } from '@lens-protocol/react-native-lens-ui-kit'
<Publication
publication={publication}
/>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 })
Renders a list item for a profile overview.
import { ProfileListItem } from '@lens-protocol/react-native-lens-ui-kit'
<ProfileListItem
profile={profile}
/>profile (required)
isFollowing
onProfilePress
onFollowPress
Currently this project is in Alpha.
- 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
- Theming
- More rich content types (video, gif, audio)
- Better TypeScript support
- Support audio
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent