React Native

• Android Settings PATH
• React Native - Comandos de ayuda
• React Native - Comandos básicos
• React Native - tipos de letras disponibles
• React Native - Android font families
• React Native - APK release
• React Native - react-navigation basics dependencies
• React Native - Tips para reducir el tamaño del apk
• Cómo crear íconos de apps con Image Asset Studio
• React Native - Agregar Splash Screen
• React Native - javaMaxHeapSize

Android Settings PATH

Agregar lo siguiente a  ~/.bashrc (después de haber instalado Android Studio)

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

React Native - Comandos de ayuda

adb shell input keyevent 82

ps aux | grep node
kill -9 PID

adb reverse tcp:8081 tcp:8081

sudo sysctl -w fs.inotify.max_user_instances=1024
sudo sysctl -w fs.inotify.max_user_watches=100000

react-native run-android

react-native run-android --variant=release

React Native - Comandos básicos

react-native run-android

react-native run-android --variant=release

React Native - tipos de letras disponibles

Android

normal

notoserif

sans-serif

sans-serif-light

sans-serif-thin

sans-serif-condensed

sans-serif-medium

serif

Roboto

monospace

iOS:

San Francisco

Academy Engraved LET

AcademyEngravedLetPlain

Al Nile

AlNile-Bold

American Typewriter

AmericanTypewriter-Bold

AmericanTypewriter-Condensed

AmericanTypewriter-CondensedBold

AmericanTypewriter-CondensedLight

AmericanTypewriter-Light

Apple Color Emoji

Apple SD Gothic Neo

AppleColorEmoji

AppleSDGothicNeo-Bold

AppleSDGothicNeo-Light

AppleSDGothicNeo-Medium

AppleSDGothicNeo-Regular

AppleSDGothicNeo-SemiBold

AppleSDGothicNeo-Thin

AppleSDGothicNeo-UltraLight

Arial

Arial Hebrew

Arial Rounded MT Bold

Arial-BoldItalicMT

Arial-BoldMT

Arial-ItalicMT

ArialHebrew

ArialHebrew-Bold

ArialHebrew-Light

ArialMT

ArialRoundedMTBold

Avenir

Avenir Next

Avenir Next Condensed

Avenir-Black

Avenir-BlackOblique

Avenir-Book

Avenir-BookOblique

Avenir-Heavy

Avenir-HeavyOblique

Avenir-Light

Avenir-LightOblique

Avenir-Medium

Avenir-MediumOblique

Avenir-Oblique

Avenir-Roman

AvenirNext-Bold

AvenirNext-BoldItalic

AvenirNext-DemiBold

AvenirNext-DemiBoldItalic

AvenirNext-Heavy

AvenirNext-HeavyItalic

AvenirNext-Italic

AvenirNext-Medium

AvenirNext-MediumItalic

AvenirNext-Regular

AvenirNext-UltraLight

AvenirNext-UltraLightItalic

AvenirNextCondensed-Bold

AvenirNextCondensed-BoldItalic

AvenirNextCondensed-DemiBold

AvenirNextCondensed-DemiBoldItalic

AvenirNextCondensed-Heavy

AvenirNextCondensed-HeavyItalic

AvenirNextCondensed-Italic

AvenirNextCondensed-Medium

AvenirNextCondensed-MediumItalic

AvenirNextCondensed-Regular

AvenirNextCondensed-UltraLight

AvenirNextCondensed-UltraLightItalic

Bangla Sangam MN

Baskerville

Baskerville-Bold

Baskerville-BoldItalic

Baskerville-Italic

Baskerville-SemiBold

Baskerville-SemiBoldItalic

Bodoni 72

Bodoni 72 Oldstyle

Bodoni 72 Smallcaps

Bodoni Ornaments

BodoniOrnamentsITCTT

BodoniSvtyTwoITCTT-Bold

BodoniSvtyTwoITCTT-Book

BodoniSvtyTwoITCTT-BookIta

BodoniSvtyTwoOSITCTT-Bold

BodoniSvtyTwoOSITCTT-Book

BodoniSvtyTwoSCITCTT-Book

Bradley Hand

BradleyHandITCTT-Bold

Chalkboard SE

ChalkboardSE-Bold

ChalkboardSE-Light

ChalkboardSE-Regular

Chalkduster

Chalkduster

Cochin

Cochin-Bold

Cochin-BoldItalic

Cochin-Italic

Copperplate

Copperplate-Bold

Copperplate-Light

Courier

Courier New

Courier-Bold

Courier-BoldOblique

Courier-Oblique

CourierNewPS-BoldItalicMT

CourierNewPS-BoldMT

CourierNewPS-ItalicMT

CourierNewPSMT

Damascus

DamascusBold

DamascusLight

DamascusMedium

DamascusSemiBold

Devanagari Sangam MN

DevanagariSangamMN

DevanagariSangamMN-Bold

Didot

Didot-Bold

Didot-Italic

DiwanMishafi

Euphemia UCAS

EuphemiaUCAS-Bold

EuphemiaUCAS-Italic

Farah

Futura

Futura-CondensedExtraBold

Futura-CondensedMedium

Futura-Medium

Futura-MediumItalic

Geeza Pro

GeezaPro-Bold

Georgia

Georgia-Bold

Georgia-BoldItalic

Georgia-Italic

Gill Sans

GillSans-Bold

GillSans-BoldItalic

GillSans-Italic

GillSans-Light

GillSans-LightItalic

GillSans-SemiBold

GillSans-SemiBoldItalic

GillSans-UltraBold

Gujarati Sangam MN

GujaratiSangamMN

GujaratiSangamMN-Bold

Gurmukhi MN

GurmukhiMN-Bold

Heiti SC

Heiti TC

Helvetica

Helvetica Neue

Helvetica-Bold

Helvetica-BoldOblique

Helvetica-Light

Helvetica-LightOblique

Helvetica-Oblique

HelveticaNeue-Bold

HelveticaNeue-BoldItalic

HelveticaNeue-CondensedBlack

HelveticaNeue-CondensedBold

HelveticaNeue-Italic

HelveticaNeue-Light

HelveticaNeue-LightItalic

HelveticaNeue-Medium

HelveticaNeue-MediumItalic

HelveticaNeue-Thin

HelveticaNeue-ThinItalic

HelveticaNeue-UltraLight

HelveticaNeue-UltraLightItalic

Hiragino Mincho ProN

Hiragino Sans

HiraginoSans-W3

HiraginoSans-W6

HiraMinProN-W3

HiraMinProN-W6

Hoefler Text

HoeflerText-Black

HoeflerText-BlackItalic

HoeflerText-Italic

HoeflerText-Regular

Iowan Old Style

IowanOldStyle-Bold

IowanOldStyle-BoldItalic

IowanOldStyle-Italic

IowanOldStyle-Roman

Kailasa

Kailasa-Bold

Kannada Sangam MN

KannadaSangamMN

KannadaSangamMN-Bold

Khmer Sangam MN

Kohinoor Bangla

Kohinoor Devanagari

Kohinoor Telugu

KohinoorBangla-Light

KohinoorBangla-Regular

KohinoorBangla-Semibold

KohinoorDevanagari-Light

KohinoorDevanagari-Regular

KohinoorDevanagari-Semibold

KohinoorTelugu-Light

KohinoorTelugu-Medium

KohinoorTelugu-Regular

Lao Sangam MN

Malayalam Sangam MN

MalayalamSangamMN

MalayalamSangamMN-Bold

Marker Felt

MarkerFelt-Thin

MarkerFelt-Wide

Menlo

Menlo-Bold

Menlo-BoldItalic

Menlo-Italic

Menlo-Regular

Mishafi

Noteworthy

Noteworthy-Bold

Noteworthy-Light

Optima

Optima-Bold

Optima-BoldItalic

Optima-ExtraBlack

Optima-Italic

Optima-Regular

Oriya Sangam MN

OriyaSangamMN

OriyaSangamMN-Bold

Palatino

Palatino-Bold

Palatino-BoldItalic

Palatino-Italic

Palatino-Roman

Papyrus

Papyrus-Condensed

Party LET

PartyLetPlain

PingFang HK

PingFang SC

PingFang TC

PingFangHK-Light

PingFangHK-Medium

PingFangHK-Regular

PingFangHK-Semibold

PingFangHK-Thin

PingFangHK-Ultralight

PingFangSC-Light

PingFangSC-Medium

PingFangSC-Regular

PingFangSC-Semibold

PingFangSC-Thin

PingFangSC-Ultralight

PingFangTC-Light

PingFangTC-Medium

PingFangTC-Regular

PingFangTC-Semibold

PingFangTC-Thin

PingFangTC-Ultralight

Savoye LET

SavoyeLetPlain

Sinhala Sangam MN

SinhalaSangamMN

SinhalaSangamMN-Bold

Snell Roundhand

SnellRoundhand-Black

SnellRoundhand-Bold

Symbol

Tamil Sangam MN

TamilSangamMN-Bold

Telugu Sangam MN

Thonburi

Thonburi-Bold

Thonburi-Light

Times New Roman

TimesNewRomanPS-BoldItalicMT

TimesNewRomanPS-BoldMT

TimesNewRomanPS-ItalicMT

TimesNewRomanPSMT

Trebuchet MS

Trebuchet-BoldItalic

TrebuchetMS-Bold

TrebuchetMS-Italic

Verdana

Verdana-Bold

Verdana-BoldItalic

Verdana-Italic

Zapf Dingbats

ZapfDingbatsITC

Zapfino

React Native - Android font families

https://stackoverflow.com/questions/12128331/how-to-change-fontfamily-of-textview-in-android/13329907#13329907

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light"     // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-black"     // roboto black
android:fontFamily="sans-serif-thin"      // roboto thin (android 4.2)
android:fontFamily="sans-serif-medium"    // roboto medium (android 5.0)

 

React Native - APK release

https://reactnative.dev/docs/signed-apk-android

#Generating an upload key

keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

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

React Native - react-navigation basics dependencies

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.7.0",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.4.0"
  },

React Native - Tips para reducir el tamaño del apk

https://medium.com/@aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640

Reducing size of React Native App (Android)

This is what you have been waiting for, I know.

• Open up android/app/build.gradle
• Set def enableProguardInReleaseBuilds = true this would enable Progaurd to compress the Java Bytecode. This reduces the app size by a tad bit
• Set def enableSeparateBuildPerCPUArchitecture = true . Android devices support two major device artitectures armebi and x86. By default RN builds the native librariers for both these artitectures into the same apk.

Setting the last function creates two distinct apk in the build folder. You have to upload both of this apk to Play Store and Google would take care of distributing the app to the correct architectures.

Using this split generates version numbers for both apks in the order of 104856 and such. This is auto-generated by the build to avoid version conflicts, so don’t freak out (I did).

This split reduced the apk size from around 7MB to 3.5MB for arm and 5MB for x86 respectively.

Cómo crear íconos de apps con Image Asset Studio

https://developer.android.com/studio/write/image-asset-studio

React Native - Agregar Splash Screen

https://www.netguru.com/codestories/react-native-splash-screen

https://www.npmjs.com/package/react-native-splash-screen

https://github.com/crazycodeboy/react-native-splash-screen

@Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme, true); // <- here
    super.onCreate(savedInstanceState);
  }

 

React Native - javaMaxHeapSize

#  android/app/build.gradle 
 dexOptions {
       javaMaxHeapSize "4g"
    }
    
#  android/gradle.properties
org.gradle.jvmargs=-Xmx4608M