React-native-swiper: [1.5.7] Swiper view "disappeared" since upgrade

[fungilation]

This is the basic layout of my app, I've isolated below as a test case. Its Component's render() function:

render() {
  const whSmall = Dimensions.get('window').width < Dimensions.get('window').height ? Dimensions.get('window').width : Dimensions.get('window').height
  const whLarge = Dimensions.get('window').height > Dimensions.get('window').width ? Dimensions.get('window').height : Dimensions.get('window').width

  return (
    <View>
      <StatusBar
        barStyle='light-content'
        backgroundColor='#34314c'
        translucent={true}
      />
      <View style={{ flex: 1 }}>
        <Swiper
          ref={(c) => { AppSwiper = c }}
          style={{backgroundColor: '#999'}}
          width={whSmall}
          height={whLarge - 40}
          index={0}
          loadMinimal={ false }
          loadMinimalSize={ 2 }
          loop={true}
          bounces={true}
          horizontal={true}
          showsButtons={false}
          keyboardDismissMode='on-drag'
          directionalLockEnabled={true}
          dotStyle={{backgroundColor: 'rgba(0,0,0,.2)', width: 10, height: 10, borderRadius: 5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}}
          activeDotStyle={{backgroundColor: redHLrgba, width: 10, height: 10, borderRadius: 5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}}
          paginationStyle={{bottom: 11, backgroundColor: 'transparent'}}
        >
        {[...Array(11)].map((swiperView, v) =>
          <View key={'swiperView' + v} style={{flex: 1}}>
            <WebViewBridge
              ref={'SearchWebView' + v}
              style={{marginTop: 20}}
              automaticallyAdjustContentInsets={false}
              javaScriptEnabled={true}
              domStorageEnabled={true}
              decelerationRate='normal'
              startInLoadingState={true}
              scalesPageToFit={true}
              allowsInlineMediaPlayback={true}
              hideKeyboardAccessoryView = {true}
              keyboardDisplayRequiresUserAction = {false}
              source={{ uri: 'https://google.com' }}
            />
          </View>
        )}
        </Swiper>

        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{height: 40, width: whSmall, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000'}}>
            <Text style={{color: '#fff'}}>NavBar: Here Be Buttons</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

Preceding imports (somewhat verbatim from my app):

import React, {Component} from "react"
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  ImageBackground,
  TouchableHighlight,
  PixelRatio,
  Dimensions,
  StatusBar,
  InteractionManager,
  ActionSheetIOS,
  AppState,
  Clipboard,
  LayoutAnimation,
} from 'react-native'
// http://redux.js.org/docs/basics/ExampleTodoList.html
import { connect } from 'react-redux'
// https://realm.io/docs/react-native/latest/#models
// Auto-increment Sequence ex. https://github.com/realm/realm-js/issues/141#issuecomment-200544690
// import Realm from 'realm'
// var Realm = require('realm')
import _ from 'lodash'
import { store } from '../index.ios'

// Uninstalled https://github.com/jsdf/react-native-htmlview
// import HTMLView from 'react-native-htmlview'
// https://github.com/leecade/react-native-swiper
import Swiper from 'react-native-swiper'
// https://github.com/maxs15/react-native-modalbox
import ModalBox from 'react-native-modalbox'
// https://github.com/alinz/react-native-webview-bridge       https://github.com/lefnire/react-native-webview-bridge/commits/master
import WebViewBridge from 'react-native-webview-bridge'

// https://github.com/jaysoo/react-native-parallax-scroll-view
import ParallaxScrollView from 'react-native-parallax-scroll-view'
// https://github.com/react-native-fellowship/react-native-blur
import { BlurView } from 'react-native-blur'
// https://github.com/jgkim/react-native-status-bar-size
import StatusBarSizeIOS from 'react-native-status-bar-size'
// http://momentjs.com/docs/#/displaying/fromnow/
// http://momentjs.com/timezone/docs/#/using-timezones/parsing-in-zone/
import moment from 'moment-timezone'
// https://github.com/jbrooksuk/node-summary/
// Faster in Swift, integrated as RN native module?   https://github.com/hyharryhuang/SwiftSummary
import SummaryTool from 'node-summary'
// https://github.com/mathiasbynens/he      he, a HTML entity encoder/decoder
import he from 'he'
// https://github.com/clauderic/react-native-highlight-words
import Highlighter from 'react-native-highlight-words'
// https://github.com/chirag04/react-native-tooltip
import ToolTip from 'react-native-tooltip'
// https://github.com/huiseoul/react-native-fit-image
import FitImage from 'react-native-fit-image'
// https://github.com/react-native-community/react-native-linear-gradient
import LinearGradient from 'react-native-linear-gradient'
// https://github.com/cnjon/react-native-pdf-view     Build fails. On RN 0.41
// import PDFView from 'react-native-pdf-view'
// https://github.com/ak1394/react-native-tts
import Tts from 'react-native-tts'
// https://github.com/corbt/react-native-keep-awake
import KeepAwake from 'react-native-keep-awake'
// https://github.com/Caligatio/jsSHA
import jsSHA from "jssha"
// https://github.com/itinance/react-native-fs    // Needed for firebase.storage
// import RNFS from 'react-native-fs'
// http://invertase.io/react-native-firebase/#/usage
import RNFirebase from 'react-native-firebase'
const firebase = RNFirebase.initializeApp({ debug: false, persistence: true })   // debug: (__DEV__ ? true : false)
firebase.database().goOnline()   // takes 3s+ before it's online?  https://firebase.google.com/docs/reference/js/firebase.database.Database#goOffline
firebase.auth().signInAnonymously().catch((error) => {   // https://firebase.google.com/docs/auth/web/anonymous-auth#authenticate-with-firebase-anonymously
  if (__DEV__) console.log('firebase signInAnonymously failed. Error code, message:', error)
})

// https://github.com/oblador/react-native-vector-icons
import Icon from 'react-native-vector-icons/FontAwesome'
import Entypo from 'react-native-vector-icons/Entypo'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'

This creates a horizontal Swiper view (AppSwiper), with height={whLarge - 40}. Followed by a View (NavBar) that forms a black buttons bar at the bottom below the AppSwiper.

With upgrade to 1.5.7 (from 1.5.5), the entire height of the AppSwiper vanished. Same for "swiping" on the 10 children views within. The NavBar that was at the bottom is now at the top, with nothing following it.

Before: (1.5.5)

After: (1.5.8)

Anyone else seeing similar layout busted on 1.5.7, 1.5.8?

My full package.json for the above test case, you probably don't need all packages to reproduce:

{
  "name": "<app>",
  "version": "0.0.1",
  "private": true,
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "experimentalObjectRestSpread": true
      }
    },
    "env": {
      "browser": true,
      "node": true
    },
    "plugins": [
      "react",
      "react-native"
    ],
    "rules": {
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "semi": [
        2,
        "never"
      ],
      "react-native/no-unused-styles": 2,
      "react-native/split-platform-components": 2
    }
  },
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-plugin-idx": "^1.1.0",
    "he": "^1.1.0",
    "jssha": "^2.3.1",
    "lodash": "^4.17.2",
    "moment-timezone": "^0.5.10",
    "node-summary": "file:../node-summary/",
    "react": "16.0.0-alpha.12",
    "react-native": "0.47.1",
    "react-native-blur": "^3.1",
    "react-native-code-push": "^5.0.0-beta",
    "react-native-firebase": "^2.1.0",
    "react-native-fit-image": "^1.4.8",
    "react-native-highlight-words": "^1.0.0",
    "react-native-keep-awake": "^2.0.4",
    "react-native-linear-gradient": "^2.0.0",
    "react-native-modalbox": "^1.3.8",
    "react-native-notification": "^2.0.0",
    "react-native-orientation": "^3.0.0",
    "react-native-parallax-scroll-view": "file:../react-native-parallax-scroll-view/",
    "react-native-safari-view": "^2.0.0",
    "react-native-sentry": "^0.16.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "^1.5.8",
    "react-native-tooltip": "^5.0.0",
    "react-native-tts": "^1.3.0",
    "react-native-vector-icons": "^4.1.1",
    "react-native-webview-bridge": "file:../react-native-webview-bridge-RN0.40/",
    "react-redux": "^5.0.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "redux-logger": "^3.0.6"
  }
}

[esmatullaharifi]

I also have the same problem. Installed latest version react-native and react-native-swiper (1.5.7). Can anyone help?

[henkkasoft]

Same here. Updated react-native and react-native-swiper (1.5.7)

[arribbar]

Is it the same issue than #495 ?

[fungilation]

Looks like it.

[fungilation]

@arribbar updated to 1.5.8, no dice. Exact same issues and resulting screenshots as I wrote above.

@mrdezzods re-open please.

[mrdezzods]

Strange though. I tried all the examples and they worked fine. Maybe can you show your code?

[fungilation]

@mrdezzods I've updated my original post with a self containing test case, along with my app's package.json in case it's due to conflicts with other packages, though I think unlikely.

[nuocgansoi]

Same issue.
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
with: "react-native-swiper": "1.5.5", => work, but not have onIndexChange function.
with: "react-native-swiper": "1.5.8", => not render every thing.

[arribbar]

@nuocgansoi Can you try with RN Swiper 1.5.9 version ?

[arribbar]

@fungilation Thanks for your time

• Can you add in your example all the import and the style? Like this, I can try it on my own computer.
• Also, it seems you are not using the last version of RN Swiper, 1.5.9. Can you try with the last version ?

[fungilation]

@arribbar,

• I updated my first post with my app imports
• I tried 1.5.9. And every minor version > 1.5.5, all show the same symptom. 1.5.5 is the last known version that works without issue for my app.

Thanks for bug hunting with me.

[arribbar]

Ok @fungilation, your issue is not coming from RN Swiper but updates in style from RN.
You have to :

• add style={{ flex:1 }} to your first view
• remove in the first view of your nav bar, flex: 1

It works perfectly in my case.

[fungilation]

That does work. Thanks @arribbar!

Though I don't fully understand why. And Swiper 1.5.5 did work so what changed on Swiper's side that requires a change in container styling? Would be useful to document for others with similar issues since upgrading from 1.5.5

[arribbar]

I'm not sure.
In the changes between 1.5.5 and 1.5.6, there is a new prop containerStyle (https://github.com/leecade/react-native-swiper/blob/6fd0c3d314414f34acec9b9e83ef5198156705bf/src/index.js#L668) which can override container style (https://github.com/leecade/react-native-swiper/blob/6fd0c3d314414f34acec9b9e83ef5198156705bf/src/index.js#L26).

We also added flex: 1 to container style since 1.5.5.
You can try changing these values and check what is working best to you.