How to use universal-platform - 10 common examples

//   renderLeftComponent: SubViewRenderer,
//   renderRightComponent: SubViewRenderer,
//   renderTitleComponent: SubViewRenderer,
//   tintColor?: string,
//   router: NavigationRouter,
// };

type SubViewName = 'left' | 'title' | 'right';

type HeaderState = {
  widths: {
    [key: string]: number,
  },
};

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 88 : 112;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 40 : 0;
const TITLE_OFFSET = Platform.OS === 'ios' ? 140 : 80;

class Header extends PureComponent {
  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
  static Title = HeaderTitle;
  static BackButton = HeaderBackButton;

  // propTypes for people who don't use Flow
  static propTypes = {
    ...NavigationPropTypes.SceneRendererProps,
    onNavigateBack: PropTypes.func,
    renderLeftComponent: PropTypes.func,
    renderRightComponent: PropTypes.func,
    renderTitleComponent: PropTypes.func,
    router: PropTypes.object,

_renderTitleComponent = (props) => {
    const titleStyle = this._getHeaderTitleStyle(props.navigation);
    const color = this._getHeaderTintColor(props.navigation);
    const title = this._getHeaderTitle(props.navigation);

    // On iOS, width of left/right components depends on the calculated
    // size of the title.
    const onLayoutIOS = Platform.OS === 'ios'
      ? (e) => {
        this.setState({
          widths: {
            ...this.state.widths,
            [props.key]: e.nativeEvent.layout.width,
          },
        });
      }
      : undefined;

    return (
      
        {title}

//       ]}
  //       name={icon.name} />
  //   )
  // }
  let loadingElement;
  // if(loading){
  //   loadingElement = (
  //     
  //   )
  // }
  if (!Component && Platform.OS === 'ios') {
    Component = TouchableHighlight;
  }
  if (!Component && Platform.OS === 'android') {
    Component = TouchableNativeFeedback;
  }
  if (!Component) {
    Component = TouchableHighlight;
  }
  return (

// }
  let loadingElement;
  // if(loading){
  //   loadingElement = (
  //     
  //   )
  // }
  if (!Component && Platform.OS === 'ios') {
    Component = TouchableHighlight;
  }
  if (!Component && Platform.OS === 'android') {
    Component = TouchableNativeFeedback;
  }
  if (!Component) {
    Component = TouchableHighlight;
  }
  return (

function defaultTransitionConfig(
  // props for the new screen
  transitionProps,
  // props for the old screen
  prevTransitionProps,
  // whether we're animating in/out a modal screen
  isModal,
) {
  if (Platform.OS === 'android') {
    // Use the default Android animation no matter if the screen is a modal.
    // Android doesn't have full-screen modals like iOS does, it has dialogs.
    if (prevTransitionProps && transitionProps.index < prevTransitionProps.index) {
      // Navigating back to the previous screen
      return FadeOutToBottomAndroid;
    }
    return FadeInFromBottomAndroid;
  } else {
    // iOS and other platforms
    if (isModal) {
      return ModalSlideFromBottomIOS;
    } else {
      return SlideFromRightIOS;
    }
  }
}

import { createElement, Component, PropTypes } from 'rax';
import StyleSheet from 'universal-stylesheet';
import Platform from 'universal-platform';
import Text from 'rax-text';

const HeaderTitle = ({ style, ...rest }) =>

_getHeaderMode() {
    if (this.props.headerMode) {
      return this.props.headerMode;
    }
    if (Platform.OS === 'android' || this.props.mode === 'modal') {
      return 'screen';
    }
    return 'float';
  }

);
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    paddingRight: 20,
  },
  icon: Platform.OS === 'ios'
    ? {
      height: 40,
      width: 24,
      marginLeft: 20,
      marginRight: 44,
      marginTop: 24,
      marginBottom: 24,
      resizeMode: 'contain',
      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
    }
    : {
      height: 48,
      width: 48,
      margin: 32,
      resizeMode: 'contain',
      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],

import { createElement, Component, PropTypes } from 'rax';
import StyleSheet from 'universal-stylesheet';
import Platform from 'universal-platform';
import Text from 'rax-text';

const HeaderTitle = ({ style, ...rest }) =>

width: 24,
      marginLeft: 20,
      marginRight: 44,
      marginTop: 24,
      marginBottom: 24,
      resizeMode: 'contain',
      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
    }
    : {
      height: 48,
      width: 48,
      margin: 32,
      resizeMode: 'contain',
      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
    },
  iconWithTitle: Platform.OS === 'ios'
    ? {
      marginRight: 10,
    }
    : {},
});

export default HeaderBackButton;