{"id":18369878,"url":"https://github.com/cawfree/react-native-view-evaluator","last_synced_at":"2025-04-06T18:32:37.300Z","repository":{"id":57341287,"uuid":"212781824","full_name":"cawfree/react-native-view-evaluator","owner":"cawfree","description":"A React Native \u003cComponent /\u003e which can be used to determine the post-layout configuration of a \u003cView /\u003e.","archived":false,"fork":false,"pushed_at":"2019-12-16T08:48:15.000Z","size":700,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T04:32:06.268Z","etag":null,"topics":["before","evaluate","layout","react","react-native","size","view"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-04T09:41:05.000Z","updated_at":"2022-05-17T08:54:03.000Z","dependencies_parsed_at":"2022-09-06T06:11:33.532Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/react-native-view-evaluator","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/cawfree%2Freact-native-view-evaluator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-view-evaluator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-view-evaluator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Freact-native-view-evaluator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/react-native-view-evaluator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531356,"owners_count":20953937,"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":["before","evaluate","layout","react","react-native","size","view"],"created_at":"2024-11-05T23:32:52.842Z","updated_at":"2025-04-06T18:32:36.423Z","avatar_url":"https://github.com/cawfree.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/cawfree"],"categories":[],"sub_categories":[],"readme":"# react-native-view-evaluator\nA React Native `\u003cComponent /\u003e` which can be used to determine the post-layout configuration of a `\u003cView /\u003e`.\n\n## What's the point?\nSometimes in React Native, it's important to know the dimensions of the content you're going to render, before you actually render it! Take the [`\u003cFlatList/\u003e`](https://facebook.github.io/react-native/docs/flatlist.html); it's important to know your `itemWidth` before you render the content, and it's impossibe to use layout `flex` to fill content; so a `\u003cFlatList/\u003e` which resizes to fill your content is out of the question.\n\nUntil now at least.\n\n## 🚀 Getting Started\n\nUsing [`npm`]():\n\n```sh\nnpm install --save react-native-view-evaluator\n```\n\nUsing [`yarn`]():\n\n```sh\nyarn add react-native-view-evaluator\n```\n\n## ✍️ Example\n\nBelow, we'll create a `\u003cFlatList /\u003e` position in the centre of the screen. This will scale to fit the largest rendered `\u003cView /\u003e`.\n\n```javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { View, StyleSheet, FlatList, Text, Dimensions } from 'react-native';\nimport Evaluate from 'react-native-view-evaluator';\n\nconst { width } = Dimensions\n  .get('window');\n\nconst App = ({ strings }) =\u003e (\n  \u003cView\n    style={[\n      StyleSheet.absoluteFill,\n      {\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    ]}\n  \u003e\n    \u003cEvaluate \n      renderEvaluated={(arrayOfChildren, layouts) =\u003e {\n        const height = layouts\n          .reduce(\n            (r, { height }) =\u003e Math.max(r, height),\n            Number.NEGATIVE_INFINITY,\n          ) + 10;\n        return (\n          \u003cView\n            style={{\n              width,\n              height,\n            }}\n          \u003e\n            \u003cFlatList\n              itemWidth={width}\n              style={[\n                {\n                  width,\n                  height,\n                  borderWidth: 1,\n                },\n              ]}\n              data={arrayOfChildren}\n              renderItem={({ item, index }) =\u003e (\n                item\n              )}\n              horizontal\n              pagingEnabled\n            /\u003e\n          \u003c/View\u003e \n        );\n      }}\n    \u003e\n      {strings\n        .map(\n          (s, i) =\u003e (\n            \u003cText\n              key={i}\n              style={{\n                width,\n                height: null,\n              }}\n              children={s}\n            /\u003e\n          ),\n        )}\n    \u003c/Evaluate\u003e\n  \u003c/View\u003e\n);\n\nApp.propTypes = {\n  strings: PropTypes.arrayOf(\n    PropTypes.string,\n  ),\n};\n\nApp.defaultProps = {\n  strings: [\n    'This is a test string.',\n    'This is also a test string, albeit a slightly longer one.',\n    'We don\\'t know how big these strings are going to be at render time.',\n    'Which means we couldn\\'t wrap them in \u003cFlatList /\u003e to scale to the maximum height',\n    'This is the biggest string of all. This is useful to evaluate whether the rendered \u003cFlatList/\u003e is a giant box that has mostly empty space around all of the pages but this one.',\n  ],\n};\n\nexport default App;\n```\n\nAs you can see, once the size of each `\u003cView /\u003e` has been calculated, they each get passed as an array to the `renderEvaluated` method, alongside a matching array of the resultan layouts.\n\n\n## ⚠️ Caveats\nThis is only really designed for simple components that do not do anything intense, or stateful with respect to your application state, during `componentDidMount`, i.e. an API call. This is because the components are effectively rendered first, before being passed into the `renderEvaluated` callback. You won't see the components during this operation, but they _will_ act as if they are visible.\n\n## ✌️ License\n[MIT](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/cawfree\"\u003e\n    \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy @cawfree a coffee\" width=\"232\" height=\"50\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-view-evaluator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Freact-native-view-evaluator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Freact-native-view-evaluator/lists"}