How to use React Hooks with react-native-tab-view

Question

red error screen 1

Cannot read property 'configureProps' of undefined

I was using the react-tab-view with react Hooks and typescript but I have some issues somebody could give me a hand...

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'reactnative';
import { TabView, SceneMap } from 'react-native-tab-view';



const FirstRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

interface Props {
    navigation: any;

}
export default function Home(props: Props) {


    const [rar, setRar] = useState({
        index: 0,
        routes: [
            { key: 'first', title: 'First' },
            { key: 'second', title: 'Second' },
        ]
    });

    var NativeAppEventEmitter = require('RCTNativeAppEventEmitter');
    return (
        <View>
            <TouchableOpacity onPress={props.navigation.openDrawer}>
                <Text>hola desde home</Text>
            </TouchableOpacity>

            <TabView
                navigationState={rar}
                renderScene={SceneMap({
                    first: FirstRoute,
                    second: SecondRoute,
                })}
                onIndexChange={index => ({ index })}
                initialLayout={{ width: Dimensions.get('window').width, height: 250 }}
            />


        </View>
    )
}
const styles = StyleSheet.create({
    scene: {
        flex: 0.3,
    },
});

Answer 1

change

onIndexChange={index => ({ index })}

to

onIndexChange={index => setRar({ ...rar, index })}

that should fix the error you are facing