undefined is not an object(evaluating config.options[0]) React Native

Question

I am a developing a React Native app for an IPhone.I need to upload an Image from IPhone to IPhone App.Below is the code which shows the options as soon as we click on 'Add Photo'.

FeedBackScreen.js:

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions, TouchableOpacity, Image } from 'react-native';
import { ActionSheet, configuration, onSelect, Root, options } from 'native-base';

const width = Dimensions.get('window').width;
export default class FeedBackScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: []
    }
  }

  onClickAddPhoto = () => {
    const BUTTONS = ['Take Photo', 'Choose Photo Library', 'Cancel'];
    ActionSheet.show({
      configuration: {
        options: BUTTONS,
        cancelButtonIndex: 2,
        title: 'Select a Photo'
      }
    },{
      onSelect: buttonIndex => {
        switch (buttonIndex) {
          case 0:
            break;
          case 1:
            break;
          default:
            break;
        }
      }
    })
  }

  renderItem = ({ item, index }) => {
    return (
      <View>
        <Image
          source={item.url}
          style={styles.itemImage}
        />
      </View>
    )
  };

  render() {
    let { content, btwPressStyle } = styles;
    let { fileList } = this.state;
    return (
      <Root>
        <View style={content}>
          <Text>Sample React Native Add Image</Text>
          <FlatList
            data={fileList}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index.toString()}
            extraData={this.state}
          />
          <TouchableOpacity onPress={this.onClickAddPhoto}
            style={styles.btwPressStyle}>
            <Text>Add Photo</Text>
          </TouchableOpacity>
        </View>
      </Root>
    )
  }
};

const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    marginTop: 50
  },
  btwPressStyle: {
    backgroundColor: 'blue',
    height: 50,
    width: 100,
    alignItems: 'center'
  },
  itemImage: {
    backgroundColor: '#2F455C',
    height: 150,
    width: width - 60,
    borderRadius: 8,
    resizeMode: 'contain'
  }
})

Previously I installed the following packages:

npm install --save react-native-image-crop-picker

npm install --save native-base

When I run,I am getting the following error:

TypeError:undefined is not an object(evaluating 'config.options[0]')

Can you please help me where I am going wrong?Thanks in Advance

Answer 1

If you see nativebase ActionSheet documentation, there is no configuration named parameter in show() method.

So, you have to show ActionSheet using below code :

  onClickAddPhoto = () => {
    const BUTTONS = ['Take Photo', 'Choose Photo Library', 'Cancel'];
    ActionSheet.show({
      options: BUTTONS,
      cancelButtonIndex: 2,
      title: 'Select a Photo'
    }, 
      buttonIndex => {
        switch (buttonIndex) {
          case 0:
            break;
          case 1:
            break;
          default:
            break;
        }
    })
  }

Remove configuration parameter and pass options directly.

Also note, there is no onSelect param in show(), it just buttonIndex.