React native Upgrade

Followed below steps to upgrade react native 0.52 to 0.61.5

React native Upgrade (from v0.52 to v0.61.5)

React — v16.12.0

Min Node version Required: >=10

Xcode > 11

1. Followed https://react-native-community.github.io/upgrade-helper/?from=0.52.0&to=0.61.5

Added all your podsec file path in the Podfile:

pod ‘RNDeviceInfo’, :podspec => ‘../node_modules/react-native-device-info’

pod ‘RNFS’, :podspec => ‘../node_modules/react-native-fs’

pod ‘RNKeychain’, :podspec => ‘../node_modules/react-native-keychain’

pod ‘RNSVG’, :podspec => ‘../node_modules/react-native-svg’

pod ‘RNVectorIcons’, :podspec => ‘../node_modules/react-native-vector-icons’

Temporary fixes if anywhere these type of issue got, (RCTDefines.h not found issue will come, to solve problems):

1. Go to Project navigator > Libraries > RNFetchBlob.xcodeproj
2. Click on Build Settings and then the first item under “Targets”
3. Scroll down to ‘Search Paths’
4. Double click to edit the ‘Header Search Paths’
5. Add the following entry (click ‘+’): ${SRCROOT}/../../../ios/Pods/Headers. Make sure to set it to recursive.
6. Clean (cmd + shift + K) and re-build (cmd + B)

node_modules files changes:

Eventemitter issue, Solved by requiring these path — require(‘react-native/Libraries/vendor/emitter/EventEmitter’);(https://github.com/parse-community/Parse-SDK-JS/issues/936)

Lifecycle method deprecated/changes:

componentWillMount -> componentDidMount

componentWillReceiveProps, componentWillUpdate -> componentDidUpdate

Use https://fb.me/react-derived-state

Got following issues after upgrade:

1. Netinfo removed from react native, replace with react-native-netinfo library.
2. The ListView is deprecated, needs to be migrated. If instant we don’t want to replace all ListView, then we can use deprecated-react-native-list-view lib
3. Change componentWillMount to UNSAFE_componentWillMount, later replace with the appropriate lifecycle method.
4. Image.resizeMode deprecated need to migrate everywhere import ImageResizeMode from ‘react-native/Libraries/Image/ImageResizeMode’
5. Webview deprecated, replace with react-native-webview
6. Change componentWillReceiveProps to UNSAFE_componentWillReceiveProps, later replace with the appropriate lifecycle method.
7. Geolocation need to migrate — npm install @react-native-community/geolocation — save
8. Comand npx react-codemod rename-unsafe-lifecycles will help to replace in whole project lifecycle method.

After All the issue fix need to run following command for clean caches and start the app:

• Watchman watch-del-all
• rm -rf ~/Library/Developer/Xcode/DerivedData
• rm -rf $TMPDIR/react-native-packager-cache-*
• rm -rf $TMPDIR/metro-bundler-cache-*
• rm -rf node_modules && npm cache clean
• rm -rf package-lock.json
• npm install && npm start — — reset-cache

Before Pod install

• rm -rf ios/Pods/
• cd ios; rm -rf Podfile.lock
• Cd ios; pod install

Hope, above commands and steps will help to upgrade your RN version.