React Native app on IOS crashes because of nativebase picker

SimplifiedCode

//This page has three pickers. Second Picker is dependent on the choice of first picker

import React, { Component } from 'react';
import {
  Picker,
  Container,
  Content,
  Form,
  Item,
  Input,
  Label,
  Title,
  Root,
} from 'native-base';
import {
  StyleSheet,
  Dimensions,
} from 'react-native';

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

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customerName: null,
      type: '',
      projectName: '',
      responseData: [],
      uniqueList: [],
      typeList: [],
      projectsPicker: ''
      };
  }

//This functions returns the result for second picker which is dependent on the choice of first picker
  getProjects = () => {
    if (this.state.customerName) {
      return (
        <Root>
          {this.state.responseData
            .filter(cust => cust.customer === this.state.customerName)
            .map(index => (
              <Picker.Item label={index.project} value={index.project} key={index.project} />
            ))}
        </Root>
      );
    }
    return null;
  };

  render() {
    return (
      <Container>
        <Content>
          <Form>
            <Item inlineLabel style={styles.items}>
              <Label>Customer Name</Label>
              <Picker
                iosHeader="Customer Name"
                placeholder="Select Customer Name"
                mode="dialog"
                selectedValue={this.state.customerName}
                onValueChange={(itemValue, itemIndex) => {
                  if (itemValue !== null) {
                    this.setState({ customerName: itemValue });
                  }
                }}
              >
                <Picker.Item label="Select Name" value={null} />        {*Acts as placeholder on Android*}
                {this.state.uniqueList.map(item => (
                  <Picker.Item label={item} value={item} key={item} />
                ))}
              </Picker>
            </Item>

            <Item inlineLabel style={styles.items}>
              <Label>Project Name</Label>
              <Picker
                iosHeader="Project Name"
                placeholder="Select Project"
                mode="dialog"
                selectedValue={this.state.projectName}
                onValueChange={(itemValue, itemIndex) => {
                  if (itemValue !== null) {
                    this.setState({ projectName: itemValue });
                  }
                }}
              >
                <Picker.Item label="Select Project" value={null} />       {*Acts as placeholder on Android*}
                {this.state.customerName ? (
                  this.state.responseData
                    .filter(cust => cust.customer === this.state.customerName)
                    .map(index => (
                      <Picker.Item label={index.project} value={index.id} key={index.project} />
                    ))) : (
                  <Picker.Item label="No Projects Found" value={null} />
                )}
              </Picker>
            </Item>

            <Item inlineLabel style={styles.items}>
              <Label>Type</Label>
              <Picker
                iosHeader="Visit Types"
                placeholder="Select Type"
                mode="dialog"
                selectedValue={`${this.state.type}|${this.state.amount}`}
                onValueChange={(itemValue, itemIndex) => {
                  if (itemValue !== null) {
                    const splitData = itemValue.split(['|']);
                    this.setState({ type: splitData[0], amount: splitData[1] });
                  }
                }}
              >
                <Picker.Item label="Select Type" value={null} />          {*Acts as placeholder on Android*}
                {
                this.state.typeList.map(item => (
                  <Picker.Item
                    label={item.name}
                    value={`${item.id}|${item.unit_price}`}
                    key={item.id}
                  />))
                  }
              </Picker>
            </Item>
            
          </Form>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  items: {
    width: width - 30,
    paddingTop: 10
  },
  content: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  }
});