Skip to content

Commit

Permalink
feat: new enableExperimentalGhostLinesPrevention to circumvent RN bug
Browse files Browse the repository at this point in the history
Empty text will be printed as a line spanning 20px, see
https://git.io/JErwX. This prop allows to circumvent this RN bug.

fix #516
  • Loading branch information
jsamr committed Aug 28, 2021
1 parent 4f032d3 commit 3645211
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 4 deletions.
1 change: 1 addition & 0 deletions packages/render-html/src/RenderHTMLConfigProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const renderHTMLConfigPropTypes: RenderHTMLConfigPropTypes = {
bypassAnonymousTPhrasingNodes: PropTypes.bool,
defaultTextProps: PropTypes.object,
defaultViewProps: PropTypes.object,
enableExperimentalGhostLinesPrevention: PropTypes.bool,
enableExperimentalMarginCollapsing: PropTypes.bool,
remoteErrorView: PropTypes.func,
remoteLoadingView: PropTypes.func,
Expand Down
11 changes: 10 additions & 1 deletion packages/render-html/src/TTextRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,16 @@ function TStandardTextRenderer(props: TNodeSubRendererProps<TText>) {
export default function TTextRenderer(props: TNodeSubRendererProps<TText>) {
const InternalTextRenderer = useInternalTextRenderer(props.tnode);
if (InternalTextRenderer) {
return React.createElement(InternalTextRenderer);
return React.createElement(InternalTextRenderer, props);
}
// If ghost line prevention is enabled and the text data is empty, render
// nothing to avoid React Native painting a 20px height line.
// See also https://git.io/JErwX
if (
props.tnode.data === '' &&
props.sharedProps.enableExperimentalGhostLinesPrevention
) {
return null;
}
return React.createElement(TStandardTextRenderer, props);
}
1 change: 1 addition & 0 deletions packages/render-html/src/context/defaultSharedProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const defaultSharedProps: Required<RenderHTMLSharedProps> = {
allowFontScaling: true
},
defaultViewProps: {},
enableExperimentalGhostLinesPrevention: false,
enableExperimentalMarginCollapsing: false,
computeEmbeddedMaxWidth: (contentWidth) => contentWidth,
provideEmbeddedHeaders: () => null,
Expand Down
7 changes: 4 additions & 3 deletions packages/render-html/src/render/render-types.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { TBlock, TPhrasing, TText } from '@native-html/transient-render-engine';
import { ComponentType } from 'react';
import { TNodeSubRendererProps } from '../internal-types';
import { CustomRenderer, InternalRenderer } from '../shared-types';

/**
* Special internal renderers for non-printable text (wbr, br).
*/
export type InternalTextContentRenderer = ComponentType<{
key?: string | number;
}> & {
export type InternalTextContentRenderer = ComponentType<
TNodeSubRendererProps<TText>
> & {
isNativeInternalTextRenderer: true;
};

Expand Down
22 changes: 22 additions & 0 deletions packages/render-html/src/shared-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,26 @@ export interface RenderHTMLSharedProps {
*/
defaultWebViewProps?: any;

/**
* React Native doesn't handle lines like we would expect on a web browser.
* For example:
* ```jsx
* <View>
* <Text></Text>
* </View>
* ```
* will span 20 dpi in height. Setting this prop to `true` will make
* the renderer take those React Native oddities into account.
* See also this ticket: https://git.io/JErwX
*
* @remarks It might not work when `bypassAnonymousTPhrasingNodes` is set to
* `false`. Also note that this is an experimental feature, thus subject to
* behavioral instability.
*
* @defaultValue false
*/
enableExperimentalGhostLinesPrevention?: boolean;

/**
* Enable or disable margin collapsing CSS behavior (experimental!).
* See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing | MDN docs}.
Expand All @@ -374,6 +394,8 @@ export interface RenderHTMLSharedProps {
* flex), which is not standard.
* - Might not work well with {@link TPhrasing} nodes having only one child.
*
* This is an experimental feature, thus subject to behavioral instability.
*
* @defaultValue false
*/
enableExperimentalMarginCollapsing?: boolean;
Expand Down

0 comments on commit 3645211

Please sign in to comment.