React-native absolutely positioned elements in scrollview will not display

Question

I'm trying to create a series of "flashcards" in a ScrollView for a quiz app for my EMT class. A user should tap on a card, and have it flip over to reveal the answer. There are headings between sets of cards within the ScrollView.

The card animation is achieved via this container, which positions the card absolutely. I can not get the card to appear correctly - it either has no height and doesn't appear at all, appears squished, or, if I removed the absolute positioning by editing the FlipView code, the height is doubled to make room for the front and back.

Demo code, which can be pasted directly into index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import FlipView from 'react-native-flip-view';

const data = [
  { type: 'default', text: 'some text' },
  { type: 'header', text: 'header text'},
  { type: 'default', text: 'some more text'}
];

class TextLine extends Component {
  constructor(props) {
    super(props);
    this.state = { isFlipped: false };
  }

  _flip = () => {
    this.setState({isFlipped: !this.state.isFlipped});
  }

  _renderCard = (text) => {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', padding: 10}}>
        <TouchableOpacity onPress={this._flip} style={{backgroundColor: 'green', padding: 10}}>
          <Text style={{fontSize: 16, padding: 10}}>{text}</Text>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    if (this.props.type === 'header') {
      return <Text style={{fontSize: 20, padding: 20, backgroundColor: 'blue'}}>{this.props.text}</Text>;
    }
    return (
      <FlipView style={{flex: 1}}
            front={this._renderCard('Flip')}
            back={this._renderCard(this.props.text)}
            isFlipped={this.state.isFlipped}
            flipAxies="x"
            />
    );
  }
}

export default class FlipCardTest extends Component {
  render() {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ScrollView  contentInset={{top: 0, bottom: 100}}>
          {data.map((val, idx) => <TextLine key={idx} {...val} />)}
        </ScrollView>
      </View>
    );
  }
}

AppRegistry.registerComponent('FlipCardTest', () => FlipCardTest);

Any ideas on how to get the cards to appear correctly? Thanks for any help you can give.

score 8 · Accepted Answer · answered Mar 14 '17 at 07:48

Docs, here: https://facebook.github.io/react-native/docs/scrollview.html

It says "ScrollViews must have a bounded height in order to work". Try giving it a specific height, or maybe take the height of the window and pass it down.

You could add, contentContainerStyle={{flex:1}} to the ScrollView and that might solve your problem.

In either case, it would be better to not set the height of the ScrollView, but of a parent. So, I would suggest giving the parent View a height.

This thread might be of help: https://github.com/facebook/react-native/issues/3422

React-native absolutely positioned elements in scrollview will not display

1 Answers1