CoderslangJS

Let’s add the src/components/Buttons/IconButton component. This component must return the TouchableOpacity element. The styles for this component must be an array of styles. The first element of the array must contain a padding style of 3....

Let’s add the src/components/Input component. This component must be returned by the View element. The styles for this component must be an array of styles. The first element of the array must contain the following styles: borderRadius - 4, height - 35, flex - 1,...

Let’s add the src/components/Buttons/Button component. This component should return the TouchableOpacity element with styles: borderRadius - 4, height - 35, width - 120, justifyContent - center, alignItems - center, backgroundColor-colors.blue3, shadowOpacity-0....

Now let’s add a component that will be an element of the Lists. Let’s add it to the src/containers/Lists/List folder. First, let’s add the getWordsCount helper method in the src/containers/Lists/List/helpers.js file....

The FlatList element of the Lists container must have the data and renderItem properties defined to display the list items. The data property must equal the lists property of the container....

Let’s connect the List component to the repository. You only need to transfer the WORDS field to the List component. Only when passing it to a component should it be renamed to words....

Let’s work on the AddingListOrWord container. This screen will have one input field, and the entered value will need to be stored somewhere. Use useState for this. The AddingListOrWord container itself must return a SafeAreaView with styles:...

Let’s work on the Words container, which should return two SafeAreaView items. The first with styles: flex - 1,backgroundColor - colors.blue1, and the second: flex - 0, backgroundColor - colors.blue1....

Let’s work on the redux methods. But first, let’s add the required constants to the src/external/redux/constants file. API, FETCH_WORD_ENDPOINT, ADD_WORD, SET_ERROR, SET_LOADING - the value of all constants is equal to their name....

The data needs to be stored somewhere. To do this, let’s use the @react-native-async-storage/async-storage library. Let’s write two functions to save and read data in the functions.js file at the root of the project....