react native tips and trick

kumpulan tips react native

kumpulan tips react native

FIX [react-native]could not connect to development server on android
adb reverse tcp:8081 tcp:8081

for windows
change dir to C:\Users[yourUSER]\AppData\Local\Android\Sdk\platform-tools
run :
./adb.exe reverse tcp:8081 tcp:8081

design mobile app online

• https://www.fluidui.com

• https://marvelapp.com/

Survei tool untuk build react native notification

1. using EXPO

• Tempat untuk mencoba project : https://snack.expo.io/@balinux/usdi
• video referensi : https://www.youtube.com/watch?v=jX5axGXJBa4

test notification :

ExponentPushToken[Fyz_0_EiZq1WYSvwE4nLhG]

curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[Fyz_0_EiZq1WYSvwE4nLhG]",
"title":"hello",
"body": "world",
"ttl" : 60
}'

or https://expo.io/dashboard/notifications

2. One Signal

• https://documentation.onesignal.com/docs/react-native-sdk-setup?fbclid=IwAR2ShaD8ecxhCXIEEJvgyxygHgbIuvHXoi4HTxx-n2WTUxVmlFWFCpsxVQk
  
• contoh video : https://www.youtube.com/watch?v=kWc3L9knX14

3. FCM

• rnfirebase
  https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
  

-react native fcm
https://github.com/evollu/react-native-fcm

4. Remote Push Notification With React Native

• video referensi : https://www.youtube.com/watch?v=bEPWwyqQyXg
• sample github project : https://github.com/mopitz199/RNPushNotification/blob/master/App.js

kumpulan React Native library
https://blog.bitsrc.io/11-react-native-component-libraries-you-should-know-in-2018-71d2a8e33312

ERROR
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

solusi ;
buat file local.properties di android folder dat tambahkan kode ini

sdk.dir=C:\Users\USDI_RIO\AppData\Local\Android\Sdk

stackoverflow solution : https://stackoverflow.com/questions/32634352/react-native-android-build-failed-sdk-location-not-found

flat List tutorial Medium
https://medium.freecodecamp.org/create-a-news-app-using-react-native-ced249263627
using data api : https://newsapi.org/docs/endpoints/top-headlines

referensi Home Screen:

https://play.google.com/store/apps/details?id=com.kodeversitas.cm

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