CODEWITHSUNDEEP
javascriptiosreactjsreact-native
Gabriel Garrett
Gabriel Garrett

Reputation: 2127

Is there a way to scale a View in react-native?

I have a View in react-native with a few components. While everything shows up correctly on the iPhone 6 and 5, when viewing it on an iPhone 4s, the bottom of one of the components is slightly cut off.

I see there are ways to scale base64 icons. Is there any way to scale an entire container View to be uniformly smaller or larger?

Upvotes: 5

Views: 9053

Answers (2)

Shane Rudolf
Shane Rudolf

Reputation: 291

Your question can be break down into two parts:

1, To scale width, height, paddings and margins. These can be easily achieve by using % and aspectRatio.

2, To scale Text, you might want to consider using Extended StyleSheet, which allows you to use rem.

You can simply following tutorial "7 Tips to Develop React Native UIs For All Screen Sizes" for how to use the above tips.

Additionally, check out Extended StyleSheet Scaling, which allows to use $scale variable to scale base on conditions.

Upvotes: 1

tiby
tiby

Reputation: 53

Does something like this help you ?

YourStyleSheet.js

import {StyleSheet} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');


export function create(styles: Object): {[name: string]: number} {
  const platformStyles = {};
  Object.keys(styles).forEach((name) => {
    let {sm,md,lg, ...style} = {...styles[name]};
    // iphone 4s and older
    if(sm && width < 375){

      style = {...style, ...sm};
    }
    // iphone 5,5s
    if(md && width >= 375 && width <414){

      style = {...style, ...md};
    }
    // iphone 6 and bigger
    if(lg && width >= 414){

      style = {...style, ...lg};
    }


    platformStyles[name] = style;
  });
  return StyleSheet.create(platformStyles);
}

Then in your style you can specify the size of the component on different screen sizes like this 

import YourStyleSheet from './path/YourStyleShett'    
const styles = YourStyleSheet.create({
      component:{
        sm:{fontSize: 20,},
        md:{fontSize: 30,},
        lg:{fontSize: 30,},
        textAlign: 'center',
        marginBottom: 10,
        fontWeight:'bold',
        color:colors.white,
      }
    });

Upvotes: 0

Related Questions