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

Share Improve this question Follow edited Jun 3, 2016 at 15:07 Gabriel Garrett asked Jun 3, 2016 at 15:00 Gabriel GarrettGabriel Garrett 2,12766 gold badges2828 silver badges4545 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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,
      }
    });