react native tips and trick

kumpulan tips react native

kumpulan tips react native

Updating an object with setState in React

There are multiple ways of doing this.

1- Simplest one:

First create a copy of jasper then do the changes in that:

let jasper = Object.assign({}, this.state.jasper);    //creating copy of object
jasper.name = 'someothername';                        //updating value
this.setState({jasper});
Instead of using Object.assign we can also write it like this:

let jasper = {...this.state.jasper};
2- Using spread operator:

this.setState(prevState => ({
    jasper: {
        ...prevState.jasper,
        name: 'something'
    }
}))

link : https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react

export multiple function react native
https://www.youtube.com/watch?v=qPkRIgwOx1M

react native splashScreen

1. package yang digunakan : https://github.com/crazycodeboy/react-native-splash-screen
2. tutorial cara menggunakan di youtube : https://www.youtube.com/watch?v=yFrx8HZlNtI
3. tutorial cara menggunakan di medium : https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

contoh auth flow
https://snack.expo.io/@react-navigation/auth-flow-v3

react native image overflow hidden
untuk meyembunyikan image dibalik container
https://github.com/react-native-training/react-native-elements/issues/884

#pengalaman menggunakan RN FIrebase

1. repo https://github.com/rohitmodi12/firebasePushnotificaiton
2. video tutorial rnFirebase : https://www.youtube.com/watch?v=nHvw1mcaOs0
3. video tutorial server push notification firebase : https://www.youtube.com/watch?v=6uZ7Fw8AVlk
4. push server : http://pushtry.com/

membuat shadow effet di react native

shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.30,
shadowRadius: 4.65,

elevation: 8,

link generator : https://ethercreative.github.io/react-native-shadow-generator/

Transparent header background

headerTransparent: true

link : https://stackoverflow.com/questions/52469579/transparent-background-for-header-using-createstacknavigator-react-native

"cara handle tombol back"
https://reactnavigation.org/docs/en/custom-android-back-button-handling.html

dokumentasi dan link belajar React native beserta contohnya

• https://reactnativeexample.com

React native Map

catatan : setelah release app aplikasi juga membutuhkan Sidik jari sertifikat SHA-1 dari playstore di bagian Sertifikat penandatanganan aplikasi

infinite scroll react hook

refeerensi
example code

run emulator form CLI

move to dir C:\Users\USDI_RIO\AppData\Local\Android\Sdk\emulator

List Emulator

emulator -list-avds

Run Emulator

emulator -avd @name of emulator

add to windows path (optional)

• go to environment variables
• clint environment variables
• system variables clict path variables
• new and paste ``C:\Users\USDI_RIO\AppData\Local\Android\Sdk\emulator`

Open Setting

https://stackoverflow.com/questions/39081688/open-settings-app-from-another-app-in-ios-react-native