Change font style (or size)

[kitkline]

Hi folks,

Anyway to style the date picker? Finding it looks vey small when used on iPad scale devices

Great tool - many thanks!

Cheers
Kit

[henninghall]

Hi!

You could try to scale it appropriately with the transform property. Unfortunately, this does not look perfect on android without playing around a bit with the height. If you want to help out to get it to look better on Android it is very appreciated 🙂

<View style={{ transform: [{ scale: 1.2, }], }}>
      <DatePicker
        date={this.state.date}
        onDateChange={date => this.setState({ date })}
        style={{ height: 250 }}
      />
</View>

[chr4ss1]

I use this in my project (for years) to keep the units look same on every device.

import { Dimensions, PixelRatio } from 'react-native';

const { height, width } = Dimensions.get('window');
const CURRENT_RESOLUTION = Math.sqrt(height * height + width * width);

const PREDEF_RES = {
    iphoneX: {
        px: {
            width: 1125,
            height: 2436
        },
        dp: {
            width: 375,
            height: 812
        }
    },
    iphone8P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 414,
            height: 736
        }
    },
    iphone8: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone7P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 414,
            height: 736
        }
    },
    iphone6sP: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone7: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6s: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphoneSE: {
        px: {
            width: 640,
            height: 1136
        },
        dp: {
            width: 320,
            height: 568
        }
    }
};

export const DEFAULT_SCREENSIZE = PREDEF_RES.iphone6.dp;

const create = (designSize = { width: 414, height: 736 }) => {
    if (!designSize || !designSize.width || !designSize.height || typeof designSize.width !== 'number' || typeof designSize.height !== 'number') {
        throw new Error('react-native-pixel-perfect | create function | Invalid design size object! must have width and height fields of type Number.')
    }
    const DESIGN_RESOLUTION = Math.sqrt(designSize.height * designSize.height + designSize.width * designSize.width);
    const RESOLUTIONS_PROPORTION = CURRENT_RESOLUTION / DESIGN_RESOLUTION;
    return size => RESOLUTIONS_PROPORTION * size;
};

const calculateUnit = create(DEFAULT_SCREENSIZE);
const DevicePixels = {};

export function getDevicePixels (i) {
    if (DevicePixels[i]) {
        return DevicePixels[i];
    }

    DevicePixels[i] = PixelRatio.roundToNearestPixel(calculateUnit(i));
    return DevicePixels[i];
}

export function getDevicePixelsNoRounding (i) {
    return calculateUnit(i);
}

for (let i = 0; i < 1000; i++) {
    DevicePixels[i] = PixelRatio.roundToNearestPixel(calculateUnit(i));
}

export default DevicePixels;

Would be good to get it integrated with the library,

for example

<Text style={{fontSize: DevicePixels[20], padding: DevicePixels[10], height: DevicePixels[20], borderWidth: DevicePixels[1]}}

This would look the same on every device no matter the scaling.

[Yigityakut]

I use this in my project (for years) to keep the units look same on every device.

import { Dimensions, PixelRatio } from 'react-native';

const { height, width } = Dimensions.get('window');
const CURRENT_RESOLUTION = Math.sqrt(height * height + width * width);

const PREDEF_RES = {
    iphoneX: {
        px: {
            width: 1125,
            height: 2436
        },
        dp: {
            width: 375,
            height: 812
        }
    },
    iphone8P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 414,
            height: 736
        }
    },
    iphone8: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone7P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 414,
            height: 736
        }
    },
    iphone6sP: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6P: {
        px: {
            width: 1080,
            height: 1920
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone7: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6s: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphone6: {
        px: {
            width: 750,
            height: 1334
        },
        dp: {
            width: 375,
            height: 667
        }
    },
    iphoneSE: {
        px: {
            width: 640,
            height: 1136
        },
        dp: {
            width: 320,
            height: 568
        }
    }
};

export const DEFAULT_SCREENSIZE = PREDEF_RES.iphone6.dp;

const create = (designSize = { width: 414, height: 736 }) => {
    if (!designSize || !designSize.width || !designSize.height || typeof designSize.width !== 'number' || typeof designSize.height !== 'number') {
        throw new Error('react-native-pixel-perfect | create function | Invalid design size object! must have width and height fields of type Number.')
    }
    const DESIGN_RESOLUTION = Math.sqrt(designSize.height * designSize.height + designSize.width * designSize.width);
    const RESOLUTIONS_PROPORTION = CURRENT_RESOLUTION / DESIGN_RESOLUTION;
    return size => RESOLUTIONS_PROPORTION * size;
};

const calculateUnit = create(DEFAULT_SCREENSIZE);
const DevicePixels = {};

export function getDevicePixels (i) {
    if (DevicePixels[i]) {
        return DevicePixels[i];
    }

    DevicePixels[i] = PixelRatio.roundToNearestPixel(calculateUnit(i));
    return DevicePixels[i];
}

export function getDevicePixelsNoRounding (i) {
    return calculateUnit(i);
}

for (let i = 0; i < 1000; i++) {
    DevicePixels[i] = PixelRatio.roundToNearestPixel(calculateUnit(i));
}

export default DevicePixels;

Would be good to get it integrated with the library,

for example

<Text style={{fontSize: DevicePixels[20], padding: DevicePixels[10], height: DevicePixels[20], borderWidth: DevicePixels[1]}}

This would look the same on every device no matter the scaling.

@ChrisEelmaa Does this method work on Android devices too? Why did you pick especially iphone6 for the default screensize. I have been trying to find the perfect way for this scaling issue and I have been writing a lot of stlying to my components for different device sizes. Little enlightenment about this issue is much appreciated.