My React Native (RN) Journey to building an app on Android

06-June-2022 

I get this bright idea of developing a small word game on the mobile, a derivative of hangman, where the "word" in question will be the name of some Bollywood movie. I like the idea, run it across with friends, and get a positive response. 

So this will be my next project. Piece of cake. I don't know RN, but I am confident, I will get this done in about a week's time, I say to myself. I decide to look for some existing sites that have this game, and I come across this: Bollywood Movie Hangman Game

07-June-2022
At this point, my journey begins. As I search youtube for videos that can help, I come across Build Wordle with React Native, a code demo of deveoping wordle using RN. I decide to follow the tutorial to see where I end up.

Very soon, I face my first problem. What is expo? I have installed node.js and installed VSCode. I have created an app. Google Guru leads me to the React Native Documentation. 

Here, I learn that there are two ways of developing apps with RN. One is with expo CLI, where you are pretty much limited in what you can do, given the expo libraries. Another, is to use RN CLI, which is more complicated. Mainly, RN CLI is based on Android Studio Platform, which is more java based. But you can build the wordle game with expo, so I continue.

I have to download the keyboard libraries that Vadim (the tutor) built, and am lost into understanding how it works. I leave understanding it for now.

The emulator doesn't show up. To solve this issue:
  • Install Android Studio
  • Setup Android SDK,
  • From SDK Manager, download SDK files for running Emulator
  • From Device Manager, select the emulator you want, and download related files. Once done, run the device. This will get your emulator working.

09-June-2022
I also note that the list of words are mentioned as constants in the code itself. I want to put those words in either a flat file, or sqlite database.So therefore, I now digress and go searching for how to read from a flat file. Turns out, there is no easy way of doing that. 

Next, I try to look into sqlite and get the data from there. While searching for this, I came across this video,  which looks like it will clear lots of  fundamentals, so I start following The Complete React Native Course 2021: from Zero to Hero.

Resuming after a long break...

21-June-2022
On a whim, when looking at the extensions, I decided to disable Dart, flutter, Kotlin and a few more, since  I thought I would have no use for them. Turns out that was a mistake. Next thing I know, this error message pops up when starting Android Studio.

I reinstalled Android Studio. This did not solve the issue. This link  Android Studio missing essential plugin org.jetbrains.android helped me solve the issue. Disabling Kotlin landed me into this kind of trouble.



The plugins you should not disable : Kotlin, Smali Support, Gradle, Groovy, Properties, JUnit ntelliLang. Also you may not disable Layoutlib Native and Layoutlib Standard. If you disable these, Project View - Android would be stuck loading.. 

One suggested solution is to delete the file in the location (for Windows) - 
C:\Users\{user}\AppData\Roaming\Google\{Android folder}\disabled_plugins.txt

Simply deleting the line in the file that mentions kotlin also solved the problem.

So now, I am fully set, My phone emulator is working, changes to my code are reflecting on the emulator, as well as my physical device.

The next topic at hand is to eject expo. If you have built your app using expo CLI, and later realise you need to move to RN CLI, you eject expo.

Comments

Post a Comment

Popular posts from this blog

Reading a pre-populated sqlite database using react native with expo..

Image
I recently needed to read an existing sqlite database, and return its contents to the react native front-end on an android emulator.  I  read several related posts on the subject but they all give examples of console logging, never returning.  I faced quite some difficulties, and hence decided to create this post as a blog. Hope it helps someone who comes here looking for a solution. Usually, there are two main issues that you would face. One, you would notice that simply opening a database and fetching won't work. You need to copy the local database to an internal document store and then use that database. Second, you would notice that there is no way of 'returning' the value of  a variable in the traditional sense of the term. You must handle it within the async function itself. So follow me for the solution.  Step 1. Create the root folder. From the terminal in the root folder, create the react native app with expo using : expo init newApp Choose the blank te...
Read more

React Hooks - useState Vs useRef (An explanation)

Image
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...
Read more

My React Native Journey - 10 - Sharing Wordle success on social media

 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(                           ...
Read more