How to use the react-native-responsive-dimensions.responsiveHeight 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 tasitlabs / tasit / decentraland / components / presentational / Button / Button.tsx View on Github external
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,
github tasitlabs / tasit / decentraland / components / presentational / EthereumSignUp / EthereumSignUp.tsx View on Github external
({ onUsernameSubmit }) => {
    const OFFSET = responsiveHeight(3);
    return (
      
        {`Cool. Let's start by picking your Tasit username.`}
        
      
    );
  }
);
github karanpratapsingh / Proximity / app / layout / misc / ListEmptyComponent.tsx View on Github external
const ListEmptyComponent: React.FC = ({ listType, spacing, style, placeholder, placeholderStyle }) => {
  const { theme } = useContext(AppContext);
  let content = `No ${listType} yet`;
  if (placeholder) {
    content = placeholder;
  }

  return (
    
  );
};

react-native-responsive-dimensions

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

MIT
Latest version published 4 years ago

Package Health Score

50 / 100
Full package analysis