I am just fetching the items from server and displaying them in the list component. The component structure is like 

```
ServiceScreen(parent) -> ServicesList(child- used inside ServiceScreen) -> ServiceItem (child used inside ServicesList)

```

Every thing works well and it displays the services fetched but it gives me the following warning 

> 
> Warning: Can only update a mounted or mounting component. This usually
>  means you called setState, replaceState, or forceUpdate on an
>  unmounted component. This is a no-op. Please check the code for the
>  YellowBox component.
> 
> 
> 

Code is as follows

**ServiceScreen.js**

```
constructor(props) {
    super(props);
    this.props.actions.fetchServices();
  }
    render() {
        const { isFetching } = this.props;
        return (
          <View style={styles.container}>
            <ServicesList services={this.props.services} navigation={this.props.navigation} />
          </View>
        );
      }

```

**ServicesList.js**

```
render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
            data={this.props.services}            
            renderItem={
                ({ item }) => 
                <ServiceItem navigation={this.props.navigation} item={item} />
            }
        />
      </View>
    );
  }

```

**ServiceItem.js**

```
render() {
        const { item } = this.props;
        return (
            <TouchableOpacity onPress={this.singleService}>
                <Text>{item.service_name}</Text>
            </TouchableOpacity>
        );
    }

```

As I am using redux for state management, I have mapped the services
state to my ServiceScreen component. And I am passing down it to child
component.