Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NextJS 14 + responsiveness #17

Open
zsoltbokor opened this issue Sep 11, 2024 · 4 comments
Open

NextJS 14 + responsiveness #17

zsoltbokor opened this issue Sep 11, 2024 · 4 comments

Comments

@zsoltbokor
Copy link

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!
@zsoltbokor zsoltbokor changed the title NextJS 14 NextJS 14 + responsiveness Sep 11, 2024
@kasinskas
Copy link
Owner

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

@zsoltbokor
Copy link
Author

image
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
Copy link
Author

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

@kasinskas
Copy link
Owner

hey, sorry for late reply, only now had a chance to investigate. it seems like it was picking up index file meant for native platforms instead of index.web.js

adding .web extensions to webpack config resolver and 'react-native-web' to transpilePackages in next config should help. simple example below:

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', 'react-native-web'],
  webpack: (config, options) => {
    config.resolve.alias['react-native'] = 'react-native-web';
    const ogExtensions = config.resolve.extensions;
    config.resolve.extensions = [
      '.web.js',
      '.web.tsx',
      '.web.ts',
      '.web.jsx',
      ...ogExtensions,
    ];
    return config;
  },
};
Screen.Recording.2024-09-19.at.23.00.07.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zsoltbokor @kasinskas