{"id":14974373,"url":"https://github.com/meharbhutta/react-native-fb-collage","last_synced_at":"2025-10-27T06:32:18.147Z","repository":{"id":57336940,"uuid":"183064791","full_name":"meharbhutta/react-native-fb-collage","owner":"meharbhutta","description":"Image Grid or Collage component for React Native","archived":false,"fork":false,"pushed_at":"2019-12-07T08:03:10.000Z","size":657,"stargazers_count":12,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-28T18:43:17.192Z","etag":null,"topics":["fb-collage","reacgt-native","react-native-app","react-native-collage","react-native-component","react-native-components","react-native-image","react-native-image-collage","react-native-image-grid"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meharbhutta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2019-04-23T17:33:32.000Z","updated_at":"2021-11-30T23:16:33.000Z","dependencies_parsed_at":"2022-09-12T11:03:17.143Z","dependency_job_id":null,"html_url":"https://github.com/meharbhutta/react-native-fb-collage","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-fb-collage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-fb-collage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-fb-collage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meharbhutta%2Freact-native-fb-collage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meharbhutta","download_url":"https://codeload.github.com/meharbhutta/react-native-fb-collage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219861742,"owners_count":16555987,"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":["fb-collage","reacgt-native","react-native-app","react-native-collage","react-native-component","react-native-components","react-native-image","react-native-image-collage","react-native-image-grid"],"created_at":"2024-09-24T13:50:28.515Z","updated_at":"2025-10-27T06:32:17.654Z","avatar_url":"https://github.com/meharbhutta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-fb-collage\nImage Grid or Collage component for React Native\n\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=meharbhutta\"\u003e\n    \u003cimg \n        src=\"https://img.shields.io/twitter/follow/meharbhutta.svg?style=social\u0026logo=twitter\"\n        alt=\"follow on Twitter\"\n    \u003e\n\u003c/a\u003e\n\n## NPM\n\n- stable release version: ![version](https://img.shields.io/badge/version-1.0.7-blue.svg?cacheSeconds=2592000)\n- package downloads: ![downloads](https://img.shields.io/badge/downloads-22%2Fweek-brightgreen.svg?cacheSeconds=2592000)\n- [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\n## Show Cases\n\n| **IOS** | **Android** |\n| :---------------------------------- | :------------------------------------ |\n| ![](https://raw.githubusercontent.com/meharbhutta/react-native-fb-collage/master/demo/screenshot-ios.png) | ![](https://raw.githubusercontent.com/meharbhutta/react-native-fb-collage/master/demo/screenshot-android.png) |\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm i react-native-fb-collage --save\n```\n\n### Basic Usage\n\n- Install react-native-cli first\n\n```bash\n$ npm install -g react-native-cli\n```\n\n### Note: [GUIDE](https://facebook.github.io/react-native/docs/getting-started)\n\n- Initialization of a react-native project\n\n```bash\n$ react-native init AwesomeProject\n```\n\n- Then, edit `AwesomeProject/App.js`, like this:\n\n```typescript\nimport { View } from 'react-native';\nimport FBCollage from 'react-native-fb-collage';\n\nexport default class App extends React.Component {\n    render: function() {\n        return (\n            \u003cView \n                style={{ \n                    flex: 1, \n                    justifyContent: \"center\" \n                }}\n            \u003e\n                \u003cFBCollage \n                  images={[\n                      // static image using require.\n                      //require('../assets/image-file.ext')\n                      //OR\n                      //fetch from server using url.\n                      //'https://imageURL...'\n                      //for Example\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png',\n                      'https://www.inovex.de/blog/wp-content/uploads/2018/03/react-native-800x450.png'\n                  ]}\n                  imageOnPress={() =\u003e {}}\n                /\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n### Props\n\n| parameter | type  | required | description | default |\n| :--------------------- | :------------------------------------------------------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |\n| images | array | yes | The array of image sources of \u003cbr\u003e require('../image-file') \u003cbr\u003e or \u003cbr\u003e 'imageURL' \u003cbr\u003e or \u003cbr\u003e both    |  |\n| imageOnPress | function\u003cbr\u003e`(index, images) =\u003e void` | no | The callback for image on press listener | `() =\u003e {}` |\n| width | number | no | The width of the view | `357` |\n| height            | number                                                                                 | no       | The height of the view                                                                                                                                                                | `200`                                                     |\n| borderRadius                  | number                                                                                 | no       | The border radius of the images                                                                                                                                                                                                                 | `12`                                                       |\n| spacing        | number                                                  | no       | The spacing between the images and the view                                                                                                                                                                                                                 | auto                                                      |\n| resizeMode          | string                                        | no       | [visit me](https://facebook.github.io/react-native/docs/image#resizemode) for resize mode                                                                                                                                                                                    | `cover`                                              |\n| style         | object                                              | no       | To override the main view style                                                                                                                                                                                                      | default                                                |\n| overlayStyle               | object                                              | no       | To override the text view overlay style                                                                                                                                                                                                              | default                                                |\n| textStyle                 | object                | no         |       To override the text style                                                                                             | default      |\n## Development pattern\n\n### Step 1, run TS listener\n\nAfter clone this repo, then:\n\n```bash\nnpm install\nnpm start\n```\n\n### Step 2, run demo\n\n```bash\ncd demo\nnpm install\nreact-native run-android (For android)\nreact-native run-ios (For ios)\n```\n\n#### In case of any issue follow the [GUIDE](https://facebook.github.io/react-native/docs/getting-started).\n\n### Supported React Native Versions  \n\nThis project aims to support any version of React Native.\n\nIf you require new features or bug fixes for older versions you can fork this project.\n\n### Credits\n\nThe idea for this modules came from facebook collage.\n\n### Licenses\n\nFBCollage - MIT © MeharBhutta\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeharbhutta%2Freact-native-fb-collage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeharbhutta%2Freact-native-fb-collage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeharbhutta%2Freact-native-fb-collage/lists"}