Invariant Violation in React Native - reactjs

Question

I am trying to use ListView on my js page and I am getting no data on my screen. The screen is totally blank. Below is the image of the empty screen. I am getting a warning.
Below is my code where I am calling the ListView:
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
const styles = StyleSheet.create({
container: {
flex: 1,
width: 353,
flexWrap: 'wrap',
paddingTop: 20,
paddingLeft: 20,
},
});
const store = createStore(reducers);
class AutoCompActivity extends Component {
componentWillMount() {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this.dataSource = ds.cloneWithRows(this.props.services);
}
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ListView
enableEmptySections={true}
dataSource={this.dataSource}
renderRow={(rowData) =>
<ServiceItem services={rowData} />
}
/>
</View>
</Provider>
);
}
}
const mapStateToProps = state => {
return { services: state.services };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);
const app1 = () => (
<Provider store={store}>
<ConnectedAutoCompActivity />
</Provider>
)
export default app1;
My ServiceItem.js file is below:
import React from 'react';
import { StyleSheet, Text, View, Button, ImagePropertiesAndroid } from 'react-native';
import {connect} from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import Icon from 'react-native-vector-icons/EvilIcons';
import * as actions from '../actions';
const theme = getTheme();
const styles = StyleSheet.create({
card: {
marginTop: 20,
},
title: {
top: 20,
left: 80,
fontSize: 24,
},
image: {
height: 100,
},
action: {
backgroundColor: 'black',
color: 'white',
},
icon: {
position: 'absolute',
top: 15,
left: 0,
color: 'white',
backgroundColor: 'rgba(255,255,255,0)',
},
});
const ServiceItem=(props)=>{
return(
<View>
<Text style={[theme.cardTitleStyle, styles.title]}>{props.services.services}</Text>
</View>
)
}
export default connect(null, actions)(ServiceItem);
My Json file is very simple:
[
{
"services": "Test1"
},
{
"services": "Test2"
},
{
"services": "Test3"
},
{
"services": "Test4"
},
{
"services": "Test4"
}
]
My service.Reducer has the following code:
import services from './services.json';
const initialState = {
services
};
export default (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
}
I checked my code several times and could not find any issue. I also installed react redux. Store is defined as const in my code. I am just trying to show each service as
test1,
test2 on my phone
Any help will be greatly appreciated.

Answer 1

The problem here is that you are using Provider inside connected component.
The connected component should be wrapped inside <Provider>. Replace your code with the following and it will work as expected.
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
const styles = StyleSheet.create({
container: {
flex: 1,
width: 353,
flexWrap: 'wrap',
paddingTop: 20,
paddingLeft: 20,
},
});
const store = createStore(reducers);
class AutoCompActivity extends Component {
componentWillMount() {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this.dataSource = ds.cloneWithRows(this.props.services);
}
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<ListView
enableEmptySections={true}
dataSource={this.dataSource}
renderRow={(rowData) =>
<ServiceItem services={rowData} />
}
/>
</View>
</Provider>
);
}
}
const mapStateToProps = state => {
return { services: state.services };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);
const App = () => (
<Provider store={store}>
<ConnectedAutoCompActivity />
</Provider>
)
export default App;