react-native 0.61.1 upgrade

[sethvincent]

Work in progress react-native upgrade pr.

[sethvincent]

I had a few false starts getting this set up but eventually got a decent chunk of it done.

update dependencies

I realized when setting this up that my computer had upgraded itself to latest xcode since last doing observe work.

I'm currently on xcode 11.0.

At some point apparently a long time ago people moved from using react-native-cli to @react-native-community/cli but react-native-cli is still referred to in react-native docs.

I upgraded:

• yarn to 1.19.0
• cocoapods to 1.8.1
• @react-native-community/cli to 2.9.0

Latest react-native is 0.61.1 so that's the version react-native-cli used to start the project.

I'm using the ios 12.2 iphone X simulator.

What I've done so far

I renamed and checked in the new android-rncli-init ios-rncli-init directories so we can finish comparing them to the older ios/android directories.

Went throught the root level files and the config files in the android and ios directories and merged them as best I could, including updating the pods for ios.

Next steps

• make sure ios and android config is correct
• run through the dependencies and reinstall them using cocoapods / make sure android installs are correct
• merge the android java code, including the auth functionality
• remove android-rncli-init and ios-rncli-init
• refactor to use @react-native-mapbox-gl/maps

I can work on this some more tomorrow.

[geohacker]

Thank you for getting this started @sethvincent. Goal is to get Android to build. So I just went through these steps:

1. yarn add @react-native-community/cli, so I can use npx instead of global
2. Make adjustments in gradle properties and build.gradle following this comment, but verified this with android-rncli-init
3. Rename wrapper method based on https://stackoverflow.com/questions/53709282/cannot-add-task-wrapper-as-a-task-with-that-name-already-exists
4. Remove yarn remove @mapbox/react-native-mapbox-gl
5. Install yarn add @react-native-mapbox-gl/maps
6. Comment out some old rnmbxgl linkage
7. Upgrade react-native-geolocation-service
8. react-native unlink all the old dependencies
9. Link config and cookie packages
10. Upgrade and link react-native-gesture-handler
11. Upgrade https://github.com/oblador/react-native-keychain/releases
12. Comment https://github.com/developmentseed/observe/blob/react-native-0.61.1-upgrade/android/app/src/main/java/com/developmentseed/observe/MainApplication.java#L39
13. Upgrade and link react-native-vector-icons
14. Link mapbox gl manually
15. Import sdk in build.gradle

Android now builds, but the app crashes. I've not inspected the logcat yet, so that'd be next. And ios doesn't build at all.

[sethvincent]

With the latest commit I'm able to run the android build in a simulator.

Mostly this came down to futzing with dependencies and slightly revising the java files in the app to have the mapbox access token / http request fixes we did in our previous upgrade attempt.

I've commented out the mapboxgl code in the app for now to better separate mapboxgl issues from general app issues.

[geohacker]

@sethvincent confirmed that Android builds. I had to add a cleartext thing in the manifest to enable emulator to fetch the bundle from metro 6579546#diff-020edf1fd6d483b0e2c8f5a5734ea1f2R15

I worked on getting the build to work on ios and now it does. It took me several hours of learning react native links, unlinking and cleaning up old configuration, updating several modules, and then some minor hacks in the Podfile. This now builds and is comparable to Android.

I think next step is to remove the init folders and start plugging in newer Mapbox GL code.

[sethvincent]

When I pulled latest earlier today I got this error:

[!] Unable to find a specification for `boost-for-react-native (= 1.63.0)` depended upon by `React-cxxreact`

To fix this I:

• deleted node_modules
• ran yarn to reinstall modules
• ran pod update boost-for-react-native
• ran pod install

To get the app to boot I also removed some old ios config that seems to no longer be necessary with recent react-native-config versions (though we should double check this) b8040e2#diff-1489ef5d471d1e9ceaaab302212f10e8L2301-R2319

I deleted the global version of @react-native-community/cli on my computer to only use the locally installed version via npm scripts to test that out. Seems fine.

The metro bundler is no longer starting automatically if I run yarn ios, but if I do yarn start in one terminal and yarn ios in another, things work. If i run yarn android then it does run the bundler automatically, popping up a new terminal window. 🤷‍♂️

But a very basic map now loads on ios and android! From here we need to do refactoring/rewriting of the old map and verify that all functionality still works.

@geohacker I noticed we might be using different cocoapods versions. Not sure how much that matters.

[geohacker]

The metro bundler is no longer starting automatically if I run yarn ios

I can reproduce this behaviour 🤷‍♂ strange.

[geohacker]

I managed to get the symbol layers and icons to work, but the roads layer doesn't seem to. I think something wrong with the way we're using the expression to match highway tag to line color https://github.com/developmentseed/observe/blob/react-native-0.61.1-upgrade/app/style/map.js#L42

Will keep looking, but I think I've run out of ideas.

[sethvincent]

Spent a while trying to get a handle on linelayers, styles, and specifically the roads layer.

I tried a lot of things and it basically comes down to not finding a way to do a step style that works.

If I just set lineColor to a value the map renders with that color. When I do that this error shows up when I click on a way:

For a bit I got distracted and wondered if there was a bug in the filters and then I couldn't read the filters very well so I pulled them out into an object and then I realized that no, it was definitely the style that was the problem.

Also:

• Fixed a reference to a method that needed to be on the cameraRef
• There's something wacky going on with pods maybe? I had to do the pod update boost-for-react-native thing again to get the app to run.

[sethvincent]

With latest changes I'm seeing this error when saving an attribute edit to a point using ios:

Going to the contributions screen it looks like the changeset successfully uploaded, so this is a rendering error. And that makes sense given the error message.

On android I see this error after saving an attribute edit:

After that the app got in a state where I couldn't navigate around without closing the app on the emulator and restarting it. But it looks like the changeset still went through, just like ios.

[sethvincent]

ios

I was able to download offline tiles/data successfully.

When testing offline editing and turning the network back on the app did not detect the network right away.

Sidenote: I noticed that the pending/offline icon looks too similar to the completed icon in the contributions screen.

I logged out and logged in a few times. Seems to work ok. After testing offline and bringing the network connection back I tried logging in and got Authorization failed: [TypeError: Network request failed]. I didn't change anything and just clicked log in again and it worked.

Some interesting logs:

WARN  Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: withAnimatable(Component)
LOG  [Error: Unsupported field type: maxspeed]
LOG  [Error: Unsupported field type: onewayCheck]
LOG  [Error: Unsupported field type: maxspeed]
LOG  [Error: Unsupported field type: onewayCheck]
LOG  [Error: Unsupported field type: maxspeed]
LOG  [Error: Unsupported field type: onewayCheck]
LOG  [Error: Unsupported field type: maxspeed]
LOG  [Error: Unsupported field type: onewayCheck]

The metro bundler now outputs useful logs from ios and android, so that's nice.

android

logging in and out worked ok. There was once where a weird flash of an error notification showed after being redirected back from chrome, but then it rendered the profile correctly. It had logged this error: Authorization failed: [Error: Request token did not match authorized token.]

trying to download offline tiles on android eventually started timing out:

LOG  Failed creating offline pack for a20a1119-satellite {"message": "timeout", "name": "a20a1119-satellite"}
LOG  Failed creating offline pack for a20a1119 {"message": "timeout", "name": "a20a1119"}
LOG  Failed creating offline pack for a20a1119 {"message": "timeout", "name": "a20a1119"}
LOG  Failed creating offline pack for a20a1119 {"message": "timeout", "name": "a20a1119"}
LOG  Failed creating offline pack for a20a1119 {"message": "timeout", "name": "a20a1119"}
LOG  Failed creating offline pack for a20a1119 {"message": "timeout", "name": "a20a1119"}

This was for a very small area. Roughly a city block. Tried again and got the same response. It says the tiles got to 50%.

[geohacker]

I've managed to add all the map layers back including edited geojson states. This should now handle all cases for pois, lines and polygons. @sethvincent the error you ran into while editing features should be gone now.

[geohacker]

I can reproduce the failed offline pack messages on Android, but I'm on a really spotty network. The downloads I tried all got to 100%. So I'm assuming it retries and then manages to download ok. I'm not entirely sure and we should inspect this.

[geohacker]

Since we managed to get the app building on both platforms and replicate pretty much all the functionality, we should merge to develop.