How to use the react-native-size-matters.ScaledSheet.create function in react-native-size-matters

To help you get started, we’ve selected a few react-native-size-matters 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 nirsky / react-native-size-matters / examples / expo-example-app / components / Chat.js View on Github external
import React from 'react';
import { View, Text, ScrollView, TextInput, Button, StyleSheet } from 'react-native';
import {ScaledSheet} from 'react-native-size-matters';
import withScaledSheetSwitch from './behaviors/withScaledSheetSwitch';

const scaledSheet = ScaledSheet.create({
    container: {
        flex: 1,
        width: '100%',
        height: '100%'
    },
    inputBox: {
        alignSelf: 'stretch',
        height: '45@ms',
        padding: '6@ms',
        flexDirection: 'row',
    },
    textInput: {
        paddingHorizontal: '10@ms0.3',
        flex: 1,
        borderRadius: '25@ms',
        backgroundColor: 'white',
github nirsky / react-native-size-matters / examples / expo-example-app / components / Home.js View on Github external
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {ScaledSheet} from 'react-native-size-matters';
import withScaledSheetSwitch from './behaviors/withScaledSheetSwitch';

const scaledStyles = ScaledSheet.create({
    container: {
        flex: 1,
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center'
    },
    button: {
        width: '250@ms',
        height: '80@ms',
        borderColor: '#696969',
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
        marginVertical: '25@vs',
        elevation: 3,

react-native-size-matters

A React-Native utility belt for scaling the size your apps UI across different sized devices

MIT
Latest version published 7 months ago

Package Health Score

69 / 100
Full package analysis