Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to use HoC with React Native

$
0
0

I have an listing app where users can add items for multiple categories, when they want to add new record, there are 3 related screens with this particular feature. All of those screens have <Header/> component, so i thought HoC would be nice here so that i can reuse it across 3 screens. However, i could not accomplish it.

Here is what i tried so far:

This is my HoC class

import React, { Component } from 'react';
import { View, StyleSheet, Text, StatusBar } from 'react-native';
import Header from '../components/Header';

const NewAd = (WrappedComponent) => {
    class NewAdHoc extends Component {
        handleBackPress = () => {
            this.props.navigation.navigate('Home');
            StatusBar.setBarStyle('dark-content', true);
        }
        render() {
            const {contentText, children} = this.props
            return (
                <View style={styles.container}>
                    <Header
                        headerText={'Yeni ilan ekle'}
                        onPress={this.handleBackPress}
                    />
                    <View style={styles.contentContainer}>
                        <Text style={styles.contentHeader}>{contentText}</Text>
                        <WrappedComponent/>
                    </View>
                </View>
            );
        }
    }


    return NewAdHoc;
}

this is my screen:

class NewAdScreen extends Component {
    render() {
        const Content = () => {
            return (
                <View style={styles.flatListContainer}>
                    <ListViewItem />
                </View>
            );
        }
        return (
            NewAdHoc(Content)
        )
    }
}

after that i am getting error

TypeError: (0 , _NewAdHoc.NewAdHoc) is not a function(…)

and i have no idea how can i fix it because this is my first time using hocs on a react-native app. I have looked why this error is popping and they suggest import components in this way:

import {NewAdHoc} from '../hocs/NewAdHoc';

but even this is not solved it.

any help will be appreciated, thanks.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>