Hands-On Design Patterns with React Native

The DI pattern

Importing and using an imported value in the same file locks that file to the concrete implementation. For instance, check out the following app code implementation:

import AddTaskContainer from '../path/to/AddTaskContainer';import TaskListContainer from '../path/to/TaskListContainer';export const TasksSection = () => (    <View>        <AddTaskContainer />        <TaskListContainer />    </View>);

In this code example, the TasksSection component is composed of two container components, AddTaskContainer and TaskListContainer. The important fact is that you cannot modify either of the container components if you are a consumer of the TasksSection component. You need to rely on the implementations provided by imported modules.

To fix this problem, ...