无法读取 null 的属性“props” - React Native

Question

I had a mobile application that i published like 2 months ago. I have to make some changes now. Before doing that, i upgraded android studio, so my sdk also upgraded to 28. I had several issues because of that but i could found solutions.

But now, when i running my app on emulator, i have an error on some events.

TypeError: TypeError: Cannot read property 'props' of null

This error is located at:
    in PickerAndroid (at Picker.js:159)
    in Picker (at Picker.android.js:11)
    in PickerNB (at connectStyle.js:384)
    in Styled(PickerNB) (at HomeScreen.js:626)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at Item.js:383)
    in Item (at connectStyle.js:384)
    in Styled(Item) (at HomeScreen.js:624)
    in RCTView (at View.js:45)
    in View (at ScrollView.js:852)
    in RCTScrollView (at ScrollView.js:977)
    in ScrollView (at HomeScreen.js:623)
    in RCTView (at View.js:45)
    in View (at HomeScreen.js:622)
    in RCTView (at View.js:45)
    in View (at HomeScreen.js:620)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at createAnimatableComponent.js:571)
    in withAnimatable(View) (at src/index.js:455)
    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 Modal.js:230)
    in RCTView (at View.js:45)
    in View (at Modal.js:250)
    in RCTModalHostView (at Modal.js:238)
    in Modal (at src/index.js:468)
    in ReactNativeModal (at HomeScreen.js:619)
    in RCTView (at View.js:45)
    in View (at react-native-drawer/index.js:579)
    in RCTView (at View.js:45)
    in View (at react-native-drawer/index.js:566)
    in Drawer (at Drawer/index.js:10)
    in Drawer (at HomeScreen.js:614)
    in HomeScreen (at navigationStore.js:448)
    in Wrapped (at SceneView.js:9)
    in SceneView (at StackViewLayout.js:478)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:477)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:476)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:42)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:507)
    in RCTView (at View.js:45)
    in View (at screens.native.js:83)
    in ScreenContainer (at StackViewLayout.js:401)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:400)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:49)
    in RCTView (at View.js:45)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:57)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at App.js:59)
    in App (at renderApplication.js:34)
    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:33)

This error is located at:
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at App.js:59)
    in App (at renderApplication.js:34)
    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:33)
<unknown>
    PickerAndroid.android.js:87:16
mapSingleChildIntoContext
    react.development.js:1170:25
traverseAllChildrenImpl
    react.development.js:1043:4
traverseAllChildrenImpl
    react.development.js:1059:22
traverseAllChildren
    react.development.js:1114:9
mapIntoWithKeyPrefixInternal
    react.development.js:1192:2
Object.mapChildren [as map]
    react.development.js:1214:2
PickerAndroid._this._stateFromProps
    PickerAndroid.android.js:86:33
new
    PickerAndroid.android.js:69:23
<unknown>
    createClassProxy.js:98:23

I see this error when i use this component.

    import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TouchableOpacity,
TouchableHighlight
    } from "react-native";

    import Modal from "react-native-modal";

    import { Item, Label, Input, Textarea, Button } from 'native-base';

    import { HEADERBG } from './../Helper/config';

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

    import ImagePicker from 'react-native-image-crop-picker';

    class NewPost extends Component {

        constructor(props){
            super(props);
            this.state = {
                category: null,
                messageText: null,
                isModalVisible: this.props.isVisible
            }

            this._toggleModal = this._toggleModal.bind(this);
        }

        _toggleModal(){
            this.setState({
                isModalVisible: !this.state.isModalVisible
            })
        }



        render() {
            return (
                <Modal style={{ flexDirection: 'column', justifyContent: 'flex-start' }} isVisible={this.props.isVisible}>
                    <View style={styles.container}>
                        <Text allowFontScaling={false} style={styles.headText}>Yeni Paylaşım Yap</Text>
                        <View style={styles.form}>
                            <Item style={styles.item} stackedLabel>
                                <Label style={styles.label}>Mesaj Kategorisi2</Label>
                                <Input onChangeText={(text) => this.setState({ email: text })} style={{padding: 10, borderWidth: 1/3, borderColor: 'gray', color: '#212121'}} blurOnSubmit={false} placeholder="E-Posta adresiniz" />
                            </Item>
                            <Item style={styles.item} stackedLabel>
                                <Label style={styles.label}>Mesajınız</Label>
                                <Text allowFontScaling={false}area rowSpan={5} bordered placeholder="Textarea" style={{ borderWidth: 1/4, color: '#212121', width: '100%' }} />
                            </Item>
                            <Item style={styles.item} stackedLabel>
                                <TouchableOpacity onPress={() => this.openPicker()} style={styles.imageButton}>
                                    <Text allowFontScaling={false} style={styles.imageText}>Görsel Seçin</Text>
                                </TouchableOpacity>
                            </Item>
                            <Button style={styles.sendButton} block>
                                <FontAwesome name="paper-plane" size={20} color="#fff" />
                                <Text allowFontScaling={false} style={{marginLeft: 5, fontSize: 16, color: '#fff'}}>Kapıyı Tıklat!</Text>
                            </Button>
                            <Button onPress={() => this._toggleModal()} style={{backgroundColor: '#E74C3C', marginVertical: 10}} block>
                                <FontAwesome name="times-circle" size={20} color="#fff" />
                                <Text allowFontScaling={false} style={{marginLeft: 5, fontSize: 16, color: '#fff'}}>Vazgeç!</Text>
                            </Button>
                        </View>
                    </View>
                </Modal>
            );
        }
    }

Answer 1

Your error is probably here : isModalVisible: this.props.isVisible

You should write isModalVisible: false in the state if you do not pass anything from the props.

Why there are 3 downvotes? If someone's new we should try to understand their question and solve the issue

Answer 2

i think the issue is with react-native-image-crop-picker package! try to update it and reconfigure it again!