Error for ResponsiveComponent in iOS and Android about react-native-responsive-ui

[wcandillon]

haha thks and sorry ;-) It's getStylesheet not getStyleSheet 🙈

[wcandillon]

Hello @cjadhav,

Unfortunately, ResponsiveComponent has been deprecated. Could you update to the latest API? Sorry for the trouble.

[wcandillon]

Sorry about that! Yes let me provide an update that is friendly for class components 😅

[wcandillon]

Sorry I should have been clearer. You can use ResponsiveComponent again. Please refer to the documentation athttps://github.com/wcandillon/react-native-responsive-ui/blob/master/README.md

[cjadhav]

Thanks @wcandillon for quick reply.
I'll update the source with latest methods.

[cjadhav]

Hi @wcandillon,
I am facing new error. I have done the change for latest update.
using the useStylesheet now my look like this,

import { useStylesheet } from "react-native-responsive-ui";

class MyComponent extends Component {
render(){
    const respStyles = useStylesheet(staticStyle);
    return (
        <View style={respStyles.container}>
          ...
        </View>
     )
    }
}

const staticStyle = [
  {
    query: { orientation: "portrait" },
    style: {
      container: {
        flex: 1,
        flexDirection: "column"
      }
    }
  },
  {
    query: { orientation: "landscape" },
    style: {
      container: {
        flex: 1,
        flexDirection: "row"
      }
    }
  }
];

export default MyComponent;

Whenever this component is called to render app crashes with following error,
Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)

Can you help to solve this ?

Some more details,
Using following configurations,

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-responsive-ui": "2.0.2",

Thanks

[cjadhav]

Hi @wcandillon,

Thanks for the fix but it's still broken for me.
Giving same error for v.2.1.0 also.

Tested on iPhone XR (iOS 12.2)

Please help me.

[cjadhav]

Thanks @wcandillon.

Using ResponsiveComponent to create class. But not sure how should I call getStyleSheet to receive orientation based styles.

import { ResponsiveComponent, getStyleSheet } from "react-native-responsive-ui";

class MyComponent extends ResponsiveComponent {
render(){
    const respStyles = getStyleSheet(staticStyle);
    return (
        <View style={respStyles.container}>
          ...
        </View>
     )
    }
}

const staticStyle = [
  {
    query: { orientation: "portrait" },
    style: {
      container: {
        flex: 1,
        flexDirection: "column"
      }
    }
  },
  {
    query: { orientation: "landscape" },
    style: {
      container: {
        flex: 1,
        flexDirection: "row"
      }
    }
  }
];

export default MyComponent;

I am facing errors in this.
and not getting how to use query based stylesheet.

[cjadhav]

@wcandillon, I have tried useStylesheet as per documentation but gives hook error.
tried getStyleSheet but not getting how to pass static styles to that function.

Your help is highly appreciable.

[wcandillon]

@cjadhav can you try with getStyleSheet as

    const {width, height} = this.state;
    const respStyles = getStyleSheet({width, height}, staticStyle);

[cjadhav]

@wcandillon, sorry but above solution also failed.
It's giving me TypeError.

TypeError: (0 , _reactNativeResponsiveUi.getStyleSheet) is not a function

[wcandillon]

@cjadhav could it be an issue with the cache of your package bundle?

[cjadhav]

@wcandillon Tried with all cache clear/reset.
No luck. Giving same error.

Taking the height and width from Dimensions.get("window")

[cjadhav]

Same error with V.2.1.1 from your latest module.

[wcandillon]

sorry to hear that, can you send me the exact code snippet?

[cjadhav]

@wcandillon, Sure.
This is code just removed the other business login.

import React, { Component } from "react";
import { StyleSheet, Text, View, Image, Platform, Animated, TextInput, ScrollView } from "react-native";
import { Dimensions, ImageBackground, TouchableOpacity, TouchableHighlight } from "react-native";
import { ResponsiveComponent, getStyleSheet } from "react-native-responsive-ui";

class Schedules extends ResponsiveComponent {
  constructor(props) {
    super(props);
    this.state = {
      height: Dimensions.get("window").height,
      width: Dimensions.get("window").width
    };
  }

  render() {
    // const { respStyles } = this;
    const { width, height } = this.state;
    const respStyles = getStyleSheet({ width, height }, staticStyle);

    return (
      <View
        style={styles.viewContainer}
        onLayout={e => this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height })}
      >
        <View style={respStyles.viewHolder} />
      </View>
    );
  }
}

const staticStyle = [
  {
    query: { orientation: "portrait" },
    style: {
      viewHolder: {
        flex: 1,
        flexDirection: "column"
      }
    }
  },
  {
    query: { orientation: "landscape" },
    style: {
      viewHolder: {
        flex: 1,
        flexDirection: "row"
      }
    }
  }
];

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#F0F0F0"
  }
});

export default Schedules;

[cjadhav]

@wcandillon, It worked.
Thank you so much for the help.