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;
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:
Adding height for each page wrapper.
In case it helps anyone, I override the _renderItem function with the following custom class:
Whereever you were importing AppIntroSlider:
Thanks, Parmy