Skip to content
Advertisement

How to override React Native Component?

Dear Friend I am trying to override a method in react native component, please let me know how I can achieve that.

// BaseButton.js
import React, { Component } from 'react'
import { View, Button } from 'react-native'

export default class BaseButton extends Component {

    onPress = () => {
        console.log('Test')
    }
    
    render() {
        return (
            <View>
                <Button
                    title="Press me"
                    disabled
                    onPress={() => this.onPress()}
                />
            </View>
        )
    }
}
// HomeScreen.js
import React, { Component } from 'react'
import BaseButton from './Components/BaseButton'

BaseButton.prototype.onPress = () => {
    console.log('Overrided...');
}

export default class HomeScreen extends Component {
    render(){
        return(
            <BaseButton />
        )
    }
}

Advertisement

Answer

There is no such a thing as component override as I know. But if you want to customize the component then you can wrap with with another component and you can use props for access the default features of the the component and for additional features you can create your own state and props inside your wrapper component.

please refer following link for know about react native props, https://reactnative.dev/docs/props

Advertisement