CODEWITHSUNDEEP
reactjsreact-native
Brayden Adams
Brayden Adams

Reputation: 39

Using dropdown component in react-navigation throws error when handler is called

I'm trying to use react-navigation with react-native-dropdown in order to have a dropdown in the header to change what is rendered in the view below.

Whenever I try to execute the handler, react-native-dropdown I get the error "undefined is not a function (near'...this.props.data.map')when react-native-dropdown attempts to render again and maps the dropdown using (this.props.data.map((rows, index) => etc.

Below is the code I'm using:

import React, {Component} from "react"
import {Dimensions, ScrollView, StyleSheet, width, View, TouchableOpacity} from "react-native"
import {Images} from "../../theme"
import DropdownMenu from 'react-native-dropdown-menu';
import Pdf from 'react-native-pdf';
import { Header } from "react-native/Libraries/NewAppScreen";
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { drop } from "lodash";


class InformationScreen extends Component {
  constructor(props) {
    super(props)
    var informationScreens = props.global.appConfig.information_screens
    var informationScreenTitles = Object.keys(informationScreens)
    state = {
      informationScreens: informationScreens,
      selectedDropdown: informationScreens[0]
    }
}
static navigationOptions = ({ navigation }) => {
  return {
    headerTitle:  <DropdownMenu
    style={{flex: 1}}
    bgColor={'clear'}
    tintColor={'#666666'}
    activityTintColor={'rgba(2, 122, 255, 1.0)'}
    // arrowImg={}
    // checkImage={}
    // optionTextStyle={{color: '#333333'}}
    // titleStyle={{color: '#333333'}}
    // maxHeight={300}
  handler={(selection, row) => navigation.setParams({'headerTitle': navigation.state.params[selection][row]})}
  data={navigation.state.params}
  />
  };
};


    render() {
        return (
          <View style={styles.container}>

          <Pdf
          source={{ uri: "https://someurl.com/dl/sites/default/files/page/2020%20BYU%20Football%20Almanac_3.pdf", cache: true}}
          onLoadComplete={(numberOfPages,filePath)=>{
            console.log(`number of pages: ${numberOfPages}`);
        }}
        style={styles.pdf}
          />
          </View>
        )
    }
}


const styles = StyleSheet.create({
    image: {
        flex: 1,
    },
    container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 25,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width,
      height:Dimensions.get('window').height,
  }
})

function mapStateToProps(state) {
  const global = state.get('global');
  return {  global };
}

export default connect(mapStateToProps)(InformationScreen);

Upvotes: 2

Views: 134

Answers (2)

Brayden Adams
Brayden Adams

Reputation: 39

Ray you were absolutely correct, I figured it out about 5 minutes before you posted.

navigation.state.params was valid and the dropdown would populate, however when I would try to setParams, it would change the format of params to a JSON object instead of an array.

This was remedied by putting my array one JSON object deeper so the object still contained the array after setParams was called. I then called that object in the data.

data={navigation.state.params.informationScreens}

Thank you so much for your help, I'll start using StackOverflow more often.

Upvotes: 1

ray
ray

Reputation: 27265

I suspect this.props.data is either not provided or not an array, so this.props.data.map is undefined, and attempting to invoke it will get you an 'undefined is not a function' error. Is navigation.state.params an array?

If you pass data={navigation.state.params || []} does the issue go away?

Upvotes: 0

Related Questions