From 41039ac77547d0d96b41ca19585d9fdd0fc7ff5f Mon Sep 17 00:00:00 2001 From: Guto Sanches Date: Tue, 7 May 2019 13:38:47 -0300 Subject: [PATCH 1/2] Expose renderAheadOffset prop --- README.md | 1 + src/EmojiInput.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index eaeaa4b..fa9fb05 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ npx babel-node scripts/compile.js | `loggingFunction` | Logging function to be called when applicable.\* | function | none | | `verboseLoggingFunction` | Same as loggingFunction but also provides strategy used to determine failed search | boolean | false | | `filterFunctions` | Array of functions that are used to limit which emojis should be rendered. Each of this function will be invoked with single parameter being `emoji` data and if every function returns `true` for `emoji` then this emoji will be included and displayed.| Array(function) | [] | +| `renderAheadOffset` | Specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, keeping this as low as possible should be the intent. Higher values also increase re-render compute | number | 1500 | > \* When the search function yields this function is called. Additionally when the user clears the query box this function is called with the previous longest query since the last time the query box was empty. By default the function is called with one parameter, a string representing the query. If the verbose logging function parameter is set to true the function is called with a second parameter that is a string specifying why the function was called (either 'emptySearchResult' or 'longestPreviousQuery'). ## Usage diff --git a/src/EmojiInput.js b/src/EmojiInput.js index f45dc33..28d01a4 100644 --- a/src/EmojiInput.js +++ b/src/EmojiInput.js @@ -438,7 +438,7 @@ class EmojiInput extends React.PureComponent { render() { const { selectedEmoji, offsetY } = this.state; - const { enableSearch, width } = this.props; + const { enableSearch, width, renderAheadOffset } = this.props; return ( Date: Thu, 9 May 2019 16:20:21 -0300 Subject: [PATCH 2/2] renderAheadOffset: Add to example, proptypes and improve readme --- README.md | 2 +- example/src/EmojiInput.js | 10 ++++++---- src/EmojiInput.js | 4 ++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fa9fb05..f378c78 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ npx babel-node scripts/compile.js | `loggingFunction` | Logging function to be called when applicable.\* | function | none | | `verboseLoggingFunction` | Same as loggingFunction but also provides strategy used to determine failed search | boolean | false | | `filterFunctions` | Array of functions that are used to limit which emojis should be rendered. Each of this function will be invoked with single parameter being `emoji` data and if every function returns `true` for `emoji` then this emoji will be included and displayed.| Array(function) | [] | -| `renderAheadOffset` | Specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, keeping this as low as possible should be the intent. Higher values also increase re-render compute | number | 1500 | +| `renderAheadOffset` | Specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, making this low can improve performance if you're having issues with it (see [#36](https://github.com/sskhandek/react-native-emoji-input/issues/36)). Higher values also increase re-render compute | number | 1500 | > \* When the search function yields this function is called. Additionally when the user clears the query box this function is called with the previous longest query since the last time the query box was empty. By default the function is called with one parameter, a string representing the query. If the verbose logging function parameter is set to true the function is called with a second parameter that is a string specifying why the function was called (either 'emptySearchResult' or 'longestPreviousQuery'). ## Usage diff --git a/example/src/EmojiInput.js b/example/src/EmojiInput.js index f45dc33..62597d7 100644 --- a/example/src/EmojiInput.js +++ b/example/src/EmojiInput.js @@ -438,7 +438,7 @@ class EmojiInput extends React.PureComponent { render() { const { selectedEmoji, offsetY } = this.state; - const { enableSearch, width } = this.props; + const { enableSearch, width, renderAheadOffset } = this.props; return (