{"id":13767292,"url":"https://github.com/lens-protocol/react-native-lens-ui-kit","last_synced_at":"2025-04-05T13:09:55.950Z","repository":{"id":64340478,"uuid":"567003530","full_name":"lens-protocol/react-native-lens-ui-kit","owner":"lens-protocol","description":"Lens UI Kit for React Native","archived":false,"fork":false,"pushed_at":"2023-08-06T12:20:07.000Z","size":1445,"stargazers_count":500,"open_issues_count":4,"forks_count":50,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T12:11:20.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lens-protocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-11-16T21:36:59.000Z","updated_at":"2025-03-22T01:50:52.000Z","dependencies_parsed_at":"2024-01-11T23:43:08.076Z","dependency_job_id":"4442bec0-ebf2-44a1-b65a-1dfee6d99a15","html_url":"https://github.com/lens-protocol/react-native-lens-ui-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lens-protocol%2Freact-native-lens-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lens-protocol%2Freact-native-lens-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lens-protocol%2Freact-native-lens-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lens-protocol%2Freact-native-lens-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lens-protocol","download_url":"https://codeload.github.com/lens-protocol/react-native-lens-ui-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T16:01:07.072Z","updated_at":"2025-04-05T13:09:55.922Z","avatar_url":"https://github.com/lens-protocol.png","language":"TypeScript","funding_links":[],"categories":["Development"],"sub_categories":["Libraries \u0026 Tools"],"readme":"# React Native Lens UI Kit 🌿 (alpha)\n\n![React Native Lens](https://arweave.net/3COKWStwD_qjTpZNRGUxKoiyjtyZFqXMyYF-Tekk7zo)\n\nA React Native UI kit for [Lens Protocol](https://lens.xyz/). Get started building with as little as 2 lines of code. Mix and match components to supercharge your mobile development workflow.\n\nExample app codebase located [here](https://github.com/dabit3/dabit3-react-native-lens-example)\n\n\u003e You can also view a video tutorial of how to use the library [here](https://www.youtube.com/watch?v=qs6OE9kef6I)\n\n## Getting started 🚀\n\n### Prerequisites\n\nFirst, install and configure [React Native SVG](https://github.com/software-mansion/react-native-svg) and [React Native Video](https://github.com/react-native-video/react-native-video) into your Expo or bare React Native project.\n\n### Installation\n\n```sh\nnpm install @lens-protocol/react-native-lens-ui-kit\n```\n\n# Components 🍃\n\n- [Feed](#feed)\n- [Profiles](#profiles)\n- [Profile](#profile)\n- [Profile Header](#profile-header)\n- [Publication](#publication)\n- [ProfileListItem](#profilelistitem)\n- [Search](#search)\n- [LensProvider](#lensprovider)\n\n## Feed\n\nA feed of posts from Lens.\n\n```tsx\nimport { Feed } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cFeed /\u003e\n```\n\n### Options\n\n```\nprofileId?: string\npublicationsQuery?: PublicationsQuery\nListHeaderComponent?: React.FC\nListFooterComponent?: React.FC\nsignedInUser?: ProfileMetadata\nfeed?: ExtendedPublication[]\nonCollectPress?: (publication: ExtendedPublication) =\u003e void\nonCommentPress?: (publication: ExtendedPublication) =\u003e void\nonMirrorPress?: (publication: ExtendedPublication) =\u003e void\nonLikePress?: (publication: ExtendedPublication) =\u003e void\nonProfileImagePress?: (publication: ExtendedPublication) =\u003e void\nhideLikes?: boolean\nhideComments?: boolean\nhideMirrors?: boolean\nhideCollects?: boolean\niconColor?: string\ninfiniteScroll?: boolean\nonEndReachedThreshold?: number\nstyles?: FeedStyles\npublicationStyles?: PublicationStyles\n```\n\n### Styles\n\n```\nstyles = StyleSheet.create({\n  container: {\n    flex: 1\n  },\n  loadingIndicatorStyle : {\n    marginVertical: 20\n  },\n  noCommentsMessage: {\n    margin: 20,\n    fontSize: 14,\n    fontWeight: '500'\n  }\n})\n```\n\n### Query options for `Feed`\n\n__explorePublications (default)__    \n[explorePublications](./src/graphql/explorePublications.graphql)\n\n__getPublications__    \n[getPublications](./src/graphql/getPublications.graphql)\n\n__getComments__    \n[getPublications](./src/graphql/getPublications.graphql)\n\n## Profiles\n\nA list of profiles\n\n```tsx\nimport { Profiles } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cProfiles /\u003e\n```\n\n### Options\n\n```\nonFollowPress?: (profile: ExtendedProfile, profiles: ExtendedProfile[]) =\u003e void\nonProfilePress?: (profile: ExtendedProfile) =\u003e void\nprofileData?: ExtendedProfile[]\nonEndReachedThreshold?: number\ninfiniteScroll?: boolean\nprofilesQuery?: ProfilesQuery\nsignedInUserAddress?: string\n```\n\n### Query options for `Profiles`\n\n__exploreProfiles (default)__    \n[exploreProfiles](./src/graphql/exploreProfiles.graphql)\n\n__getFollowing__    \n[getFollowing](./src/graphql/getFollowing.graphql)\n\n\n## Profile\n\nRenders an individual profile\n\n```tsx\nimport { Profile } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cProfile\n  handle=\"nader.lens\"\n  // or profileId={profileId}\n  // or handle={profile}\n/\u003e\n```\n\n### Options\n\n```\nprofile: ExtendedProfile\nListHeaderComponent?: React.FC\nListFooterComponent?: React.FC\nfeed?: Publication[]\nsignedInUser?: ProfileMetadata\nhideLikes?: boolean\nhideComments?: boolean\nhideMirrors?: boolean\nhideCollects?: boolean\niconColor?: string\ninfiniteScroll?: boolean\nonEndReachedThreshold?: number\nheaderStyles?: ProfileHeaderStyles\nfeedStyles?: FeedStyles\npublicationStyles?: PublicationStyles\npublicationsQuery?: publicationsQuery\nonFollowingPress?: (profile: ExtendedProfile) =\u003e void\nonFollowersPress?: (profile: ExtendedProfile) =\u003e void\nonProfileImagePress?: (publication: ExtendedPublication) =\u003e void\nonCollectPress?: (publication: ExtendedPublication) =\u003e void\nonCommentPress?: (publication: ExtendedPublication) =\u003e void\nonMirrorPress?: (publication: ExtendedPublication) =\u003e void\nonLikePress?: (publication: ExtendedPublication) =\u003e void\n```\n\n### Styles\npublicationStyles = [PublicationStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L137)     \nheaderStyles = [ProfileHeaderStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L157)     \nfeedStyles = [FeedStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L188)\n\n## Profile Header\n\nRenders a profile header component.\n\n```tsx\nimport { ProfileHeader } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cProfileHeader\n  handle=\"nader.lens\"\n  // or profileId={profileId}\n  // or profile={profile}\n/\u003e\n```\n\n### Options\n\n```\nprofileId?: number\nprofile?: ExtendedProfile\nonFollowingPress?: (profile: ExtendedProfile) =\u003e void\nonFollowersPress?: (profile: ExtendedProfile) =\u003e void\nstyles?: ProfileHeaderStyles\n```\n\n### Styles \n[ProfileHeaderStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L157)\n\n## Publication\n\nRenders an individual publication.\n\n```tsx\nimport { Publication } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cPublication\n  publication={publication}\n/\u003e\n```\n\n### Options\n\n```\npublication: ExtendedPublication\nsignedInUser?: ProfileMetadata\nhideLikes?: boolean\nhideComments?: boolean\nhideMirrors?: boolean\nhideCollects?: boolean\niconColor?: string\nonCollectPress?: (publication: ExtendedPublication) =\u003e void\nonCommentPress?:(publication: ExtendedPublication) =\u003e void\nonMirrorPress?: (publication: ExtendedPublication) =\u003e void\nonLikePress?: (publication: ExtendedPublication) =\u003e void\nonProfileImagePress?: (publication: ExtendedPublication) =\u003e void\nstyles?: PublicationStyles\n```\n\n\n### Styles \n[PublicationStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L137)\n\n## ProfileListItem\n\nRenders a list item for a profile overview.\n\n```tsx\nimport { ProfileListItem } from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cProfileListItem\n  profile={profile}\n/\u003e\n```\n\n### Options\n\n```\nprofile: ExtendedProfile\nonProfilePress?: (profile: ExtendedProfile) =\u003e void\nonFollowPress?: (profile: ExtendedProfile) =\u003e void\nisFollowing?: boolean\nstyles?: ProfileListItemStyles\n```\n\n### Styles    \n[ProfileListItemStyles](https://github.com/lens-protocol/react-native-lens-ui-kit/blob/main/src/types.ts#L173)\n\n## Search\n\nA component for searching profiles and publications.\n\n### Options\n\n```\nsearchType?: SearchType\nstyles?: SearchStyles\nplaceholder?: string\nautoCapitalize?: AutoCapitalizeOptions\nselectionColor?: string\nListFooterComponent?: React.FC\niconColor?: string\nprofilesQuery?: ProfilesQuery\npublicationsQuery?: publicationsQuery\ninfiniteScroll?: boolean\nonEndReachedThreshold?: number\npublicationStyles?: PublicationStyles\nsignedInUser?: ProfileMetadata\nhideLikes?: any\nhideComments?: boolean\nhideMirrors?: boolean\nhideCollects?: boolean\nonCollectPress?: (publication: ExtendedPublication) =\u003e void\nonCommentPress?: (publication: ExtendedPublication) =\u003e void\nonMirrorPress?: (publication: ExtendedPublication) =\u003e void\nonLikePress?: (publication: ExtendedPublication) =\u003e void\nonProfileImagePress?: (publication: ExtendedPublication) =\u003e void\nonFollowPress?: (profile: ExtendedProfile, profiles: ExtendedProfile[]) =\u003e void\nonProfilePress?: (profile: ExtendedProfile) =\u003e void\n```\n\n### Usage\n\n```tsx\nimport { Search } from  '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cSearch /\u003e\n\n// default is profile search, for publication search:\nimport { Search, SearchType } from  '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cSearch\n  searchType={SearchType.publication}\n/\u003e\n```\n\n## LensProvider\n\nAllows you to pass global configurations to React Native Lens UI Kit.\n\n### Options\n\n```\nenvironment? = 'testnet' | 'mainnet' (default) | 'sandbox'\ntheme? = 'light' (default) | 'dark\n```\n\n### Usage\n\n```tsx\nimport {\n  LensProvider,\n  Theme,\n  Environment\n} from '@lens-protocol/react-native-lens-ui-kit'\n\n\u003cLensProvider\n  environment={Environment.mainnet}\n  theme={Theme.dark}\n\u003e\n  \u003cApp /\u003e\n\u003c/LensProvider\u003e\n```\n\n# Roadmap\n\nCurrently this project is in Alpha.\n\n### Beta Roadmap\n\n- Custom styling / layout (temporary implementation in place, want to make it more granular)\n- More query options (easy contribution, help wanted)\n- Authentication\n- Custom components\n- Support video\n- Gallery view for Feed\n\n### V1 Roadmap\n\n- Improved theme-ing\n- Better TypeScript support\n- Support audio\n\n### Contribute\n\nTo run and develop with the project locally, do the following:\n\n1. Clone the repo:\n\n```sh\ngit clone git@github.com:lens-protocol/react-native-lens-ui-kit.git\n```\n\n2. Install the dependencies\n\n```sh\nnpm install \n\n# or use yarn, pnpm, etc..\n```\n\n3. Open `watcher.js` and configure the directory of your React Native project (`destDir`).\n\n4. Run the develop scripts:\n\n```sh\nnpm run dev\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flens-protocol%2Freact-native-lens-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flens-protocol%2Freact-native-lens-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flens-protocol%2Freact-native-lens-ui-kit/lists"}