Skip to content

Instantly share code, notes, and snippets.

@CyxouD
Created March 26, 2020 09:53
Show Gist options
  • Save CyxouD/bb42999e066cb7518768c1c29bb1b799 to your computer and use it in GitHub Desktop.
Save CyxouD/bb42999e066cb7518768c1c29bb1b799 to your computer and use it in GitHub Desktop.
Combined 2 solutions to achieve purpose of scrolling with custom font on Android and long text not render on iOS: - https://github.com/facebook/react-native/issues/18132#issuecomment-499267942 - https://github.com/facebook/react-native/issues/19453#issuecomment-481071561
import PropTypes from 'prop-types';
import React, { useCallback, useState } from 'react';
import { TextInput } from 'react-native';
/*
Combined 2 solutions to achieve purpose of scrolling with custom font on Android and long text not render on iOS:
- https://github.com/facebook/react-native/issues/18132#issuecomment-499267942
- https://github.com/facebook/react-native/issues/19453#issuecomment-481071561
*/
const ScrollWithCustomFontFixedTextInput = props => {
const {
style,
children,
onContentSizeChange,
multiline,
editable,
initialHeight,
width,
...other
} = props;
if (onContentSizeChange || multiline || editable) {
console.warn(
'onContentSizeChanged, multiline and editable props are not supposed to be changed in this component',
);
}
const [textInputHeight, setTextInputHeight] = useState(initialHeight);
const onContentSizeChangeFix = useCallback(
event => setTextInputHeight(event.nativeEvent.contentSize.height),
[],
);
return (
<TextInput
style={[
style,
{
height: textInputHeight,
minHeight: initialHeight,
width,
},
]}
onContentSizeChange={onContentSizeChangeFix}
multiline
editable={false}
{...other}>
{children}
</TextInput>
);
};
ScrollWithCustomFontFixedTextInput.propTypes = {
...TextInput.prototype.props,
initialHeight: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
};
export default ScrollWithCustomFontFixedTextInput;
@CyxouD
Copy link
Author

CyxouD commented Mar 26, 2020

Use it like this

<ScrollWithCustomFontFixedTextInput
            style={[styles.introText, { marginBottom: 40 }]}
            initialHeight={Dimensions.get('window').height}
            width={Dimensions.get('window').width - 20 * 2}>
       some text
</ScrollWithCustomFontFixedTextInput>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment