JavaScript

Now let’s work on the Details component. It should return the View element. For View, the marginVertical property must be 10. Inside the View, first add a Text element: for the detailsKey value defs - the inner text is Definition:,...

Now is the time to work on the Word component. It will expand and collapse word details. To do this, add a flag using the useState hook. The initial value is false....

To display the data, you must first prepare. To do this, export the preparedDetails function from the file: src/containers/Words/Word/helpers.js. This function must receive one meanings argument. meanings is an array of objects that describe a word....

We need to add one more, this time the last, component. Let’s create it in the src/components/AlertModal folder. This component must return the Modal element. The visible property should be cast into it, and the handleClose property should be passed into its onRequestClose property....

Let’s add a modal window to the Words container. First, let’s add the logic to enable it. Let’s create its state with useState. The initial value is an object with fields:...

Let’s add the navigator component in the file src/components/Navigator/index.js. Let’s immediately add temporary components for our future screens. Let’s place them in the src/containers folder: Words/index.js, Lists/index.js, AddingListOrWord/index.js. All components and containers must be named exactly the same as the folders in which they are located....

The Words container needs to be connected to the store using the connect method. We will use both mapStateToProps and mapDispatchToProps. mapStateToProps should only return one words property equal to the WORDS from the state....

The AddingListOrWord container must be connected to the store using the connect method. We will use both mapStateToProps and mapDispatchToProps. mapStateToProps must return two loading and error properties from the state....

The final touch is loading data between inclusions. In the file App.js, add a call to the store.dispatch method before loading the fonts. store we imported earlier and passed it to the provider....

Let’s add a file with a list of colors that will be used in the project. From the src/assets/styles/colors.js file, export the default object. In this object, define the colors: blue: #4D8ADA, blue1: #FAFCFF, blue2: #D5E2F2, blue3: #DEECFE, black: #1E1E1E,...