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

import {
  responsiveHeight,
  responsiveFontSize,
} from "react-native-responsive-dimensions";

// Responsive percents
const FONT_SIZE = 1.8;
const BUTTON_HEIGHT = 1.5;

const containerStyles = StyleSheet.create({
  disabled: {
    backgroundColor: Colors.disabledButtonBackground,
    borderRadius: 3,
    overflow: "hidden",
    padding: responsiveHeight(BUTTON_HEIGHT),
  },
  enabled: {
    backgroundColor: Colors.buttonBackground,
    borderRadius: 3,
    overflow: "hidden",
    padding: responsiveHeight(BUTTON_HEIGHT),
  },
});

const buttonStyles = StyleSheet.create({
  disabled: {
    color: Colors.disabledButtonTextColor,
    fontSize: responsiveFontSize(FONT_SIZE),
  },
  enabled: {
    color: Colors.buttonTextColor,

Left={props => (
      
    )}
  >

const styles = (theme = {} as ThemeColors) => StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: theme.base
  },
  content: {
    flex: 1,
    paddingTop: 20
  },
  label: {
    ...FontWeights.Light,
    ...FontSizes.Body,
    width: responsiveWidth(74),
    color: theme.text01
  }
});

fontWeight: "800",
  },
  actionText: {
    color: Colors.textColor,
    fontSize: FONT_SIZE,
    fontWeight: "800",
    marginLeft: responsiveWidth(5),
  },
  container: {
    alignItems: "center",
    backgroundColor: Colors.backgroundColor,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
    marginTop: responsiveHeight(2),
    width: responsiveWidth(65),
  },
});

function renderIcon(status): JSX.Element {
  if (status === ActionStatus.DONE) {
    return (
      
    );
  }
  if (status === ActionStatus.PENDING) {
    return (

import React from "react";
import { StyleSheet, View } from "react-native";

import { responsiveWidth } from "react-native-responsive-dimensions";
import Estate from "../Estate";
import Parcel from "../Parcel";
import { ESTATE, PARCEL } from "../../../constants/AssetTypes";
import LinkToBlockchain from "../LinkToBlockchain";
import AssetName from "../AssetName";

import AssetObjectProps from "../../../types/AssetObjectProps";

const styles = StyleSheet.create({
  assetContainer: {
    width: responsiveWidth(95),
  },
  linkContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  myAssetInfoContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  nameContainer: {
    flex: 1,
  },
});

interface MyAssetProps {

import React from "react";
import { StyleSheet, View } from "react-native";

import { responsiveWidth } from "react-native-responsive-dimensions";
import Estate from "../Estate";
import Parcel from "../Parcel";
import LandForSaleInfo from "../LandForSaleInfo";
import AssetTypes from "../../../constants/AssetTypes";

import LandForSaleObjectProps from "../../../types/LandForSaleObjectProps";

const { ESTATE, PARCEL } = AssetTypes;

const styles = StyleSheet.create({
  landContainer: {
    width: responsiveWidth(95),
  },
});

interface LandForSaleProps {
  landForSale: LandForSaleObjectProps;
}

const LandForSale: React.FunctionComponent = React.memo(
  ({ landForSale }) => {
    const { asset } = landForSale;
    const { type } = asset;

    return (

({ onUsernameSubmit }) => {
    const OFFSET = responsiveHeight(3);
    return (
      
        {`Cool. Let's start by picking your Tasit username.`}
        
      
    );
  }
);

const ListEmptyComponent: React.FC = ({ listType, spacing, style, placeholder, placeholderStyle }) => {
  const { theme } = useContext(AppContext);
  let content = `No ${listType} yet`;
  if (placeholder) {
    content = placeholder;
  }

  return (
    
  );
};

Left={props => (
      
    )}
  >

Left={props => (
        
      )}
    >