How to do React-Native responsive styling for e.g. tablet vs phone. (media query)
5
Dear all, Today I was looking for information on how to implement responsive styling in NativeReact classes. I found a rudimentary solution, which I'd like to share here for the community to use: import { Dimensions } from "react-native"; const { height, width } = Dimensions.get("window"); export const btnResponsive = { container: { backgroundColor: (width <500) ? 'red' : 'yellow', }, } The code uses the Dimensions.get method to obtain the height and width of the screen. Based on these values, it is possible to use the ternary operator ( query ? true value : false value) to alternate between styles. It is even possible to embed ternary conditions to check for multiple conditions. However, I feel there must be a more elegant solution out there. Should you come across one, feel free to share it here, for the community to use. Best regards, Wouter