https://github.com/cawfree/react-native-view-evaluator
A React Native <Component /> which can be used to determine the post-layout configuration of a <View />.
https://github.com/cawfree/react-native-view-evaluator
before evaluate layout react react-native size view
Last synced: about 1 year ago
JSON representation
A React Native <Component /> which can be used to determine the post-layout configuration of a <View />.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-view-evaluator
- Owner: cawfree
- License: mit
- Created: 2019-10-04T09:41:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-16T08:48:15.000Z (over 6 years ago)
- Last Synced: 2025-03-22T04:32:06.268Z (about 1 year ago)
- Topics: before, evaluate, layout, react, react-native, size, view
- Language: JavaScript
- Size: 684 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-view-evaluator
A React Native `` which can be used to determine the post-layout configuration of a ``.
## What's the point?
Sometimes 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 [``](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 `` which resizes to fill your content is out of the question.
Until now at least.
## 🚀 Getting Started
Using [`npm`]():
```sh
npm install --save react-native-view-evaluator
```
Using [`yarn`]():
```sh
yarn add react-native-view-evaluator
```
## ✍️ Example
Below, we'll create a `` position in the centre of the screen. This will scale to fit the largest rendered ``.
```javascript
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, FlatList, Text, Dimensions } from 'react-native';
import Evaluate from 'react-native-view-evaluator';
const { width } = Dimensions
.get('window');
const App = ({ strings }) => (
{
const height = layouts
.reduce(
(r, { height }) => Math.max(r, height),
Number.NEGATIVE_INFINITY,
) + 10;
return (
(
item
)}
horizontal
pagingEnabled
/>
);
}}
>
{strings
.map(
(s, i) => (
),
)}
);
App.propTypes = {
strings: PropTypes.arrayOf(
PropTypes.string,
),
};
App.defaultProps = {
strings: [
'This is a test string.',
'This is also a test string, albeit a slightly longer one.',
'We don\'t know how big these strings are going to be at render time.',
'Which means we couldn\'t wrap them in to scale to the maximum height',
'This is the biggest string of all. This is useful to evaluate whether the rendered is a giant box that has mostly empty space around all of the pages but this one.',
],
};
export default App;
```
As you can see, once the size of each `` has been calculated, they each get passed as an array to the `renderEvaluated` method, alongside a matching array of the resultan layouts.
## ⚠️ Caveats
This 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.
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)
