React native take note

 I am not listed out what react native does, and what are the inside react native, this just notes for react native.

1. Simulators

Android
```
// get the android simulators
emulator -list-avds
// get devieces are connteting to PC
adb devices
// Run with a specific android id
npx react-native run-android --deviceId=DEVICE_ID
```
IOS
```
    xcrun simctl list
    //  Run with a specific simulator
    npx react-native run-ios --simulator="iPad (8th generation)"
```

2. React hook vs React Component circle lift (current version 18.0)

Full Component	Hook
componentDidMount	useEffect(() => {}, [])
componentWillUnmount	useEffect(() => { return () => { // unmounting}}, [])
componentDidUpdate	useEffect(() => {}) and useEffect(() => {statseChanged})
shouldComponentUpdate	useMemo(() => {})
componentDidCatch	None

3. Issues and notes

3.1 Alert.prompt

Alert.prompt only work on IOS, react native's doc recommended using Alert.alert instead

3.2 Keyboard issues

when your TextInput has a longer screen, you are not able to see what are you typing, the keyboard overlays on the screen
React Native provided a solution for this issue to use “KeyboardAvoidingView” in the RN library, same likes it did not work perfectly
The best solution for this case is using: “react-native-keyboard-aware-scroll-view”

Install

yarn add react-native-keyboard-aware-scroll-view 
// or
npm install react-native-keyboard-aware-scroll-view

Use it

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
......
<KeyboardAwareScrollView>
  <View>
    <TextInput defaultValue={'Input'} />
  </View>
</KeyboardAwareScrollView>

3.2 Error undefined Unable to resolve module {…package name…}
First, you check if the missing package has been installed or not, if haven’t installed and installed it
If you are sure, u have installed the package but still got the same error, you can try this way:
add this code in tsconfig.json

"typeRoots": [
    "../node_modules/@types",
    "../@types"
  ],

create a folder with the name “@type” in the main project
create file “alltypes.d.ts” in folder “@type”
add the code like below:

declare module 'package name here';
// for example: Unable to resolve module react-native-i18n, so I this code into "alltypes.d.ts"
declare module 'react-native-i18n';

Don't know somehow npm does not install it.
3.3 java.lang.Double cannot be cast to java.lang.Boolean
if you meet this message or the same, try to remove and add again the package that creates this error
3.3 Could not find method compile() error react native version
You may get the same issue when you are using “react-native-i18n” like this:

A problem occurred evaluating project ':react-native-i18n'.
> Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Go to “node_modules/react-native-i18n/android/build.gradle”
Find the code:

compile "com.facebook.react:react-native:+"

Replace to

implementation "com.facebook.react:react-native:+"

try to run again

3. 4 Realm

Error:

You're not opening realm on a new screen you are trying to creating a new instance. This is why you are having issues. You should only have one instance of realm in your application.

You are open to too many connections to realm
The solution is to create a file add all the schema, and export reaml once.
Example

const DATABAASE_NAME: string = 'foodDatabase.db';
const DATABASE_CONFIG = {
  path: DATABAASE_NAME,
  schema: [
    OrderModel.schema,
    OrderItemModel.schema,
    FoodModel.schema,
    FoodTypeModel.schema,
    TableModel.schema,
  ],
};

export const RealmInstance = new Realm(DATABASE_CONFIG);

3.5 Upgrade react native

Lists version information for all package dependencies

yarn outdated [package optional]
npm outdated [package optional]

Upgrade all the packages

npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.

npm install -g npm-check-updates  // or using yarn
// or with npx: npx npm-check-updates
ncu -u
npm install
cd ios && pod install

Or use other ways likes:

yarn upgrade

Be Careful when upgrading all the packages, some packages have changed, and they may not compatible with dependencies. Better move 1 by one.

For example: when you upgrade the react-native version <= 0.64 to higher version, you are not able to run pod install

CocoaPods could not find compatible versions for pod "FBLazyVector":
  In Podfile:
    FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
// Or
CocoaPods could not find compatible versions for pod "FBReactNativeSpec":
  In Podfile:
    FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)

My solution for this case:
Copy the Podfile in the new project (the same react-native version that you want to upgrade to) replace Podfile in the project that you want to upgrade, and remember to change the project name in Podfile.

3.6 Ruby, Pod issue 

 `find_spec_for_exe': can't find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)

=> remove Gamefile file in main folder.

or remove  "gem 'cocoapods', '...'"  in Gamefile, change the ruby version to the version that is u set to default

source 'https://rubygems.org'
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby '3.0.0' ==> change to the version that u are set default
gem 'cocoapods', '~> 1.11', '>= 1.11.3' ==> remove this line

4. Release

Android

// build APK file
./gradlew assembleRelease
// build bundle file
./gradlew bundleRelease

// Clear
npx react-native-clean-project

5. Library and doc

Release change log 

 https://github.com/facebook/react/blob/main/CHANGELOG.md 

Realm 

  https://www.mongodb.com/docs/realm/sdk/react-native/fundamentals/relationships-and-embedded-objects/#std-label-react-native-to-many-relationship

Icon

https://oblador.github.io/react-native-vector-icons/