ScrollView children height relative to container

Question

I'm looking to create a react-native scrollable feed of views whose heights are 80% of the container. My code currently looks like

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>Hello</Text>
  </View>
);

const Feed = () => (
  <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer}>
    <FeedItem />
    <FeedItem />
    <FeedItem />
  </ScrollView>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    height: '80%',
  },
  feedItem: {
    height: '100%',
  },
});

However, this causes the scroll view to no longer scroll. According to what I've read this has something to do with flex and I've tried so many approaches to this for 2 days straight to no avail. Does anyone know the proper approach to setting heights without messing up the scrolling in the view?

I'm also experiencing the same problem in FlatList so hopefully the answer for ScrollView also applies to FlatList. Thanks!

This can help https://stackoverflow.com/questions/38942869/react-native-scrollview-is-not-scrolling-to-the-bottom-sometimes — CR7, Apr 12 '20 at 18:29
Thanks @CR7, I had seen that post and even adding height: 100 or height: '100%' or flex: 1 to styles.feed didn't do the trick. :( — Cody Johnson, Apr 12 '20 at 18:40
Try to add a new with flex 1 on top of your scrollview, inside the Feed component — CR7, Apr 12 '20 at 18:42
Still no luck. :( Even when the ScrollView is inside a flex: 1 View containing it, setting the height in styles.feed doesn't do anything — Cody Johnson, Apr 12 '20 at 18:57

score 2 · Accepted Answer · answered Apr 15 '20 at 06:39

As the ScrollView does not have its own height and it depends upon its children for the Height. It's better to set the height for a child node.

For example if you're setting a height of 80% for a child item out of full device height.

We could do this like

import { useSafeArea } from 'react-native-safe-area-context';
import { Dimensions } from "react-native";
const insets = useSafeArea();
const { height } = Dimensions.get("window");

And in your JS

height: ((height - insets.top - insets.bottom) * 80(your percentage))/ 100

You set this height to the children elements.

Note: I'm using this external library for insets.

Very thorough explanation. Thanks! – Cody Johnson Apr 18 '20 at 14:05 — Cody Johnson, Apr 18 '20 at 14:05

score 0 · Answer 2 · answered Apr 15 '20 at 03:26

Having height in % with ScrollView seems to be broken on Android. Can you remove all you height and add a View component on top of your ScollView with a flex of 0.8

Also if the text of the FeedItem don't fill all the height of the ScrollView, it will not scroll, so you can add more text on FeedItem.

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          </Text>
  </View>
);

const Feed = () => (
  <View style={{ flex: 0.8}}>
    <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer} scrollEnabled>
      <FeedItem />
      <FeedItem />
      <FeedItem />
      <FeedItem />
    </ScrollView>
  </View>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {

  },
  feedContentContainer: {

  },
  feedItem: {

  },
});

score 0 · Answer 3 · answered Apr 17 '20 at 12:05

just make these changes

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    //height: '80%',
  },
  feedItem: {
    //height: '100%',
    flexGrow: 1
  },
});

never put any height to scroll view content container. and each child element shouldn't have a height of 100% because it take the full of container and don't let other childs

ScrollView children height relative to container

3 Answers3