Week 4 Report
Past Week
In the past week I worked on fixing the side menu width for tablet devices.
I discovered that react-native-side-menu has an openMenuOffset prop that can be used to set the width of the side menu. So I started writing and testing getResponsiveValue() which I'll use to set the value of the openMenuOffset prop.
getResponsiveValue is a function that will take a valueMap argument, which contains values for different ranges of screen width. Using valueMap, getResponsiveValue will return the value that corresponds to the device's screen width. getResponsiveValue uses the Dimensions api in react-native to get access to a device's screen width.
This is the shape of valueMap:
interface ValueMap {
sm?: number;
md?: number;
lg?: number;
xl?: number;
xxl?: number;
}
where sm,md,lg,xl,xxl are a range of screen width values.
// sm: < 481px
// md: >= 481px
// lg: >= 769px
// xl: >= 1025px
// xxl: >= 1201px
For Example:
let padding = getResponsiveValue({ sm: 10, md: 20, lg: 30, xl: 40, xxl: 50 });
For devices with a screen width less than 481px, padding will have a value of 10, a value of 20 for devices with a screen width between 481px and 768px, value of 30 for screen widths between 769px and 1024px and so on.
As an alternative to the object syntax, values can also be specified as an array.
For example, the padding specified in the first example can also be written as:
let padding = getResponsiveValue([10,20,30,40,50]);
If certain values aren't specified in valueMap, getResponsiveValue will use the nearest available value before it, or the nearest available value after it if there's no value before. For example, If lg isn't specified, but sm and md are specified, getResponsiveValue will return the md value instead.
Current progress:
get-responsive-value.ts, get-responsive-value.test.ts
This Week
This week I plan to finish working on the getResponsiveValue function and it's tests, then use
it in the mobile app to fix the side menu width.