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)
source 'https://rubygems.org'# You may use http://rbenv.org/ or https://rvm.io/ to install and use this versionruby '3.0.0' ==> change to the version that u are set defaultgem 'cocoapods', '~> 1.11', '>= 1.11.3' ==> remove this line
Android
// build APK file
./gradlew assembleRelease
// build bundle file
./gradlew bundleRelease
// Clear
npx react-native-clean-project
Để lại bình luận cho trang này