Skip to content

Commit

Permalink
Attempted fix for view parenting issue
Browse files Browse the repository at this point in the history
Summary:
View should reset whether we are inside of a text or not. For example, inline images should only be rendered inside text, but if we have a view inside text, then it should render a regular image, not an inline image.

This logic *should* exist in native instead of in JS, but this is an easier change for now.

I'm sad to have to turn this back into a JS component instead of just being the string 'RCTView' as this will have performance implications on all surfaces, but this is how it always used to be so maybe it's fine.

This example previously crashed, and no longer does:
```
function PlaygroundContent(props: {}) {
  return (
    <View style={styles.container}>
      <Text>
        <View style={{width: 10, height: 10}}>
          <Image source={fbicon.filled('chevron-down', 10)} />
        </View>
      </Text>
    </View>
  );
}
```

Changelog:
[General][Fixed] Fixes bug where <Text><View><Image> would crash.

Reviewed By: JoshuaGross

Differential Revision: D17564510

fbshipit-source-id: 0ecf49b3d466e7adf57a46a7a097dd3798c721a4
  • Loading branch information
elicwhite authored and facebook-github-bot committed Jan 8, 2020
1 parent 02633fe commit 66601e7
Showing 1 changed file with 18 additions and 3 deletions.
21 changes: 18 additions & 3 deletions Libraries/Components/View/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
'use strict';

import type {ViewProps} from './ViewPropTypes';
import type {ViewNativeComponentType} from './ViewNativeComponent';

const React = require('react');
import ViewNativeComponent from './ViewNativeComponent';
const TextAncestor = require('../../Text/TextAncestor');

export type Props = ViewProps;

Expand All @@ -22,5 +25,17 @@ export type Props = ViewProps;
*
* @see http://facebook.github.io/react-native/docs/view.html
*/
module.exports = (require('./ViewNativeComponent')
.default: ViewNativeComponentType);
const View: React.AbstractComponent<
ViewProps,
React.ElementRef<typeof ViewNativeComponent>,
> = React.forwardRef((props: ViewProps, forwardedRef) => {
return (
<TextAncestor.Provider value={false}>
<ViewNativeComponent {...props} ref={forwardedRef} />
</TextAncestor.Provider>
);
});

View.displayName = 'View';

module.exports = View;

0 comments on commit 66601e7

Please sign in to comment.