My React Native Journey

 Adding Background Colors to the grid and the keyboard. Import colors from constants.js (provided by Vadim) Adding background colors to the grid Set the background color of the cell, based on the return value of a function getCellBGColor, which takes the letter itself, the current row, and the current column, and returns the color that is expected.       < ScrollView style = { styles . map } >         { rows . map (( row , i ) => (           < View               key = { `row-${ i }` }               style = { styles . row } >               { row . map (( letter , j ) => (                 < View                   key = { `cell-${ i }-${ j }` }                   s...

Defining the Logic When a key is pressed, the following actions should be implemented: 1. The first entry should be on the leftmost tile of the first row. Subsequent keys should be on the next column of the same row until you run out of columns. At this time, the user should be able to press only CLEAR and ENTER. Pressing any other key will have no effect. 2. Pressing the CLEAR key should clear the last entered key. 3. Pressing the ENTER key should ma tch the entered word against the selected word, to check for correct letters and positions.        a.  If the entire word matches, the game should end with a "You have won" message.     b. If there is a partial match, find out the locations of correct and incorrect matches and color code                accordingly.       c. If the number of tries are completed with no match, the game should end with "Better luck next          ...

Design and Development Approach UI Design: Vadim shares three screenshots of the design for the game. Sharing a relevant one below for reference. Place the WORDLE Title at the top center.  Keyboard at the bottom for the user to select letters and Enter and Clear A 5 * 6 matrix of tiles, to represent 5 letters of the word, and 6 tries to arrive at the selected word.  Colors: White foreground.              Start with all tiles set with a Grey background.              If the chosen letter is part of the selected word, and in the right place, give a Green b/g.              If the chosen letter is part of the selected word, but not in the right place, give an Orange b/g                  Grey for letters not available in the selected word. Development Approach The Game Board Component 1. Define the SafeAreaView...

Issues faced when buildng a Wordle Clone using ReactNative and Expo  Source:  https://www.youtube.com/watch?v=2SpbSIPiDM0 Environment Information that is different from the one used in the video: java version "18.0.1.1" 2022-04-22 node.js - v18.4.0 npm 8.12.2 The first issue I face at 'expo run' is this: Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported Resolved by ' set NODE_OPTIONS =--openssl-legacy-provider' Reference:  https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope- routinesunsupported https://github.com/webpack/webpack/issues/14532#issuecomment-947012063 I did not understand why the issue came up, or how it was resolved.. Will come back to it later. Next, I try to move the list of words to a different file, so they don't clutter the existing code. I create a new file called words_list.js. In this, I export a named constant called word_list that has the list of words...

Understanding the App.js file Majorly, a single JS file contains four sections of code elements. First, import statements to import required components from react, react-native and other modules. Second, the App function written as const App = () =>{} read as Component App is of type function and whatever the function returns is rendered as a React Element. Third , use a component called Stylesheet to create a CSS abstract  const styles = Stylesheet.create({}) read as tell  StyleSheet to  create style objects with an ID, and return it to const styles. These IDs are further used to reference instead of rendering . Fourth and Finally,  export default app is used to  expor t a single class, function or primitive from a script file . Now. with this background, I decide to follow this video to build a wordle clone.

Configure VSCode for React Native Development VSCode provides settings for Themes, Editors etc for comfortable viewing of the code editing environment. It provides built in support for Code Completion, Navigation and Refactoring. It helps with Syntax highlighting, Bracket Matching,  Auto Indentation, Box Selection, adding Code Snippets and more. It also provides optional 3rd party code libraries, known as extensions. These are very helpful in making the development environment much easier. Some interesting plug-ins are: Material Icon Theme - to change the file icons that we see in the folder/file explorer view.  VS Code ES7 React/Redux/GraphQL/React Native Snippets - This extension helps complete your lines of code and includes shortcuts for repetitive componens. React Native Tools - for debugging and running projects easily Color Highlight - Highlight web colors in your editor. Bracket Pair Coloriser - This used to be an extension, but is now part of VSCode itself. npm Intell...

Understanding the folder structure and the files in it. React native is a platform on which we can make both Android and IOS apps with a single code structure How does it do it? We will try and make sense of what is happening behind the scenes. To start with, react native CLI  creates the following files/directories in the project folder, when it creates a project: _tests_ - Testing Support Jest is a JavaScript test runner, that is,  a JavaScript library for creating, running, and structuring tests . Jest ships as an NPM package, you can install it in any JavaScript project. Jest is one of the most popular test runner these days, and the default choice for React projects This folder contains project test files. There are three ways of setting up the testing folders. src/file.test.js  mentioned first in the  Getting Started  docs, and is great for keeping tests (especially unit) easy to find next to source files src/__tests__/file.test.js  lets you have mult...