{"action":"created","issue":{"url":"https://api.github.com/repos/react-community/react-native-maps/issues/889","repository_url":"https://api.github.com/repos/react-community/react-native-maps","labels_url":"https://api.github.com/repos/react-community/react-native-maps/issues/889/labels{/name}","comments_url":"https://api.github.com/repos/react-community/react-native-maps/issues/889/comments","events_url":"https://api.github.com/repos/react-community/react-native-maps/issues/889/events","html_url":"https://github.com/react-community/react-native-maps/issues/889","id":195341883,"node_id":"MDU6SXNzdWUxOTUzNDE4ODM=","number":889,"title":"TypeError: Cannot read property 'setNativeProps' of null","user":{"login":"danbruegge","id":1296438,"node_id":"MDQ6VXNlcjEyOTY0Mzg=","avatar_url":"https://avatars2.githubusercontent.com/u/1296438?v=4","gravatar_id":"","url":"https://api.github.com/users/danbruegge","html_url":"https://github.com/danbruegge","followers_url":"https://api.github.com/users/danbruegge/followers","following_url":"https://api.github.com/users/danbruegge/following{/other_user}","gists_url":"https://api.github.com/users/danbruegge/gists{/gist_id}","starred_url":"https://api.github.com/users/danbruegge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/danbruegge/subscriptions","organizations_url":"https://api.github.com/users/danbruegge/orgs","repos_url":"https://api.github.com/users/danbruegge/repos","events_url":"https://api.github.com/users/danbruegge/events{/privacy}","received_events_url":"https://api.github.com/users/danbruegge/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-12-13T19:13:48Z","updated_at":"2018-07-25T19:34:19Z","closed_at":"2017-12-14T05:16:01Z","author_association":"NONE","body":"Hi,\r\n\r\nusing the `MapView` component i got this error:\r\n```bash\r\nTypeError: Cannot read property 'setNativeProps' of null\r\n\r\n  at MapView._updateStyle (node_modules/react-native-maps/components/MapView.js:412:9)\r\n  at MapView.componentDidMount (node_modules/react-native-maps/components/MapView.js:406:6)\r\n  at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25\r\n  at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)\r\n  at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11\r\n  at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)\r\n  at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)\r\n  at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)\r\n  at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)\r\n  at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)\r\n```\r\nIt only appears in `<MapView>`, `<MapView.Marker>` for example works fine.\r\n\r\ntest code:\r\n```javascript\r\nimport React from 'react';\r\n\r\nimport renderer from 'react-test-renderer';\r\n\r\nimport MapView from 'react-native-maps';\r\n\r\ndescribe('renders correctly', () => {\r\n    it('on visible=true', () => {\r\n\r\n        const component = (\r\n            <MapView liteMode>\r\n                <MapView.Marker />\r\n            </MapView>\r\n        );\r\n\r\n        const tree = renderer.create(component).toJSON();\r\n\r\n        expect(tree).toMatchSnapshot();\r\n    });\r\n});\r\n```\r\n\r\n```\r\n\"dependencies\": {\r\n    \"moment\": \"^2.17.1\",\r\n    \"react\": \"^15.4.1\",\r\n    \"react-native\": \"^0.39.2\",\r\n    \"react-native-maps\": \"^0.12.2\",\r\n    \"react-native-vector-icons\": \"^3.0.0\",\r\n    \"realm\": \"0.15.1-rc\"\r\n},\r\n\"devDependencies\": {\r\n    \"babel-jest\": \"17.0.2\",\r\n    \"babel-preset-react-native\": \"1.9.0\",\r\n    \"jest\": \"17.0.3\",\r\n    \"jest-react-native\": \"^17.1.0\",\r\n    \"react-test-renderer\": \"^15.4.1\"\r\n},\r\n\"jest\": {\r\n    \"preset\": \"react-native\",\r\n    \"bail\": true,\r\n    \"testPathIgnorePatterns\": [\r\n        \"node_modules/?!react-native|react|realm|react-native-maps\",\r\n        \"._.js\"\r\n    ]\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/react-community/react-native-maps/issues/comments/407869715","html_url":"https://github.com/react-community/react-native-maps/issues/889#issuecomment-407869715","issue_url":"https://api.github.com/repos/react-community/react-native-maps/issues/889","id":407869715,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzg2OTcxNQ==","user":{"login":"javc86","id":20764288,"node_id":"MDQ6VXNlcjIwNzY0Mjg4","avatar_url":"https://avatars3.githubusercontent.com/u/20764288?v=4","gravatar_id":"","url":"https://api.github.com/users/javc86","html_url":"https://github.com/javc86","followers_url":"https://api.github.com/users/javc86/followers","following_url":"https://api.github.com/users/javc86/following{/other_user}","gists_url":"https://api.github.com/users/javc86/gists{/gist_id}","starred_url":"https://api.github.com/users/javc86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/javc86/subscriptions","organizations_url":"https://api.github.com/users/javc86/orgs","repos_url":"https://api.github.com/users/javc86/repos","events_url":"https://api.github.com/users/javc86/events{/privacy}","received_events_url":"https://api.github.com/users/javc86/received_events","type":"User","site_admin":false},"created_at":"2018-07-25T19:34:19Z","updated_at":"2018-07-25T19:34:19Z","author_association":"NONE","body":"I applyed the @tugorez solution, but it don't work for me. Here my code:\r\n`import 'react-native';\r\nimport React, {Component, createElement} from 'react';\r\nimport {Provider} from 'react-redux';\r\nimport renderer from 'react-test-renderer';\r\nimport configureMockStore from 'redux-mock-store';\r\nimport Proptypes from 'prop-types';\r\nimport Maps from '../../app/src/screens/Maps';\r\n\r\nconst mockStore = configureMockStore();\r\nconst store = mockStore({});\r\n\r\njest.mock('react-native-maps', () => (\r\n    class MockMapView extends Component {\r\n      static Marker = props => createElement('Marker', props, props.children);\r\n\r\n      static propTypes = {\r\n          children: Proptypes.any.isRequired\r\n      };\r\n\r\n      render() {\r\n          const {children} = this.props;\r\n          return createElement('MapView', this.props, children);\r\n      }\r\n    }\r\n));\r\n\r\nit('renders correctly', () => {\r\n    const navigation = {navigate: jest.fn()};\r\n\r\n    const tree = renderer.create(\r\n        <Provider store={store}>\r\n            <Maps navigation={navigation}/>\r\n        </Provider>\r\n    ).toJSON();\r\n    expect(tree).toMatchSnapshot();\r\n});\r\n`\r\nMaps component\r\n\r\n`import React, {Component} from 'react';\r\nimport {\r\n    View,\r\n    BackHandler,\r\n    Animated\r\n} from 'react-native';\r\nimport {bindActionCreators} from 'redux';\r\nimport {connect} from 'react-redux';\r\nimport Proptypes from 'prop-types';\r\nimport MapView, {UrlTile, Marker, Callout} from 'react-native-maps';\r\nimport Picker from 'react-native-picker';\r\nimport styles from './styles';\r\nimport * as actions from '../../modules/projects/reducers';\r\n\r\nimport ServicesInfoBox from '../../components/ServicesInfoBox';\r\nimport ServiceNoOkDetailBox from '../../components/ServiceNoOkDetailBox';\r\nimport ArrowBack from '../../components/ArrowBack';\r\n\r\nclass Maps extends Component {\r\n    static navigationOptions = {\r\n        header: null\r\n    }\r\n\r\n    static propTypes = {\r\n        // projects: Proptypes.shape({}).isRequired,\r\n        navigation: Proptypes.shape({\r\n            navigate: Proptypes.func.isRequired\r\n        }).isRequired\r\n    }\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            initialRegion: {\r\n                latitude: -34.5737,\r\n                longitude: -58.4630,\r\n                latitudeDelta: 0.005,\r\n                longitudeDelta: 0\r\n            },\r\n            markerLatLng: {\r\n                latitude: -34.5737,\r\n                longitude: -58.4630\r\n            },\r\n            services: [\r\n                {\r\n                    name: 'Luz',\r\n                    status: 'no-ok',\r\n                    icon: 'lightbulb-o'\r\n                },\r\n                {\r\n                    name: 'Internet',\r\n                    status: 'no-ok',\r\n                    icon: 'wifi'\r\n                },\r\n                {\r\n                    name: 'Cable',\r\n                    status: 'ok',\r\n                    icon: 'television'\r\n                },\r\n                {\r\n                    name: 'Luz',\r\n                    status: 'ok',\r\n                    icon: 'phone'\r\n                }\r\n            ],\r\n            showServiceNoOkDetailBox: false,\r\n            animate: new Animated.Value(0)\r\n        };\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {\r\n            this.handleBackPress();\r\n            return true;\r\n        });\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        this.backHandler.remove();\r\n    }\r\n\r\n    handleBackPress() {\r\n        const {navigation} = this.props;\r\n        navigation.goBack();\r\n    }\r\n\r\n    createDateData() {\r\n        const {services} = this.state;\r\n\r\n        const servicesNoOk = [];\r\n\r\n        services.forEach(service => {\r\n            if (service.status === 'no-ok') {\r\n                servicesNoOk.push(service.name);\r\n            }\r\n        });\r\n\r\n        return servicesNoOk;\r\n    }\r\n\r\n    render() {\r\n        const {\r\n            initialRegion,\r\n            services,\r\n            showServiceNoOkDetailBox,\r\n            markerLatLng,\r\n            animate\r\n        } = this.state;\r\n\r\n        const onShowHideServiceNoOkDetailBox = () => {\r\n            if (!showServiceNoOkDetailBox) {\r\n                Animated.timing(animate, {\r\n                    toValue: 250,\r\n                    duration: 800\r\n                }).start();\r\n            } else {\r\n                Animated.timing(animate, {\r\n                    toValue: 0,\r\n                    duration: 800\r\n                }).start();\r\n            }\r\n\r\n            this.setState({\r\n                showServiceNoOkDetailBox: !showServiceNoOkDetailBox\r\n            });\r\n        };\r\n\r\n        const showDatePicker = () => {\r\n            Picker.init({\r\n                pickerData: this.createDateData(),\r\n                pickerFontColor: [255, 0, 0, 1],\r\n                onPickerConfirm: (pickedValue, pickedIndex) => {\r\n                    console.log('date', pickedValue, pickedIndex);\r\n                    onShowHideServiceNoOkDetailBox();\r\n                },\r\n                onPickerCancel: (pickedValue, pickedIndex) => {\r\n                    console.log('date', pickedValue, pickedIndex);\r\n                },\r\n                onPickerSelect: (pickedValue, pickedIndex) => {\r\n                    console.log('date', pickedValue, pickedIndex);\r\n                }\r\n            });\r\n            Picker.show();\r\n        };\r\n\r\n        const back = () => {\r\n            const {navigation} = this.props;\r\n            navigation.goBack();\r\n        };\r\n\r\n        return (\r\n            <View style={styles.container}>\r\n                <ArrowBack back={back}/>\r\n                <MapView\r\n                    provider={null}\r\n                    mapType=\"none\"\r\n                    style={styles.map}\r\n                    initialRegion={initialRegion}\r\n                >\r\n                    <UrlTile\r\n                        urlTemplate=\"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png\"\r\n                        maximumZ={20}\r\n                    />\r\n                    <Marker\r\n                        coordinate={markerLatLng}\r\n                    >\r\n                        <Callout\r\n                            style={styles.callout}\r\n                            onPress={() => showDatePicker()}\r\n                        >\r\n                            <ServicesInfoBox\r\n                                services={services}\r\n                            />\r\n                        </Callout>\r\n                    </Marker>\r\n                </MapView>\r\n                <ServiceNoOkDetailBox\r\n                    address=\"Escobar 3101, CABA\"\r\n                    onShowHideServiceNoOkDetailBox={onShowHideServiceNoOkDetailBox}\r\n                    animate={animate}\r\n                />\r\n            </View>\r\n        );\r\n    }\r\n}\r\n\r\nconst mapStateToProps = state => ({projects: state.projects});\r\nconst mapDispatchToProps = dispatch => (bindActionCreators(actions, dispatch));\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Maps);\r\n`\r\n\r\nThe error\r\n\r\n> renders correctly\r\n\r\n    TypeError: this.map.setNativeProps is not a function\r\n\r\n      at MapView._updateStyle (node_modules/react-native-maps/lib/components/MapView.js:490:16)\r\n      at MapView.componentDidMount (node_modules/react-native-maps/lib/components/MapView.js:484:14)\r\n      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6444:22)\r\n      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7540:7)\r\n      at Object.invokeGuardedCallback$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1841:10)\r\n      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1986:29)\r\n      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7681:7)\r\n      at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8650:34)\r\n      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8595:9)\r\n      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8527:7)\r\n\r\n"}}
{"actor":{"display_login":"javc86"}}