WIP: rn56

shared/app/index.native.js

@@ -4,20 +4,13 @@ import Main from './main'
 import React, {Component} from 'react'
 import configureStore from '../store/configure-store'
 import loginRouteTree from './routes-login'
-import {AppRegistry, AppState, Linking, Text} from 'react-native'
+import {AppRegistry, AppState, Linking} from 'react-native'
 import {GatewayProvider} from 'react-gateway'
 import {Provider} from 'react-redux'
 import {makeEngine} from '../engine'
 import {refreshRouteDef, setInitialRouteDef} from '../actions/route-tree'
 import {setup as setupLocalDebug} from '../local-debug'
 
-// We don't want global font scaling as this messes up a TON of stuff. let's opt in
-function disallowFontScalingByDefault() {
-  Text.defaultProps.allowFontScaling = false
-}
-
-disallowFontScalingByDefault()
-
 module.hot &&
   module.hot.accept(() => {
     console.log('accepted update in shared/index.native')

shared/app/main-shared.native.js

@@ -66,12 +66,14 @@ class Main extends Component<any> {
           routeState={this.props.routeState}
           setRouteState={this.props.setRouteState}
         />
-        <GatewayDest name="popup-root" component={View} pointerEvents="box-none" />
+        <GatewayDest name="popup-root" component={ViewForGatewayDest} pointerEvents="box-none" />
       </Fragment>
     )
   }
 }
 
+const ViewForGatewayDest = (props: any) => <View {...props} />
+
 const mapStateToProps = (state: TypedState) => ({
   folderBadge: state.favorite.folderState.privateBadge + state.favorite.folderState.publicBadge,
   routeDef: state.routeTree.routeDef,

shared/chat/conversation/messages/set-explode-popup/index.native.js

@@ -57,10 +57,15 @@ const promptContainerStyle = {
 
 type State = {selected: number}
 class SetExplodePopup extends React.Component<Props, State> {
-  state = {selected: 0}
+  constructor(props: Props) {
+    super(props)
+    this.state = {selected: props.selected || 0}
+  }
 
-  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    return {selected: nextProps.selected || 0}
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.selected !== prevProps.selected) {
+      this.setState({selected: this.props.selected || 0})
+    }
   }
 
   setSelected = (value: number | string) => {

shared/chat/inbox/index.native.js

@@ -15,6 +15,7 @@ import BigTeamsDivider from './row/big-teams-divider/container'
 import Divider from './row/divider/container'
 import {debounce} from 'lodash-es'
 import {Owl} from './owl'
+import * as RowSizes from './row/sizes'
 
 import type {Props, RowItem} from './'
 
@@ -44,8 +45,11 @@ class Inbox extends React.PureComponent<Props, State> {
   // Help us calculate row heights and offsets quickly
   _dividerIndex = -1
 
-  state = {
-    showFloating: false,
+  state = {showFloating: false}
+
+  constructor(props: Props) {
+    super(props)
+    this._calculateDivider(props)
   }
 
   _renderItem = ({item, index}) => {
@@ -84,11 +88,7 @@ class Inbox extends React.PureComponent<Props, State> {
     )
   }
 
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.rows !== prevProps.rows) {
-      this._dividerIndex = this.props.rows.findIndex(r => r.type === 'divider')
-    }
-  }
+  _calculateDivider = (props: Props) => {}
 
   _askForUnboxing = (rows: Array<RowItem>) => {
     const toUnbox = rows.reduce((arr, r) => {
@@ -145,35 +145,45 @@ class Inbox extends React.PureComponent<Props, State> {
   }
 
   _itemTypeToHeight = {
-    big: globalMargins.large,
-    bigHeader: globalMargins.large,
-    divider: 56,
-    small: globalMargins.xlarge,
+    big: RowSizes.bigRowHeight,
+    bigHeader: RowSizes.bigHeaderHeight,
+    divider: RowSizes.dividerHeight,
+    small: RowSizes.smallRowHeight,
   }
 
   _getItemLayout = (data, index) => {
+    console.log('aaa d:', this._dividerIndex)
+
     // We cache the divider location so we can divide the list into small and large. We can calculate the small cause they're all
     // the same height. We iterate over the big since that list is small and we don't know the number of channels easily
     const smallHeight = this._itemTypeToHeight['small']
     if (index < this._dividerIndex || this._dividerIndex === -1) {
-      return {index, length: smallHeight, offset: index ? smallHeight * index : 0}
+      const offset = index ? smallHeight * index : 0
+      const length = smallHeight
+      console.log('aaa 1:', index, length, offset)
+      return {index, length, offset}
     }
 
     const dividerHeight = this._itemTypeToHeight['divider']
     if (index === this._dividerIndex) {
-      return {index, length: dividerHeight, offset: smallHeight * index}
+      const offset = smallHeight * index
+      const length = dividerHeight
+      console.log('aaa 2:', index, length, offset)
+      return {index, length, offset}
     }
 
     let offset = smallHeight * (this._dividerIndex - 1) + dividerHeight
 
     for (let i = this._dividerIndex; i < index; ++i) {
       offset += this._itemTypeToHeight[data[i].type]
     }
-
-    return {index, length: this._itemTypeToHeight[data[index].type], offset}
+    const length = this._itemTypeToHeight[data[index].type]
+    console.log('aaa 3:', index, length, offset)
+    return {index, length, offset}
   }
 
   render() {
+    this._dividerIndex = this.props.rows.findIndex(r => r.type === 'divider')
     const noChats = !this.props.isLoading && !this.props.rows.length && !this.props.filter && <NoChats />
     const owl = !this.props.rows.length && !!this.props.filter && <Owl />
     const floatingDivider = this.state.showFloating &&

shared/chat/inbox/row/big-team-channel/index.js

@@ -1,7 +1,16 @@
 // @flow
 import React, {PureComponent} from 'react'
 import {Box, Text, Icon, ClickableBox} from '../../../../common-adapters'
-import {globalStyles, globalColors, globalMargins, isMobile, desktopStyles} from '../../../../styles'
+import {
+  globalStyles,
+  globalColors,
+  globalMargins,
+  isMobile,
+  desktopStyles,
+  styleSheetCreate,
+  platformStyles,
+} from '../../../../styles'
+import * as RowSizes from '../sizes'
 
 type Props = {
   isSelected: boolean,
@@ -17,21 +26,21 @@ type Props = {
 class BigTeamChannel extends PureComponent<Props> {
   render() {
     return (
-      <ClickableBox onClick={this.props.onSelectConversation}>
-        <Box style={channelRowContainerStyle}>
-          <Box style={this.props.isSelected ? selectedChannelBackgroundStyle : channelBackgroundStyle}>
+      <ClickableBox onClick={this.props.onSelectConversation} style={styles.container}>
+        <Box style={styles.rowContainer}>
+          <Box style={this.props.isSelected ? styles.selectedChannelBackground : styles.channelBackground}>
             <Text
               type={this.props.isSelected ? 'BodySemibold' : 'Body'}
               style={
                 this.props.isError
-                  ? textStyleError
+                  ? styles.textError
                   : this.props.isSelected
                     ? this.props.hasUnread
-                      ? textStyleSelectedBold
-                      : textStyleSelected
+                      ? styles.textSelectedBold
+                      : styles.textSelected
                     : this.props.hasUnread
-                      ? textStylePlainBold
-                      : textStylePlain
+                      ? styles.textPlainBold
+                      : styles.textPlain
               }
             >
               #{this.props.channelname}
@@ -45,25 +54,6 @@ class BigTeamChannel extends PureComponent<Props> {
   }
 }
 
-const textStyleError = {
-  color: globalColors.red,
-}
-const textStylePlain = {
-  ...(isMobile ? {backgroundColor: globalColors.fastBlank} : {}),
-  color: globalColors.black_75_on_white,
-}
-const textStylePlainBold = {
-  ...textStylePlain,
-  ...globalStyles.fontBold,
-}
-const textStyleSelected = {
-  color: globalColors.white,
-}
-const textStyleSelectedBold = {
-  ...textStyleSelected,
-  ...globalStyles.fontBold,
-}
-
 const MutedIcon = ({isSelected}) => (
   <Icon
     type={
@@ -84,57 +74,75 @@ const mutedStyle = {
 }
 
 const UnreadIcon = () => (
-  <Box style={unreadContainerStyle}>
-    <Box style={unreadStyle} />
+  <Box style={styles.unreadContainer}>
+    <Box style={styles.unread} />
   </Box>
 )
 
-const unreadContainerStyle = {
-  ...globalStyles.flexBoxRow,
-  alignItems: 'center',
-  alignSelf: 'stretch',
-  flex: 1,
-  justifyContent: 'flex-end',
-}
-const unreadStyle = {
-  backgroundColor: globalColors.orange,
-  borderRadius: 6,
-  flexShrink: 0,
-  height: 8,
-  width: 8,
-}
-
-const teamRowContainerStyle = {
-  ...globalStyles.flexBoxRow,
-  ...desktopStyles.clickable,
-  alignItems: 'center',
-  flexShrink: 0,
-  maxHeight: isMobile ? globalMargins.large : globalMargins.medium,
-  minHeight: isMobile ? globalMargins.large : globalMargins.medium,
-  paddingLeft: globalMargins.tiny,
-  paddingRight: isMobile ? globalMargins.tiny : globalMargins.xtiny,
-}
-
-const channelRowContainerStyle = {
-  ...teamRowContainerStyle,
-  alignItems: 'stretch',
-  paddingRight: 0,
-}
-
-const channelBackgroundStyle = {
-  ...globalStyles.flexBoxRow,
-  ...(isMobile ? globalStyles.fillAbsolute : {width: '100%'}),
-  alignItems: 'center',
-  marginLeft: globalMargins.large,
-  paddingLeft: globalMargins.tiny,
-  paddingRight: globalMargins.tiny,
-}
-
-const selectedChannelBackgroundStyle = {
-  ...channelBackgroundStyle,
-  backgroundColor: globalColors.blue,
-  borderTopLeftRadius: 3,
-  borderBottomLeftRadius: 3,
-}
+const styles = styleSheetCreate({
+  channelBackground: {
+    ...globalStyles.flexBoxRow,
+    ...(isMobile ? globalStyles.fillAbsolute : {width: '100%'}),
+    alignItems: 'center',
+    marginLeft: globalMargins.large,
+    paddingLeft: globalMargins.tiny,
+    paddingRight: globalMargins.tiny,
+  },
+  container: {flexShrink: 0, height: RowSizes.bigRowHeight},
+  rowContainer: platformStyles({
+    common: {
+      ...globalStyles.flexBoxRow,
+      alignItems: 'stretch',
+      height: '100%',
+      paddingLeft: globalMargins.tiny,
+      paddingRight: 0,
+    },
+    isElectron: desktopStyles.clickable,
+  }),
+  selectedChannelBackground: {
+    ...globalStyles.flexBoxRow,
+    ...(isMobile ? globalStyles.fillAbsolute : {width: '100%'}),
+    alignItems: 'center',
+    backgroundColor: globalColors.blue,
+    borderBottomLeftRadius: 3,
+    borderTopLeftRadius: 3,
+    marginLeft: globalMargins.large,
+    paddingLeft: globalMargins.tiny,
+    paddingRight: globalMargins.tiny,
+  },
+  textError: {
+    color: globalColors.red,
+  },
+  textPlain: {
+    ...(isMobile ? {backgroundColor: globalColors.fastBlank} : {}),
+    color: globalColors.black_75_on_white,
+  },
+  textPlainBold: {
+    ...(isMobile ? {backgroundColor: globalColors.fastBlank} : {}),
+    color: globalColors.black_75_on_white,
+    ...globalStyles.fontBold,
+  },
+  textSelected: {
+    color: globalColors.white,
+  },
+  textSelectedBold: {
+    color: globalColors.white,
+    ...globalStyles.fontBold,
+  },
+  unread: {
+    backgroundColor: globalColors.orange,
+    borderRadius: 6,
+    flexShrink: 0,
+    height: 8,
+    width: 8,
+  },
+  unreadContainer: {
+    ...globalStyles.flexBoxRow,
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+})
 
 export {BigTeamChannel}