React native app debug

Create a react app via the quickstart, need studio /jdk 11 /some env entries. 

js debug via the chrome insp controls. 

use npm start and it will launch android emulator . need sdk tools installed for emulator to work . 

./gradlew assembleDebug for debug apk 

npx react-native run-android --variant=release

Pushing a react native app to playstore

Your app build.gradle will have information about the debug or release apk you will clreate.

check the proguard rules in case you get errors while creating the release app via the

./gradlew assembleRelease or ./gradlew bundleRelease 

Bundle release will create .aab file which google likes and will create architecture specific builds.. 

so that the google android platform identifies on run time, what kind of device is requesting the apk 

and it pushed only that build , it reduces the over all size to 20 percent of actual size.

If your apk size is 30mb and you use enable architecture specific build in proguard rules 

 */
def enableSeparateBuildPerCPUArchitecture = false // if you set true you will get 4 different builds for different architectures... either use this 

or make the bundle of release and let google decide which build to push .. 

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = true   // if u use this, you might hit the class not found errors on the logcat console while doing adb logcat .. 

you will have to change pro guard rules to skip  those files for which you are getting class not found errors in release apks .. or crashes.. 

Every release you make to your exisiting app should have the bundle version code and version number greater 

than the older artifact, else it will be shadowed and new devices will never get your updated.

  versionCode 3434
        versionName "1.5"

Also let google manage your keys... signing keys ... please dont confuse sha1 fingerprints with signing keys... 

Your sha1 fingerprints are used to  restrict .. google maps api key access as well as firebase api key restrictions... 

the fat arrow magic in React

Well this confuses a lot of people when it comes to updating states in react 

components as well as referring to local variables or calling the main components functions.

To capture events from current components and pass the values to state

you can use the following.

passing input values via onchange handlers and to set them to state you can use fat arrow

i love fat arrow because you dont have to worry about this.value everywhere..

<input onChange = {()=> this.componentFuncttion(e)>

componentFunction = (e)=>this.setState({stateVariable:e.target.value});

Beauty here is this above refers to the main component this and the valuesis passed to the state..

Another beautiful use of fat arrow I have seen is that ... you don't need to pass variables inside the

function and you can directly refer to the variables which are above the scope of the fat arrow... 

but make sure if the structure is like below.. than fat arrow will refer to the closest _this and not the parent this.

CoolComponent extends React.component {

constructor(){

}

var a = 10;

function getData(a){

var a = 0 ;

const input = <input onChange={e=>this.a=1}/>

//now this refers to the closest a =0 which

}

console.log(' value of a is' + getData(a));// will print 1

console.log('value of a is + a) //will print 10 

}

React hooks

Hooks are basically used in functional components to introduce core

react functionality .. e.g useEffect can call a function once or on a value chang e

useEffect(()=>

{

}

,[what ever value you want to fire this effect on change]);

useState we can use component like state inside the functional components.

they are a life savers when you want to maintain state in functional components.. 

e.g const [ variable, function ]  = useState(null)

Now this will work like a normal state .function .. its awesome..

you can use useRef also to create references...