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

react native axios/fetch fails

If your requests are going as network errors for whatever you do and not able to 

get it working on RN >60

Try to tell android manifest that you need a network config.

android:networkSecurityConfig="@xml/network_security_config"

Also create the xml and raw folder in resource folder of app and add the

public key of your site to the raw folder with out the extension . .

yoursite.cer should be specified as .. @raw/yoursite in your network config.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
  
           <domain includeSubdomains="true">yoursite address</domain>
   

        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
 
       
            <certificates src="@raw/certificatefilenamewithoutextension"/>
        </trust-anchors>
    </domain-config>
</network-security-config>

React Native common errors

Task :app:transformClassesAndResourcesWithR8ForRelease FAILED R8: Program type already present: io.invertase.firebase.BuildConfig

Check the package.json and remove  extra react native packages for firebase.

Could be possible that while trying out firebase integration you have installed multiple versions via npm install.

Error 2

This app is not authorized to use Firebase Authentication.Please verify that the correct package name and SHA-1 are configured in the Firebase Console

You need to have the SHA1 of your debug keystore if you are doing testing in debug mode.

Even if you have configured to use Google play signing , atleast for debug you need a seperate key.

//cd android/app

//keytool -list -v -keystore debug.keystore  -alias android  

password will  most probably be android.

Copy this fingerprint from the debug keystore to your firebase console and test your app.

While moving to prod, copy the sha1 from google play console and update it in the firebase console.