jdmunro

"deprecate/member-expression": [
  "warn",
  {
    "name": "React.Component",
    "use": "We prefer to use Functional Components: refer to ADR #0002."
  }
]

jdmunro

// ExerciseTopBar.web.js

// Import the props from the mobile implementation
// The actual JS will not be included in the web bundle
import type { Props } from "app/components/ExerciseTopBar.js";

jdmunro

// AfterWorkoutScreen.web.js
// AfterWorkoutScreen.js
import connectAfterWorkoutScreen from './connectAfterWorkoutScreen'

class AfterWorkoutScreen extends React.PureComponent {
  // ...
}

// Re-use the connect call
default default connectAfterWorkoutScreen(AfterWorkoutScreen)

jdmunro

// connectAfterWorkoutScreen.js
export default connect(
  mapStateToProps, // Map state to props for both screens
  mapDispatchToProps // Map dispatch to props for both screens
);

jdmunro

module.exports = {
  // ...
  resolve: {
    // ...
    // Prefer .web.js over .js files
    extensions: [".web.js", ".js"]
  }
};

jdmunro

// Mobile and web only
const style = selectOnPlatform({
  mobile: styles.mobileStyle,
  web: styles.webStyle
});

// Alternatively, analogous to Platform.select
const style = selectOnPlatform({
  android: styles.androidStyle,
  ios: styles.iosStyle,

jdmunro

const style = Platform.select({
  android: styles.mobileStyle,
  ios: styles.mobileStyle,
  web: styles.webStyle
});

jdmunro

const someJsx = (
  <SomeComponent
    style={Platform.select({
      android: styles.androidStyle,
      ios: styles.iosStyle
    })}
  />
);

jdmunro

const marginStyle = {
  marginTop: Platform.OS === "android" ? 60 : 19,
  marginBottom: Platform.OS === "android" ? 60 : 0
};

jdmunro

import * as React from "react";

const codePush = (App: React.Node) => App;

codePush.getUpdateMetaData = () => {
  return Promise.resolve(null);
};

export default codePush;