How to use the react-native-responsive-dimensions.responsiveWidth function in react-native-responsive-dimensions

To help you get started, we’ve selected a few react-native-responsive-dimensions examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github karanpratapsingh / Proximity / app / screens / ProfileScreen / components / SettingsBottomSheet.tsx View on Github external
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
  }
});
github tasitlabs / tasit / decentraland / components / presentational / MyProfileCreationStatusItem / MyProfileCreationStatusItem.tsx View on Github external
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 (
github tasitlabs / tasit / decentraland / components / presentational / MyAsset / MyAsset.tsx View on Github external
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 {
github tasitlabs / tasit / decentraland / components / presentational / LandForSale / LandForSale.tsx View on Github external
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 (
github karanpratapsingh / Proximity / app / layout / placeholders / PostViewScreen.Placeholder.tsx View on Github external
const PostViewScreenPlaceholder = () => {
  const { theme } = useContext(AppContext);

  return (

react-native-responsive-dimensions

Resposive fontSize, height and width for your react-native components.

MIT
Latest version published 5 years ago

Package Health Score

50 / 100
Full package analysis