0

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!

4
  • This can help stackoverflow.com/questions/38942869/…
    – CR7
    Apr 12, 2020 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. :( Apr 12, 2020 at 18:40
  • Try to add a new <View> with flex 1 on top of your scrollview, inside the Feed component
    – CR7
    Apr 12, 2020 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 Apr 12, 2020 at 18:57

3 Answers 3

2
+100

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.

1
  • Very thorough explanation. Thanks! Apr 18, 2020 at 14:05
0

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: {

  },
});
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.