CoderslangJS

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,...

Let’s add the component src/components/Buttons/RadialButton. This component must return a TouchableOpacity element that wraps the Icon component. The onPress property must be forwarded to TouchableOpacity. Pass the following properties to the Icon component: size - 35, color - colors....

Let’s add the src/components/NavigationHeader component. This component should return the StatusBar element. NavigationHeader should have default properties: barStyle: dark, backgroundColor: transparent. The StatusBar must have animated and translucent properties equal to true....

Let’s work on the Lists screen. It should return a snippet with two SafeAreaView elements. The first one should have styles: flex: 1, backgroundColor - colors.blue. Second: flex: 0, backgroundColor: colors....

Let’s connect redux and navigation to our application To do this, import the src/components/Navigator component and the Provider component from react-redux. Now, after the fonts are loaded in the <App /> component, the navigator wrapped by the provider should be returned....