Jacse / react-native-app-intro-slider

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

delays in rendering a page for appintroslider when app is first opened in version 4.0.4 #237

Open nketia opened 3 years ago

nketia commented 3 years ago

I upgraded the package to the current version 4.0.4 from 2.0.1 and this seems to be causing delays when rendering for the first time. Navigating to the page for appintroslider drags for about 5 seconds before it opens. This used not to be the case and behaves normally when I downgrade to the 2.0.1

hkar19 commented 3 years ago

after delving into the source code, i saw

// index.js
this.state = {
      width: 0,
      height: 0,
      activeIndex: 0,
  };

i change this value width and height to

// Dimensions is from react-native
this.state = {
            width: Dimensions.get('screen').width,
            height: Dimensions.get('screen').height,
            activeIndex: 0,
        };

so the slider wont have width 0 at first (before, seemingly there is no slide at first)

is that what you mean with render time? this is what i meant

davidstott commented 3 years ago

I faced the same issue and patched by setting the width and height using Dimensions. Otherwise your slides can may "glitch" initially before the onLayout event is called on the FlatList.

Raymond-Cox commented 2 years ago

For those still encountering this issue, here's the patch solution:

react-native-app-intro-slider+4.0.4.patch

diff --git a/node_modules/react-native-app-intro-slider/dist/index.js b/node_modules/react-native-app-intro-slider/dist/index.js
index 0935c97..9ca160e 100644
--- a/node_modules/react-native-app-intro-slider/dist/index.js
+++ b/node_modules/react-native-app-intro-slider/dist/index.js
@@ -18,8 +18,8 @@ class AppIntroSlider extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            width: 0,
-            height: 0,
+            width: react_native_1.Dimensions.get('screen').width,
+            height: react_native_1.Dimensions.get('screen').height,
             activeIndex: 0,
         };
         this.goToSlide = (pageNum, triggerOnSlideChange) => {

For help using this patch or with the patch-package dependency, refer to this link https://github.com/Kureev/react-native-blur/issues/444#issuecomment-919359370