CODEWITHSUNDEEP
react-native
M.Kalidass
M.Kalidass

Reputation: 348

React native Responsive layout in Functional component

Below is the basic code for Responsive layout using npm package(react-native-responsive-screen). This is working fine as expected in Class component. But, I want to change the below code to Functional component. I have almost changed everything. Initially no error when i load the app in portrait/landscape mode. Once i change it to landscape/portrait, it will come up with some error.

Here is the link of Original source. https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/README.md

import React, { useEffect, useState } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, View, Button, Text} from "native-base";

import {widthPercentageToDP as wp,
    heightPercentageToDP as hp,
    listenOrientationChange as lor,
    removeOrientationListener as rol } from 'react-native-responsive-screen';

const Responsive = () =>
{
useEffect( () =>
{
    lor();
    return () => rol()
},[])

const styles = StyleSheet.create({
    container: { flex: 1, alignItems: 'center', justifyContent:'center' },
    title: {
        backgroundColor: 'gray',
        height: hp('10%'),
        width: wp('80%'),
        alignItems: 'center',
        justifyContent:'center',
        marginVertical: wp('10%'),
    },
    myText: {
        textAlign:'center',
        color:'white',
        fontSize: hp('5%') // End result looks like the provided UI mockup
    },
    buttonStyle:
    {
        height: hp('8%'), // 70% of height device screen
        width: wp('30%'),
        marginHorizontal: wp('10%'),
    },
    buttonContainer:
    {
        flexDirection:'row',
        marginBottom: wp('10%'),
    },
    paraContainer:
    {
        width: wp('80%'),
    },
    paraText:
    {
        textAlign:'justify'
    }
    });

return (
    <Container>
  <View style={styles.container}>
    <View style={styles.title}>
      <Text style={styles.myText}>Screen title with 50% width</Text>
    </View>
    <View style={styles.buttonContainer}>
    <Button success style={styles.buttonStyle}><Text>Button 1</Text></Button>
    <Button success style={styles.buttonStyle}><Text>Button 2</Text></Button>
    </View>
    <View style={styles.paraContainer}>
        <Text style={styles.paraText}>
        As mentioned in "How to Develop Responsive UIs with React Native" article, this solution is 
        already in production apps and is tested with a set of Android, iOS emulators of different 
        screen 
        specs, in order to verify that we always have the same end result.
        </Text>
    </View>
  </View>
  </Container>
  );
  }



    export default Responsive;

enter image description here

Thanks in Advance.

Upvotes: 0

Views: 1083

Answers (1)

Ravi
Ravi

Reputation: 35549

It is not due to your code, it is due to library limitation. Current version of library still does not support functional components.

There is an open issue and PR regarding that open

issue: https://github.com/marudy/react-native-responsive-screen/issues/82

PR: https://github.com/marudy/react-native-responsive-screen/pull/70

If you still want to continue with this library, just use the head of that PR in your package.json and it should work.

"react-native-responsive-screen": "marudy/react-native-responsive-screen#70/head",

Make sure to delete node_module and perform yarn or npm install

Upvotes: 1

Related Questions