Question: How does this work?

[mfbx9da4]

Hey,

I'm wondering if I can customize some underlying react-native components such as Image or Text by using an approach similar to this library. Ideally I would like to do something like

import { Image } from 'react-native'

export const setCustomImage = customProps => {
  const ImageRender = Image.render
  const initialDefaultProps = Image.defaultProps
  Image.defaultProps = {
    ...initialDefaultProps,
    ...customProps
  }
  Image.render = function render(props) {
    // write custom hooks and logic like any other component 👇
    const myCustomContext = useContext(CustomContext)
    let oldProps = props
    props = { ...props, style: [customProps.style, props.style] }
    try {
      return ImageRender.apply(this, arguments)
    } finally {
      props = oldProps
    }
  }
}

I'm pretty sure this won't work. I've never defined a react component with a .render method so is this something coming from the way the react native components work? I'm pretty sure this .render override strategy doesn't work with normal react components, so how does this work?

[dioi2000]

every(I haven't check it but 99% sure) RN components wrapped with forwardRef and it return elementType which have .render
if you want use same strategy, just wrap your component with forwardRef

var elementType = {
$$typeof: REACT_FORWARD_REF_TYPE,
render: render
};
forwardRef = (render) => elementType;

[mfbx9da4]

ah makes sense, forgot about forwardRef!