React Native- Responsive UI(2022)

After you've built the UI and functionality of your app and tested it on various devices, you'll notice that something is wrong or missing with the layouts you expected. This is a common developer issue that must be addressed from the start of the development process.

In this article we will tackle the responsiveness issues that every developer face in mobile development and specifically in react native. This is part of a library feature that will be made soon as solution.

You can also check the new theming library:
https://dev.to/kjatsx/react-native-theming-made-easy2022-479c

Responsive Problems:

Layouts: Making sure layouts are stable and adaptable in all screen sizes can be done with the following:

• Flex-box: Is designed to keep the proportions and consistency of the layout on different screen sizes.

• Percentage: Using percentage for width and height will keep layouts responsive relative to their parent elements.

• Aspect Ratio: If you know only one dimension of your element (width or height), this is where the Aspect Ratio comes into play, it helps keep proportions of your elements under control by keeping the second dimension in relation to the one you already know.

Images: Making sure images are stable and adaptable in all screen sizes can be done with the following:

• Percentage: Images size can be scaled based on their parent container height and width with a percentage value.

• ImageArray: A very nice feature of react native Image component is that you can pass an array of sourceImage objects. This array of objects includes source, width, and height. The component will use the size of the container to pick the image from the list that is the best match.

FontSize: Making sure fonts are stable and adaptable in all screen sizes can be done with the following:

• Screen window fontScale: Using the ratio of the screen size, fonts in the app can be scaled accordingly.

Responsive Solution:

The Power of mediaQuery

• Media query techniques allow different presentation and content to be served depending on the output device, helping ensure that your mobile app renders optimally on all devices and platforms.

How does this help in React Native ?

Layouts - can be changed/scaled dynamically based on devices size.

FontSize - can be scaled dynamically and differently based on devices size.

Images - can be scaled dynamically and differently based on devices size.

Portrait & Landscape - orientation changes style dynamically for Portrait & Landscape mode.

What dose the library bring ?

StyleSheet

• This time you have an extra prop called mediaQuery where you can specify all your queries there.

MediaQuery Types:

1) min_w_value - apply these styles in min width value

2) min_h_value - apply these styles in min height value

3) max_w_value - apply these styles in max width value

4) max_h_value - apply these styles in max height value

5) Bw_value1 _ value2 - apply these styles when width between value1 and value2

6) Bh_value1 _ value2 - apply these styles when height between value1 and value2

7) Pm - apply these styles when device in portrait mode.

8) Lm - apply these styles when device in landscape mode.

Dynamic styles

• This means that whenever the phone is flipped and changes orientation the mediaQuery will apply the new styles automatically.

How things will look like:

// Responsive Styles 
import { StyleSheet, R} from 'responsive-csx';

// Components 
import { Text, View } from 'react-native';

const DemoComponent = () => {

return (
  <View style={styles.CONTAINER}>

    <Text style={R(styles.TEXT)}>Hey, I responsive text</Text>

    <Image style={R(styles.IMAGE)} source="./assets/profile"/>

  </View>
)}


const styles = StyleSheet.create({
    CONTAINER: {
     flex: 1,
     backgroundColor: 'white',
     alignItems: 'center',
     justifyContent: 'center',
   },
   TEXT: {
     fontWeight: 'bold',
     fontSize: 16,
     color: 'green',
     mediaQuery:{
       min_w_500:{
        fontSize: 12,
       }
     }
   },
   IMAGE:{
    width:250,
    height: 250, 
    mediaQuery:{
       min_w_500:{
        width:120,
        height: 120,
       }
     }
   }
})

This library is currently in progress and will be available in few weeks. Anyone who wishes to contribute for the library, get in touch!