React (native) - 在 3rd 方代码/组件中注入自定义组件而不是标准组件

Question

For example i have library/package which exports some component:

function SomeComponent() {
    ...
    return (
       <View>
          ...
          <TextInput ... />
          ...
       </View>
    );
}

Is there any way I can use SomeComponent but instead of TextInput I somehow inject my custom MyCustomTextInput ?

I know that is possible to create SomeComponent with CustomTextInput prop (it does not matter if CustomTextInput default value is specified like this or with defaultProps static initialization):

function SomeComponent({ CustomTextInput = TextInput }) {
        ...
        return (
           <View>
              ...
              <CustomTextInput ... />
              ...
           </View>
        );
}

What I need is easy way to tell to the whole application (all packages, all our modules/code) "where ever you see TextInput component use my custom MyCustomTextInputComponent ". Is this possible in react/react-native?

Answer 1

You can make index for component export package with conditions: Look at example project: Example: https://snack.expo.io/@djalik/thrilled-donut

index.js:

import React from 'react';
import {TextInput} from 'react-native';

const  MyTextInput=()=>{
   return  <TextInput value={'custom'}/>
}


const  MyTextInput2=()=>{
   return  <TextInput value={'custom2'}/>
}

let custom1 = false;
export default (custom1?MyTextInput:MyTextInput2);

and import in app where you need it:

import {MyTextInput} from './components'

Answer 2

What you want to achieve (substitute react-native's TextInput with your own component across the entire app) is not possible to do. You can't force library to render another component either (unless it specifically lets you pass that component as a prop). Solution here would be forking this library on github, making necessary changes to support custom component prop and using github link in your package.json file