Skip to content
Permalink
Browse files
Attempted fix for view parenting issue
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
TheSavior authored and facebook-github-bot committed Jan 8, 2020
1 parent 02633fe commit 66601e755fcad10698e61d20878d52194ad0e90c
Showing 1 changed file with 18 additions and 3 deletions.
@@ -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;

@@ -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.