oceanbit / react-native-responsive-ui Goto Github PK

Hi,

I am using following method to use this module.

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

class MyComponent extends ResponsiveComponent {
render(){
    return (
        <View>
          ...
        </View>
     )
    }
get respStyles() {
    return ResponsiveStyleSheet.select([
      {
        query: { orientation: "portrait" },
        style: {
          container: {
            flex: 1,
            flexDirection: "column"
          }
        }
      },
      {
        query: { orientation: "landscape" },
        style: {
          container: {
            flex: 1,
            flexDirection: "row"
          }
        }
      }
    ]);
  }
}

export default MyComponent;

I have updated all modules to latest including React-Native 0.59.9
and i started facing weird runtime error as
Super expression must either be null or a function

and this for all component which are using ResponsiveComponent.

You help is highly appreciable.

Hi All,

I am trying to update my dependencies and found that react-native-responsive-ui shows latest version as 2.1.1 on npmjs as well as github.

However, when I run npm i -S react-native-responsive-ui@latest, it always installs version 1.1.1 which is pretty old. Even if I try npm i -S [email protected] or 2.1.0 or 2.0.0, it always installs 1.1.1. I think there might be an issue with publishing these versions. Any help here would be highly appreciated.

We can see the failure here when we try to run it too: RunKit

Here is a screenshot of the npm install error I see:

~ Manthravadi

Getting an error when running for the first time in a new project.

bundling failed: "TransformError: /Users/kayluhb/Projects/TestProject/node_modules/react-native-responsive-ui/lib/index.js: Couldn't find preset \"babel-preset-expo\" relative to directory \"/Users/kayluhb/Projects/TestProject/node_modules/react-native-responsive-ui\""

Looks like it's looking for the babel-preset-expo.

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.48.4",
    "react-native-responsive-ui": "^1.1.1"
  },

Hi there,

I have created a ScrollView with some Card Components inside.
When the orientation changes to landscape I want to increase minHeight on those Cards, which I do inside the stylesheet with:

  {
    query: {
      orientation: "landscape"
    },
    style: {
      card: {
        minHeight: 120
      }
    }
  }

Thinking it might be a ScrollView issue (of which I had plenty) I tried the same with setting the background color - it just does not happen.

Any suggestions on what I'm doing wrong?

Now that we have robust integration testing and an example app on the way, I wanted to start thinking of what we can do for v3.

I have a few thoughts, and there's some existing work by @wcandillon on #49. I wasn't part of the project during that time, so I'm somewhat of an outsider looking in when it comes to the work in that PR. I figured instead of bothering @wcandillon for 1:1 explanations, we could open up the discussions to everyone and get some broader feedback on what we'd like to see in v3.

Potential Additions

useStyle/getStyle

First, some background. We'd like to remove useStylesheet/getStylesheet and replace them with something a bit more readable. For example, if we wanted to have a base set of styles (flex: 1) that's then overwritten in a specific media query flexDirection, we'd have to duplicate the base style:

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

Not only does this duplicate the base style, but it duplicates the key of the style container. This makes keeping styles consistent with each other significantly more difficult than need be.

One potential solution to this problem was suggested in #33. The idea being that we could have an API similar to Platform.select (from react-native core) as part of this library.

This is the API for Platform.select:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'green'
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue'
      }
    })
  }
});

However, we're unable to use the spread operator in a similar manner due to the reactive nature of Dimentions. Once a spread is ran, it cannot update the base object. The reason Platform is able to get away with this is because you will never have an instance where your app is running on one platform and need to be refreshed to another platform.

Because of this, we're thinking of a hybrid approach. Something that has the same readability advantages of Platform.select, but is reactive to window size changes for applications like those on the web.

  import {useStyle} from 'react-native-responsive-ui';

  const styles = useStyle(cond => ({
    container: {
        flex: 1,
        cond(
            { orientation: "landscape" },
            { flexDirection: "row" }
        ),
        cond(
            { orientation: "portrait" },
            { flexDirection: "column" }
        ),
    }
  }));

Altenatively, if we didn't want to use hooks, we could use:

  import {getStyle} from 'react-native-responsive-ui';

   const styles = getStyle(dimensions.get("window"), cond => ({
        container: {
            flex: 1,
            ...cond(
                {orientation: "landscape"},
                {flexDirection: "row"}
            ),
            ...cond(
                {orientation: "portrait"},
                {flexDirection: "column"}
            ),
        }
    }));

Bikeshed:

Do we want to call this useStyle? We could also name it:

• useResponsiveStyle
• Something else

We don't need to make cond an arrow function. We could instead have:

import {useStyle, cond} from 'react-native-responsive-ui';
 
const styles = useStyle({
  container: {
        flex: 1,
        cond(
            { orientation: "landscape" },
            { flexDirection: "row" }
        ),
        cond(
            { orientation: "portrait" },
            { flexDirection: "column" }
        ),
    }
});

However, we couldn't do the same for getStyle due to the lack of hooks. Because of this, I'm less in favor of this API, but a good argument could easily change my mind

DimensionsContext

This would allow class components to more easily get the value from useDimentions, and enable potential future APIs without requiring breaking changes.

Pros:

• If we end up needing context in the future, we don't need to have a breaking release

Downsides:

• Easily implementable in client-side
• Not currently used

Bikeshed:
Currently, none of our APIs require this context for usage. However, to simplify our documentation, should we simply suggest users always use DimentionsProvider in their apps?

Potential Removals

ResponsiveComponent abstract class

As it's removed from #49, it seems like something that both @wcandillon and myself seem to want to remove from the codebase. It's easily recreated in codebases that require it (especially if we add the context), isn't used internally in our codebase, and it seems like the larger React community is migrating away from class components

isInInterval function

While I don't plan on removing this from the codebase, I would like to remove the export that's set on the function currently. For a start, there's no documentation on the function, it's trivially re-implemented in codebases that needs it, and doesn't seem to match the purpose of our codebase

mediaQuery function

This is talking about the mediaQuery function documented in the README, not the MediaQuery component. That component isn't going anywhere and is part of what I consider our core API

This is another scenario where we'd potentially keep the code in our codebase but remove the export that exposes it publically. While this is documented in the README currently, it seems like it's been removed from #49's README. Further, it feels like it's exposing internal implementation and I'm admittedly having a difficult time thinking of how it would be utilized in an app. It's also easily confused with the component of the same name (different casing), which isn't ideal.

We're planning on breaking changes to the mediaQuery function regardless (namely, switching the order of props around for better readability), so removing the export and it's external usage would allow us to do that without documenting the change of props externally

useStylesheet/getStylesheet

See useStyle for more

This library does not support reactjs-Typescript?

From

    get style() {
        return ResponsiveStyleSheet.select([
        {
            query: { orientation: "landscape" },
            style: {
                btns: {
                    flexDirection: "row"
                },
                btn: {
                    flex: 1
                }
            }
        },
        {
            query: { orientation: "portrait" },
            style: {
                btns: {
                    alignSelf: "stretch"
                },
                btn: {
                    flex: 0
                }
            }
        }
        ]);
    }

to

    get style() {
        return {
            btns: {
               flexDirection: "row",
               ResponsiveStyleSheet.select([
                 {
                    query: { orientation: "landscape" }
                    style: {
                      alignSelf: 'stretch'
                    } 
                 }
            }
        }
    }

The benefit being, it can apply a set of base styles and then override based on MediaQuery match.

Hello,
I have a problem with the getStyleSheet function, like in the example i try to get my styles from the render function.

like this :
public render(): any { const dims = Dimensions.get('window'); const rStyles = getStyleSheet( { width: dims.width, height: dims.height }, responsiveStyles ); }

and responsive styles :
const responsiveStyles = [ { query: { orientation: 'landscape' }, style: { mainContainer: { flexDirection: 'row' }, topContainer: { flex: 1 } } }, { query: { orientation: 'portrait' }, style: { mainContainer: { flexDirection: 'column' }, topContainer: { flex: 0 } } }

here the full error log :
TypeError: TypeError: (0, _reactNativeResponsiveUi.getStyleSheet) is not a function. (In '(0, _reactNativeResponsiveUi.getStyleSheet)({ width: dims.width, height: dims.height }, _LivestageStyles.responsiveStyles)', '(0, _reactNativeResponsiveUi.getStyleSheet)' is undefined) This error is located at: in LoginContainer (created by Connect(LoginContainer)) in Connect(LoginContainer)

I use react 16.8.3 react native 0.59.10 typescript 2.9.2 and responvive-ui 2.1.1
Anybody know if i have missed something?

Thanks

The latest version has not been pushed to npm. Therefore, we can't import directly { MediaQuerySelector } from 'react-navigation-responsive-ui'.

Hey. thanks for your cool library. Is it possible to use the lib without flow? I'm getting this error when installing via npm:

ERROR in ./node_modules/react-native-responsive-ui/lib/MediaQuery.js
Module parse failed: The keyword 'interface' is reserved (5:0)

Hey @wcandillon, I was following your great medium article on using this package (and on react-native images in general). I am getting a lot of errors trying to send the base64 string to my server. It could be a number of things, but my first guess is maybe it's too big. Have you encountered this?

I'm using apollo-client (so this is going up in a mutation), but, it seems to be a HTTP error.

Either way, I'll post more info here as I find it. And hopefully update this issue with a solution!

Hi I got a question about the min/max width/height props of the MediaQuery component. What values should I put in there? Is there an overview of common screen sizes to determine a small vs a big screen in the same orientation? I'm currently working with a value of 350 (width) but that's just something I made up.

E.g. iPhone X has a screen width of 375, iPhone 5s has a screen width of 320.

When I use typescript to develop, always met error by calling useDemission. Always said, cannot call the hook in the body.

So, is there any suggestion to use this util under typescript?

I'm using React 16 but get the error npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself

Hi all, I discovered a pretty interesting bug which is linked to the use of _.merge in the getStylesheet function.

Merge flattens the objects down and modifies the first object passed in to the array, which means that your conditional styles will also get flattened into the original object reference.

What this meant for us was resizing the browser window would initially activate the correct responsive styles, but resizing back would cause those extra styles to linger.

In the example below the values in the tablet object are inserted into the base object, breaking the responsive behaviour until next browser refresh / app reboot.

Fix: Use cloneDeep here (important to a deep copy as it's actually the internal object references causing problems)

// important that we use cloneDeep here because the react-native-responsive-ui library uses Lodash merge which modifies some of the original references. So your tablet / desktop styles will leak into the base object without this.
const queries = [
	{
		query: {
			minWidth: 0,
		},
		style: cloneDeep(base),
	},
	{
		query: {
			minWidth: GLOBALS.SCREEN.BREAKPOINTS.tablet,
		},
		style: cloneDeep(tablet),
	},
	{
		query: {
			minWidth: GLOBALS.SCREEN.BREAKPOINTS.desktop,
		},
		style: cloneDeep(desktop),
	},
];

We should add cloneDeep to getStylesheet. I'm going to open a PR for this.

this library do not support in android?

Currently, the releases tab's on GitHub latest update shows 1.1.1. NPM seems to have a v2. It would be nice to update the releases tab for others to track what's been changed in the project - like a changelog

I'm not sure if the lodash dependency is needed here:

https://github.com/oceanbit/react-native-responsive-ui/blob/master/src/useStylesheet.ts#L1

I may have missed something but that's the only reference to lodash for files in the src directory.

when using @Responsive annotation, the component ref does not have methods accessible anymore

I am trying to use this library in a project which is not using typescript.

I am getting error Module not found: Can't resolve 'react-native-responsive-ui' in..... on closer inspection it seems all files in both dist and src are ts or tsx, and readme doesn't indicate anything about this typescript transpilation dependency.

Normally, npm packages are released with compiled ES5 or ES6 code. Which make them usable universally.

Version installed: 2.1.1

UPDATE:
Part of the problem was the absence of index.js on the root. I don't know if i am doing something wrong, or there is some-other way of suing this and similar architecture packages.

What i have done for now, is to clone to generate js files and import like this: import { useDimensions } from 'react-native-responsive-ui/dist/module';

Hi,
After adding this dependency, I get:
Bundling index.android.js
Analysing...Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: react-native
Paths: /node_modules/react-native-responsive-ui/node_modules/react-native/package.json collides with/node_modules/react-native/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
Duplicate module name: react-native
Paths: /node_modules/react-native-responsive-ui/node_modules/react-native/package.json collides with /node_modules/react-native/package.json

I don't really know what this means, and googling for that made me more confused than expected.
I don't know if that's relevant, I'm using react-native 0.42 (0.43+ only cause dependency conflicts because modules won't use an alpha version of react).

I just migrated my react-native project and it seems that there is no types provided for your module:

I tried 'npm install @types/react-native-responsive-ui' without success.

This shield tsc to find out that you implement React.Component and cut all the inheritance ending with method not defined (setState()...)

Do you plan to provide typing?

react-native-web projects can greatly benefit from this project, as building responsive UIs is core part of building standard cross platform and cross screen size apps.

I am still playing around to see if it works with react-native-web but dropping in official support(which hopefully shouldn't require a lot of rework) will be great for react PWA community.

If this works well with RNW as is, than having a note in readme will still be better to indicate support for RNW.

Thanks.

Looks like you list maxHeight twice in the readme and don't have maxWidth listed.

It is possible to avoid the need to extend ResponsiveComponent by using the higher order component pattern, which simply wraps components that want to listen to changes in window dimensions and passes the window state down as props. This allows for flexible component composition. Here's an example of a possible implementation:

import {Component} from "react";

import Device, {AllDimensions, DimensionChangeSubscription} from "./Device";

export default function withWindow(WrappedComponent) {
  return class ResponsiveComponent extends Component {

      state: AllDimensions = Device.dimensions;
      subscription: DimensionChangeSubscription;

      componentWillMount() {
          this.subscription = Device.subscribeToDimensionChanges(dims => this.setState(dims));
      }

      componentWillUnmount() {
          this.subscription.unsubscribe();
      }

      render() {
        return <WrappedComponent window={this.state.window} {...this.props} />;
      }
  }
}

Consumers of this library could then use the higher order component like so:

import React from "react;
import {withWindow} from "react-native-responsive-ui";

class LogDimensionChanges extends React.Component {
    render() {
        const {width, height} = this.props.window;
        const mode = height > width ? "portrait" : "landscape";
        console.log(`New dimensions ${width}x${height} (${mode})`);
        return null;
    }
}

export default withWindow(LogDimensionChanges);

Hi,

I'm currently using [email protected] with [email protected] and I'm getting the following warning:

ImageCarousel extends ResponsiveComponent.