My React Native Journey

In this blog, I hope to provide a simple explanation of how useReducer works! Atleast, the part that I found difficult to understand. Take a goal e.g. We require a functionality, where, everytime the Increment Button is pressed, the counter should increment by 100. The reducer code to do this is written as: const  [ new State ,  dispatchAction ]  =   useReducer (   counterIncrementer , initialState ) ; This line of code lets React know that: 1. When dispatch is triggered (e.g. on click of the Increment Button), it should use the  counterIncrementer (reducer) function. 2. It should run the  counterIncrementer (reducer) function using the initialState and the action type ('increment') provided. 3. It should then return the newState as a result o f the reducer function. Here is my attempt to present this process in the form of a flowchart. Hope this helps!!  

I have tried to provide a brief  flowchart representation of how useState, useEffect and useRef work. The source for this explanation is from  WebDev Simplified's you tube channel . Suppose you wanted to show a name field and a count field to count how many times you updated the name field.  The diagram below shows the code (not focussing too much on the syntax and stuff), how one would normally do it, and the challenges/details of how react will work in each case. In general, on the left part of the diagram, I have provided the code, the middle part displays the contents of the form as things happen, and have included some explanation on how it all works on the right part.  Hoping the picture is self-explanatory.  The biggest usecase for useRef is to refer to the elements inside of the HTML. Each element inside the focument has a 'ref' attribute which can be set to anything. Most common use is to set focus to a certain element in the DOM. In the pictorial below...

I have a list of company names in my excel sheet, and I want to get the corresponding website URL. After trying hard using WEBSERVICES and FILTERXML using excel VBA, I didn't get much of a result. I then switched to Python, for better results.  Turns out there is a library called googlesearch which helps achieve the same. I am providing the steps below: Save the list of companies in a text file. Here is the code that achieves the task from googlesearch import search file = open ( "your_file_name.txt" , "r" ) links = file. read (). split ( ' \n ' ) #print(links) with open ( "yourfilenamewithlinks.txt" , "w" ) as f:     for query in links:         print (query)         for results in search (query, tld = "co.in" , num = 1 , start = 1 , stop = 1 , pause = 10 ):                 f. write (query)                 f. write ( "," )     ...

Creating a master list words for the game So far, we have worked with the code to work with one word "hello". Now, we will arrange it so that the game is able to select random words from a list. Vadim's tutorial selects a daily word, going by the day, between 1 and 366. So there would be 366 words in his list, and if there are more, they will never be selected. I have kept the same approach, except for a slight deviation that he maintains the list of words in the App.js code itself, I chose to move it to another file. I created a data folder in the root directory, and initially played with trying to read a text file (words.txt) or CSV file (words.csv). It seems there is no easy way of doing this, and honestly, I didn't try very hard. So, I created a words.js file, which exports the list of words, like so. Note that there are 366 words in this list. export const words_list = ['amaze,'amuse,'abyss'....366 words]; So, here is the code in the App.js file:...

 Sharing success on social media In the Wordle game, users post their success by hiding the individual words guessed and only showing the colored squares. This lets other users understand how many tries the poster took to arrive at the correct word. How is this done? When the user wins, we send out a message saying he won. In addition, we show a clickable text field, called Share. On press of this text field, we execute a function called shareScore, which will return the colored rows, and also copy the same to clipboard. For the clipboard,  import * as Clipboard from "expo-clipboard"; Alert.alert('Hurraayy', 'You won', [{text: 'Share', onPress: shareScore}]); Function shareScore: const shareScore = () => {     const textShare = rows.map(                                 (row,i) => row.map(                           ...

 Handling the Game Won or Lost State  If all the letters in the previous row are the same as that in the selected word, the game ends with a message "You have won!".  else, if there are no more tries left, the game ends with the message "Try again tomorrow". Everytime the row changes, the app looks in the previous row, and for each element in the row, it validates it against the letter positions in the selected word. We use the useEffect hook for the purpose. useEffect (() => {     if ( curRow > 0 ) {       checkGameState ();     }   }, [ curRow ])   const checkGameState = () => {       if ( checkifWon ()) {       Alert . alert ( 'Hurraayy' , 'You won' )      } else if ( checkifLost ()) {       Alert . alert ( "Meh" , "Try again tomorrow" )      }   };   const checkifWon = () => {       const row ...

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