How to use react-native-responsive - 10 common examples

// @flow

import { MediaQueryStyleSheet } from 'react-native-responsive';

import GlobalStyles from 'pangea-common-reactnative/styles';

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,
});
export default styles;

// @flow

import { MediaQueryStyleSheet } from 'react-native-responsive';

import GlobalStyles from 'pangea-common-reactnative/styles';

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,
});

export default styles;

// @flow

import { MediaQueryStyleSheet } from 'react-native-responsive';

import GlobalStyles from 'pangea-common-reactnative/styles';

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,
});

export default styles;

// @flow

import { MediaQueryStyleSheet } from 'react-native-responsive';

import GlobalStyles from '../../../global/Styles';

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,
});

export default styles;

const PanelViewAlert = ({ status }: Props) => {
  const styles = MediaQueryStyleSheet.create({
    ...GlobalStyles,
  });

  return (
    
  );
};

const SwitchLabeled = ({
  onValueChange, value, label, align, disabled,
}:Props) => {
  const styles = MediaQueryStyleSheet.create({
    ...GlobalStyles,
  });

  const switchStyle = [styles.switchContainer];
  if (align === 'right') {
    switchStyle.push({
      flexDirection: 'row-reverse',
    });
  }

  const textStyle = [styles.formSwitchLabelText];
  if (disabled) {
    textStyle.push(styles.disabledText);
  }

  return (

const SwitchLabeled = ({
  onValueChange, value, label, align, disabled,
}:Props) => {
  const styles = MediaQueryStyleSheet.create({
    ...GlobalStyles,
  });

  const switchStyle = [styles.switchContainer];
  if (align === 'right') {
    switchStyle.push({
      flexDirection: 'row-reverse',
    });
  }

  const textStyle = [styles.formSwitchLabelText];
  if (disabled) {
    textStyle.push(styles.disabledText);
  }

  return (

onCancel: () => void,
  /**
   * @desc Modal visibility
   */
  visible: boolean,
  /**
   * @desc Array of available options on menu.
   */
  options: Array,
  /**
   * @desc Text description
   */
  desText?: string,
};

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,

  lucyButtonStyle: {
    bottom: getTabBarHeight() + 20,
  },
  modalMoreContainer: {
    flex: 1,
    backgroundColor: Colors.lightFade,
    paddingHorizontal: 10,
    paddingTop: GlobalStyles.statusBar.height + 8,
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  modalWrapContent: {
    backgroundColor: Colors.Transparent,
    width: '100%',

const BodyParagraph = ({ text }: Props) => {
  const styles = MediaQueryStyleSheet.create({
    ...GlobalStyles,
  });

  return (
    
  );
};

import i18n from 'pangea-common/i18n';
import AssetsImages from '../assets/AssetsImages';

type Props = {
  /**
   * @desc Name of the Nation of citizenship
   */
  nationName?: string,
};

/**
 * @desc Component that renders the panel indicating the user is Citizen of a Nation
 * @return {React.Component} A component.
 */

const styles = MediaQueryStyleSheet.create({
  ...GlobalStyles,
});

const PanelViewCitizen = ({ nationName }: Props) => (
  
);

PanelViewCitizen.defaultProps = {
  nationName: '',
};