Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.66k stars 330 forks source link

Suggested fix for height for web app #270

Open parmy opened 1 month ago

parmy commented 1 month ago

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