React Native Project - Using Native-Base DatePicker throws an Invariant Violation error

Question

So im creating a signup form for my app using React Native mostly, with a few components imported from Native Base. One of these components doesnt seem to render correctly though and gives me an Invariant Violation error.

Im not sure why and was wondering if anyone here could explain whats going on.

When I remove the DatePicker the component is rendered just fine.....but with the DatePicker included the error says to check the way my component is being exported, which doesnt make sense to me.

Here is my the code for that specific screen. I dont think I need to add anything else but if needed please let me know.

import { View, Text, TextInput } from 'react-native';
import { Button, Card, CardItem, Form, Item, Label, Input, DatePicker } from 'native-base';
import { emailChanged, passwordChanged } from '../actions';
import Icon from 'react-native-vector-icons/Ionicons';

class PersInfoScreen extends React.Component {
  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onPasswordChange(text) {
    this.props.passwordChanged(text);
  }



  render() {
    return (
      <View style={{ backgroundColor: '#03A9F4', flex: 1 }}>
        <Text style={{ color: '#fff' }}>Signup below to start raising money for charity everytime you run.</Text>
        <Form>
        <View style={styles.formBox}>
        <DatePicker
          defaultDate={new Date(2018, 4, 4)}
          minimumDate={new Date(2018, 1, 1)}
          maximumDate={new Date(2018, 12, 31)}
          locale={"en"}
          timeZoneOffsetInMinutes={undefined}
          modalTransparent={false}
          animationType={"fade"}
          androidMode={"default"}
          placeHolderText="Select date"
          textStyle={{ color: "green" }}
          placeHolderTextStyle={{ color: "#d3d3d3" }}
          />
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>First Name:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Last Name:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Email:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Date Of Birth</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold', paddingBottom: 5 }}>Gender:</Label>
              <View style={{ flex: 1, flexDirection: 'row', margin: 10, alignItems: 'center', justifyContent: 'center' }}>
                <Icon style={styles.iconStyles} name="ios-man" size={36} color="white"/><Text>Man</Text>
                <Icon style={styles.iconStyles} name="ios-woman" size={36} color="white"/><Text>Woman</Text>
              </View>
            </Item>
            <Button><Text>Next</Text></Button>
          </View>
        </Form>
      </View>
    )
  }
}

export default PersInfoScreen;

const styles = {
   iconStyles: {
     fontSize: 30,
     margin: 10
   },
   formBox: {
     margin: 20,
     borderWidth: 5,
     borderRadius: 10,
     borderColor: '#fff'
   }
 }

Error Code:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PersInfoScreen`.

This error is located at:
    in RCTView (at View.js:60)
    in View (at PersInfoScreen.js:23)
    in RCTView (at View.js:60)
    in View (at Form.js:10)
    in Form (at connectStyle.js:384)
    in Styled(Form) (at PersInfoScreen.js:22)
    in RCTView (at View.js:60)
    in View (at PersInfoScreen.js:20)
    in PersInfoScreen (at SceneView.js:10)
    in SceneView (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:474)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:473)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at StackViewCard.js:12)
    in Card (at createPointerEventsContainer.js:28)
    in Container (at StackViewLayout.js:537)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:432)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:431)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:474)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:473)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at StackViewCard.js:12)
    in Card (at createPointerEventsContainer.js:28)
    in Container (at StackViewLayout.js:537)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:432)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:431)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at App.js:28)
    in RCTView (at View.js:60)
    in View (at App.js:27)
    in Provider (at App.js:26)
    in App (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

Answer 1

Encountered the same issue with Native Base (v2.4.3) today as well.

For solving this issue you have to update Native Base to v2.7 or higher. Be careful, that Native Base v2.7+ requires React Native v0.56+, so probably you have to update RN itself as well (see https://medium.com/react-native-training/updating-your-react-native-app-a724c996a76d).

Regarding updating Native Base itself, it's very easy, just adjust the version number in your package.json, delete node_modules:

rm -rf node_modules

and then run a fresh install.

npm install or yarn install

After that the import of the DatePicker component will work fine.