1

I need a hand to correct my code. I want to display a page with 3 tabs with react-native-tab-view and I don't know why I have an error. could you help me find where it's stuck? What may seem obvious and easy to you may not be easy for me, so please be indulgent :) Thank you very much for your help and your time.

import * as React from 'react';
import { Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Information from '../Information';
import Photos from '../Photos';
import Stock from '../Stock';
import { getProducts } from '../../../../src/common/Preferences';
import styles from '../../../../assets/styles';
import i18n from '../../../../src/i18n';

const FirstRoute = () => (
  <Information style={styles.scene} />
);

const SecondRoute = () => (
  <Stock style={styles.scene} />
);
const ThirdRoute = () => (
  <Photos style={styles.scene} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default class ProductDetails extends React.Component {
 constructor(props) {
    super(props);
      this.state = {
       // productId: (props.navigation.state.params && props.navigation.state.params.productId ? props.navigation.state.params.productId : -1),
        index: 0,
        routes: [{ key: '1', title: i18n.t("information.title"),icon: 'ios-paper', }, {icon: 'ios-paper', key: '2', title: i18n.t("stock.title") }, {icon: 'ios-paper', key: '3', title: i18n.t("photos.title") }],
    };
 }

  _handleIndexChange = index => {
    this.setState({index})
  };

 _renderScene = SceneMap({
    '1': FirstRoute,
    '2': SecondRoute,
    '3': ThirdRoute,
  });

render() {
  return (    
    <TabView      
      navigationState={this.state}
      renderScene={this._renderScene}
      initialLayout={initialLayout}
      onRequestChangeTab={this._handleIndexChange}
        useNativeDriver
    />    
    );
  };
}

I get :

TypeError: _this.props.onIndexChange is not a function. (In '_this.props.onIndexChange(index)', '_this.props.onIndexChange' is undefined)

Kimako
  • 615
  • 2
  • 11
  • 26
  • 2
    `onIndexChange` is a required prop. You have to add `onIndexChange` for tab view to work. Check: https://github.com/satya164/react-native-tab-view#onindexchange-required – Sagar Shakya Dec 18 '20 at 10:51
  • alright thanks, so I can replace onRequestChangeTab={this._handleIndexChange} by onIndexChange={this._handleIndexChange} ? – Kimako Dec 18 '20 at 10:53
  • 1
    `onRequestChangeTab` prop is not documented. Where did that prop come from? But it does seems like you should be using `onIndexChange` in place of `onRequestChangeTab`. – Sagar Shakya Dec 18 '20 at 10:56

0 Answers0