I have a View in react-native with a few ponents. While everything shows up correctly on the iPhone 6 and 5, when viewing it on an iPhone 4s, the bottom of one of the ponents 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?

I have a View in react-native with a few ponents. While everything shows up correctly on the iPhone 6 and 5, when viewing it on an iPhone 4s, the bottom of one of the ponents 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?

• javascript
• ios
• reactjs
• react-native

• 2 You can scale with transform if that's what you are looking for. Otherwise can you post some code for your icons? – oblador Commented Jun 5, 2016 at 13:25
• Can we apply the transform to any View or other ponent? – Gabriel Garrett Commented Jun 7, 2016 at 19:00
• Yes, see the linked document. – oblador Commented Jun 8, 2016 at 15:39

2 Answers 2

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.

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 ponent on different screen sizes like this

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