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.

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

Suggested fix for height for web app #270

Open
parmy opened this issue Sep 28, 2024 · 0 comments
Open

Suggested fix for height for web app #270

parmy opened this issue Sep 28, 2024 · 0 comments

Comments

@parmy
Copy link

parmy commented Sep 28, 2024

I'm adapting a react-native app to render in a browser.

I noticed the intro pages would not render full height as they do in a native app.

I made a simple update which appears to have fixed the issue and not broken the code for native apps.

It should be noted I'm not rendering buttons or pagination - my hack may cause an issue if these are rendered, as i didn't test that/

I changed the code in "index.js" from:

        this._renderItem = (flatListArgs) => {
            const { width, height } = this.state;
            const props = { ...flatListArgs, dimensions: { width, height } };
            // eslint-disable-next-line react-native/no-inline-styles
            return <react_native_1.View style={{ width, flex: 1 }}>{this.props.renderItem(props)}</react_native_1.View>;
        };
        this._renderItem = (flatListArgs) => {
            const { width, height } = this.state;
            const props = { ...flatListArgs, dimensions: { width, height } };
            // eslint-disable-next-line react-native/no-inline-styles
            return <react_native_1.View style={{ width, **height,** flex: 1 }}>{this.props.renderItem(props)}</react_native_1.View>;
        };

Adding height for each page wrapper.

In case it helps anyone, I override the _renderItem function with the following custom class:

import AppIntroSlider from 'react-native-app-intro-slider';
const react_native_1 = require("react-native");

  class CustomAppIntroSlider extends AppIntroSlider {
      constructor(props) {
        super(props);
      }
    
      // Override _renderItem to support full height on browser version
      _renderItem = (flatListArgs) => {
        const { width, height } = this.state;
        const props = { ...flatListArgs, dimensions: { width, height } };
        // eslint-disable-next-line react-native/no-inline-styles
        return <react_native_1.View style={{ width, height, flex: 1 }}>{this.props.renderItem(props)}</react_native_1.View>;
    }
}

export default CustomAppIntroSlider;

Whereever you were importing AppIntroSlider:

import CustomAppIntroSlider from '**path to the extended class file above**/customReactNativeAppIntroSlider';
const AppIntroSlider = CustomAppIntroSlider;

Thanks, Parmy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant