Skip to content

Commit 66601e7

Browse files
elicwhitefacebook-github-bot
authored andcommitted
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
1 parent 02633fe commit 66601e7

File tree

1 file changed

+18
-3
lines changed

1 file changed

+18
-3
lines changed

Libraries/Components/View/View.js

+18-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
'use strict';
1212

1313
import type {ViewProps} from './ViewPropTypes';
14-
import type {ViewNativeComponentType} from './ViewNativeComponent';
14+
15+
const React = require('react');
16+
import ViewNativeComponent from './ViewNativeComponent';
17+
const TextAncestor = require('../../Text/TextAncestor');
1518

1619
export type Props = ViewProps;
1720

@@ -22,5 +25,17 @@ export type Props = ViewProps;
2225
*
2326
* @see http://facebook.github.io/react-native/docs/view.html
2427
*/
25-
module.exports = (require('./ViewNativeComponent')
26-
.default: ViewNativeComponentType);
28+
const View: React.AbstractComponent<
29+
ViewProps,
30+
React.ElementRef<typeof ViewNativeComponent>,
31+
> = React.forwardRef((props: ViewProps, forwardedRef) => {
32+
return (
33+
<TextAncestor.Provider value={false}>
34+
<ViewNativeComponent {...props} ref={forwardedRef} />
35+
</TextAncestor.Provider>
36+
);
37+
});
38+
39+
View.displayName = 'View';
40+
41+
module.exports = View;

0 commit comments

Comments
 (0)