how to transfer RecyclerListView from class component to functional

326 views Asked by At

I faced RecyclerListView for the first time in legacy code, so I needed to rewrite that in functiona style, but when React tries to return RecyclerListView, programm freezes and do not even enter renderBetItem function, console.log doesn`t even appear. Here is the code parts

let dataProvider = new DataProvider((r1, r2) => {
        return true;
    });

let layoutProvider = new LayoutProvider(
    () => 0,
    (type, dim) => {
        dim.width = width;
        dim.height = 110;
    }
);    
componentDidMount() {
        this.setState({isLoading: true});
        this.props.footballEvents && this.initialManipulations(this.props.footballEvents);
        this.setState({isLoading: false});
    }

initialManipulations = (events) => {
        if (events.length) {
            const newEventArr = events.map((event) => eventManipulations(event, 'fromFootball'));
            this.setState({liveEvents: this.dataProvider.cloneWithRows(newEventArr), loading: false});
        }
    }
const renderBetItem = (type, data) => {
        console.log('entered renderBetItem')
        return (
            <View><Text>Hello</Text></View>
        )
    }

return (
        <View style={{backgroundColor: whiteLabel.mainBackground, flex: 1}}>
            {isLoading === false ?
                <RecyclerListView
                    rowRenderer={renderBetItem}
                    key={keyForLive}
                    dataProvider={liveEvents}
                    layoutProvider={layoutProvider}
                />
                :
                <ActivityIndicator
                    color={whiteLabel.homeTabColorActive}
                    size='large'
                    style={{marginTop: '20%'}}
                />
            }
        </View>
    )
Do you have any idea what`s wrong with this code?
0

There are 0 answers