NextJS 14 + responsiveness

zsoltbokor commented 6 days ago

Hi,

with nextjs 14+ when I am trying to use this library the CSS is not prepared in advance, it's injects it as "style" instead of creating css classes and so while I resize the window nothing happens.

package.json

"next": "^14.2.9",
    "next-connect": "^1.0.0",
    "react": "18.3.1",
    "react-dom": "^18.3.1",
    "react-native": "0.75.2",
    "react-native-media-query": "2.0.1",
    "react-native-web": "^0.19.12"

next.config.js

const fs = require('fs');
const path = require('path');

const pages = fs
    .readdirSync(path.resolve(__dirname, 'pages'), { withFileTypes: true })
    .filter((dirent) => dirent.isDirectory())
    .map((dirent) => dirent.name);

module.exports = {
    env: { pages },
    transpilePackages: [
        'react-native-media-query'
    ],
    webpack: (config, options) => {
        config.resolve.alias['react-native'] = 'react-native-web';
        return config;
    }
};

_document.tsx

 import Document, {DocumentContext, Head, Html, Main, NextScript} from 'next/document';
import {AppRegistry} from 'react-native-web';
import React from 'react';
import {flush} from 'react-native-media-query';

export default class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const {renderPage} = ctx;

        AppRegistry.registerComponent('react-native-stylesheet', () => Main);
        const {getStyleElement} = AppRegistry.getApplication('react-native-stylesheet');
        const page = await renderPage();
        const styles = [getStyleElement(), flush()];

        return {...page, styles: React.Children.toArray(styles)};
    }

    render() {
        return (
            <Html>
                <Head/>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </Html>
        );
    }
}

pages/index.tsx

import React from 'react';
import {Text, View} from 'react-native';
import StyleSheet from 'react-native-media-query';

const {ids, styles} = StyleSheet.create({
    example: {
        backgroundColor: 'green',
        borderRadius: 5,
        '@media (max-width: 1600px) and (min-width: 800px)': {
            backgroundColor: 'red',
            borderRadius: 10,
        },
        '@media (max-width: 800px)': {
            backgroundColor: 'blue',
            borderRadius: 15
        },
    }
});

export default function IndexPage() {
    return (
        <View>
            <Text style={styles.example} dataSet={{media: ids.example}}>Hello, world!</Text>
        </View>
    );
}

what I noticed, the ids is empty object in my case. Please help me to identify, what I am doing wrong?

Thanks!

kasinskas commented 6 days ago

hi, could you maybe share a repo with minimal setup where I could attempt to reproduce the issue?

zsoltbokor commented 6 days ago

well, there is no real repo, I just created a new cli RN project, installed the RNW and the RNMQ too and tried to follow your instructions from the docs

zsoltbokor commented 6 days ago

@kasinskas Pushed my project here: https://github.com/zsoltbokor3ssprx/rnw-rnmq-nextjs

kasinskas / react-native-media-query

NextJS 14 + responsiveness #17