react native tips and trick

kumpulan tips react native

kumpulan tips react native

memberikan parameter navigasi pada navigation Options

const AppStackNavigator = createStackNavigator({
  AppTabNavigator: {
    screen: AppTabNavigator,
    navigationOptions: ({ navigation }) => ({
      title: 'Your App',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <View style={{ paddingHorizontal: 10 }}>
            <Icon name="md-menu" size={24} />
          </View>
        </TouchableOpacity>
      )
    })
  }
})

react navigation auth flow, lengkap dengan konsep penggabungan semua jenis navigasi

https://www.youtube.com/playlist?list=PLy9JCsy2u97nn0Yrf3ioMbRL7guVlzk9d

navigationopntions styling

static navigationOptions = {
          title: 'Home',
          headerTintColor: '#ffffff',
          headerStyle: {
            backgroundColor: '#2F95D6',
            borderBottomColor: '#ffffff',
            borderBottomWidth: 3,
          },
          headerTitleStyle: {
            fontSize: 18,
          },
      };

Could not install the app on the device, read the error above for details.

run chmod 755 android/gradlew inside your app root folder
then run react-native run-android

Access the navigation prop from any component
https://reactnavigation.org/docs/en/connecting-navigation-prop.html

https://github.com/react-native-community/react-native-image-picker

yarn add react-native-image-picker
react-native link react-native-image-picker

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