search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.28k stars 951 forks source link

Date Picker Triggers Invariant Violation #779

Closed ghost closed 4 years ago

ghost commented 4 years ago

🐛 Bug Report

tried to fix this issue here, but I don't understand what could be causing it...

I was using the Calendar component in my project with no issues. However, I decided it would be more convenient replacing it by the DatePicker, which apparently uses pretty much the same. Here is the code I have so far (relevant part):

To Reproduce

import React from 'react'; 
import {   
            Alert,
            ScrollView, 
            StyleSheet, 
            View, 
            InteractionManager, 
            Image, 
            TextInput, 
            TouchableOpacity, 
            BackHandler 

        } from 'react-native';

import {
  Card,
  CardHeader,
  Layout,
  Text,
  Calendar,
  DatePicker,
  Spinner,
} from '@ui-kitten/components';

import { TaskCard } from './components/task-card';

import { validate } from 'validate.js';

import { Auth, Storage, API, graphqlOperation, scTracker } from '../modules/commons'; 
import Styles from '../modules/styles';
import constraints from './fields/constraints';

import Ionicons from 'react-native-vector-icons/Ionicons';

import { CustomCalendar } from './components/custom-calendar';

class TasksScreen extends React.Component {
    static navigationOptions = { 
        title: "Atividades",     
    };

    state = {
      cDate: null,
      showCalendar: false,
    };

    constructor(props) { 
        super(props);

    };

    componentDidMount() {
        try {
            let lcDate = new Date();
            this.setState({
                cDate: lcDate,
            });
        } catch (e) {
            console.log(e);
        };
    };

    render() {
        return(

. . . . . 

                    <Layout level="2" style={{width:"100%"}}>

                        <DatePicker     date={this.state.cDate}
                                        onSelect={(date)=>{this.setState({cDate: date})}} 
                        />

                    </Layout>

                    <ScrollView contentContainerStyle={Styles.vScrollViewContent}>

                        <TaskCard

. . . . . .

Expected behavior

For some reason, with exactly the same parameters, it started to trigger an error pointing exactly on the line of the Layout wrapping the date picker (alog with all other Layout objects):

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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 your code at tasks-scr.js:91., 
    in TasksScreen (at SceneView.js:9)
    in SceneView (at createTabNavigator.tsx:67)
    in RCTView (at View.js:45)
    in View (at SceneView.tsx:92)
    in SceneView (at TabView.tsx:173)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at Pager.tsx:667)
    in PanGestureHandler (at Pager.tsx:659)
    in Pager (at TabView.tsx:70)
    in RCTView (at View.js:45)
    in View (at TabView.tsx:128)
    in TabView (at createMaterialTopTabNavigator.tsx:136)
    in MaterialTabView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:21)
    in RCTView (at View.js:45)
    in View (at modalPanel.component.js:62)
    in ModalPanel (at applicationProvider.component.js:68)
    in ThemeProvider (at styleProvider.component.js:13)
    in MappingProvider (at styleProvider.component.js:12)
    in StyleProvider (at applicationProvider.component.js:67)
    in ApplicationProvider (at App.js:19)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/react/cjs/react.development.js:188:36 in warningWithoutStack
- node_modules/react/cjs/react.development.js:603:32 in warning
- node_modules/react/cjs/react.development.js:1730:14 in createElementWithValidation
* src/screens/tasks-scr.js:91:25 in render
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 15 more stack frames from framework internals

Invariant Violation: 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 `TasksScreen`.
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
- ... 19 more stack frames from framework internals

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method, 
    in TabBar (at MaterialTopTabBar.tsx:92)
    in TabBarTop (at createMaterialTopTabNavigator.tsx:84)
    in Pager (at TabView.tsx:70)
    in RCTView (at View.js:45)
    in View (at TabView.tsx:128)
    in TabView (at createMaterialTopTabNavigator.tsx:136)
    in MaterialTabView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainIjs:430)
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error

UI Kitten and Eva version

Package Version
@eva-design/eva 1.3.1
@ui-kitten/components 4.3.2

Environment information

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (1) x64 Intel(R) Xeon(R) CPU E5-2686 v4 @ 2.30GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    npm: 6.13.1 - ~/environment/node_modules/.bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    react: 16.8.3 => 16.8.3 
    react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8
artyorsh commented 4 years ago

There is no DatePicker component in this library. However, there is Datepicker