Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native 0.46 #7759

Merged
merged 10 commits into from
Jul 25, 2017
Merged

React Native 0.46 #7759

merged 10 commits into from
Jul 25, 2017

Conversation

chrisnojima
Copy link
Contributor

@chrisnojima chrisnojima commented Jul 14, 2017

This PR updates our RN to 0.46. This also means our react dependency got updated to 16 alpha which affects desktop also.
Additionally the update to 0.46 updates some tooling which allows us to see the dimensions of views in the react devtools which led me to discover some high level layout problems. This PR also addresses this. Before we had flex:1 screens which (depending on the contents) push the screens below the fold. This lead to bugs about things being cut off.

This is split into several commits:

  1. Some misc things needed for 0.46 (some things were renamed, updating package.json etc)
  2. Layout changes of our nav and top level items so things will always fit edge to edge above the tab bar. If you need to scroll you need a scroll view at the top level so it all works correctly
  3. The Dropdown common-adapter isn't actually a common-adapter. Its very login specific. The material-ui Popover it uses wasn't working with React 16 (and we had a long standing plan to deprecate our usage of material-ui) so i did that. I moved the native one under login as its really not useful for anything else
  4. Added a flag so all Boxes will be a random color so you can visualize things easier in-app
  5. Added a flag to disable yellow boxes on native if thats' interrupting your flow

notes:

  • A lot of addons are dead / moved
    Plan for Addons in React 16 facebook/react#9207
    No react-perf on desktop :(
  • We got to kill our vendored FlatList!
  • Popup list wasn't working with react 16, we needed to kill it anyways (material-ui) so i reimplemented it. It was only used in login

node:
version: 5.7.0
version: 6
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

new rn tooling requires some things not in 5

@@ -18,6 +18,7 @@ general:
build_dir: shared
dependencies:
pre:
- nvm ls-remote
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just so we can see available versions

@@ -7,6 +7,7 @@
.*/node_modules/fbjs/.*
.*/node_modules/is-my-json-valid/.*
.*/node_modules/json5/.*
.*/node_modules/metro-bundler/.*
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the rn packager got moved here and has a lot of errors

})
.filter(i => !!i)
// Must do this else we get weird errors from redux-saga, see https://github.com/redux-saga/redux-saga/issues/1000#issuecomment-315180255
yield Promise.resolve(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have to wrap this in Promise else redux-saga thinks we're returning other generators and gives us yellow boxes

@@ -137,7 +137,7 @@ function* navBasedOnLoginState() {
}
} else if (registered) {
// relogging in
yield [put.resolve(getExtendedStatus()), put.resolve(getAccounts())]
yield all([put.resolve(getExtendedStatus()), put.resolve(getAccounts())])
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redux-saga wants arrays to be wrapped in all()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's another spot that causes this warning. I have a fix in a perf commit

@@ -184,6 +185,10 @@ function registerIdentifyUi(): TrackerActionCreator {
let trackerTimeoutError = 0

const onStart = username => {
// Don't do this on mobile
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Android complains about long timeouts (over 1m) and likely this doesn't make sense in the mobile context anyways. its not a tracker card that hangs out on the side, it'd be your whole screen. no one is waiting 5 minutes...

@@ -1,7 +1,7 @@
// @flow
import {connector, Main} from './main-shared.native'
import {compose, lifecycle, withProps} from 'recompose'
import {NativeBackAndroid} from '../common-adapters/index.native'
import {NativeBackHandler} from '../common-adapters/index.native'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This got renamed

@@ -109,45 +114,20 @@ const barStyle = ({showStatusBarDarkContent, underStatusBar}) => {

function renderStackRoute(route) {
const {underStatusBar, hideStatusBar, showStatusBarDarkContent} = route.tags
// Skip extra view if no statusbar
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we actually do need to show it as it's used to tell the native side to hide

/>
{route.component}
</Box>
)
}

const forIOS = ({hideNav, shim, tabBar}) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now have a single implementation using the KeyboardAvoidingView (with some different params). We listen for keyboard showing/hiding and hide our tabBar ourselves.

@@ -1,6 +1,6 @@
// @flow
import {RouteDefNode} from '../route-tree'
import ConvListOrSearch from './conversation-list-or-search'
import ConvListOrSearch from './conversation-list-or-search.native'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is only used by native, so lets mark it as such

@@ -147,7 +147,7 @@ class AvatarRender extends PureComponent<void, Props, State> {
return (
<ClickableBox onClick={onClick} feedback={false}>
<Box style={boxStyle(size, style)}>
{skipBackground &&
{!skipBackground &&
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this flag was actually the inverse!

@@ -222,7 +222,7 @@ class Input extends Component<void, Props, State> {
returnKeyType: this.props.returnKeyType,
value: this.state.value,
secureTextEntry: this.props.type === 'password',
underlineColorAndroid: globalColors.transparent,
underlineColorAndroid: 'transparent',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggested by the docs. doesn't seem different but might as well leave it

@@ -88,10 +87,6 @@ function messageCreateComponent(type, key, children, options) {
}

class Markdown extends PureComponent<void, Props, void> {
shouldComponentUpdate(nextProps: Props): boolean {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is likely a leftover, PureComponent does this and new RN complains

@@ -56,7 +56,6 @@ const Render = ({platform, overlay, overlayColor, style}: Props) => {
<Icon
type={overlay}
style={{
color: overlayColor,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is an image now

@@ -1,7 +1,7 @@
// @flow
import * as shared from './user-bio.shared'
import React, {Component} from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {CSSTransitionGroup} from 'react-transition-group'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this got pulled out of addons and into its own project

@@ -55,15 +54,6 @@ function render() {
}

function load() {
// Used by material-ui widgets.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

going to entirely kill material-ui after this. doesn't work with react 16


const other = 'Someone else...'

const UserRow = ({user, onClick}) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

simple replacement for dropdown. this whole screen should be redone, its very old

@@ -57,7 +52,7 @@ class PrivateEnterUsernameRender extends Component<void, Props, State> {
? {notification: {type: 'error', message: customError(this.props.errorText, this.props.errorCode)}}
: {}
return (
<StandardScreen {...notification}>
<StandardScreen {...notification} onCancel={this.props.onCancel}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

standard screen has a headerhoc in it

@@ -160,7 +160,8 @@ dependencies {
// Manually include GIF support for Fresco b/c it was removed from
// core library and RN doesn't auto add it back yet (RN 0.30.0)
// @see DESKTOP-1703
compile 'com.facebook.fresco:animated-gif:0.11.0'
compile 'com.facebook.fresco:animated-base-support:0.14.1'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to update this dep else gifs crash rn 0.46

@chrisnojima chrisnojima mentioned this pull request Jul 14, 2017
7 tasks
@keybase-ci-visdiff
Copy link

The commits 27fa9c1...3b73cee introduce visual changes on linux.

🔎 3 removed, 3 changed

@chrisnojima
Copy link
Contributor Author

@keybase/react-hackers

* remove material-ui/menu

* lint

* remove material ui entirely! (#7762)

* remove material ui!

* WIP
@keybase-ci-visdiff
Copy link

The commits 27fa9c1...6c2e63e introduce visual changes on linux.

🔎 3 removed, 207 changed

@chrisnojima
Copy link
Contributor Author

chrisnojima commented Jul 21, 2017

  • past master merge re sanity check desktop

@keybase-ci-visdiff
Copy link

The commits ef8f072...3ef0f53 introduce visual changes on linux.

🔎 3 removed, 207 changed

@chrisnojima
Copy link
Contributor Author

@keybase/react-hackers this is ready to look at again. it's been master merged and includes the branches that remove material-ui

@keybase-ci-visdiff
Copy link

The commits 617b2c3...2401d42 introduce visual changes on linux.

🔎 3 removed, 207 changed

@chrisnojima chrisnojima merged commit adf1b52 into master Jul 25, 2017
@chrisnojima chrisnojima deleted the nojima/DESKTOP-clean-rn-46 branch September 20, 2017 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants