[1.5.7] Swiper view "disappeared" since upgrade

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?

[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.