React Native- Responsive UI(2022)
Tags: reactnative, responsive, ui, react
Published: 2022-01-13 20:37:26

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:***

```js

// 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!