CODEWITHSUNDEEP
react-nativescrollview
ericm21
ericm21

Reputation: 75

ScrollView and justifyContent issue in React Native

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ScrollView } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.top} />

          <View style={styles.contentContainer}>
            <View style={styles.content}>
              <Text>Item1</Text>
            </View>

            <View style={styles.content}>
              <Text>Item2</Text>
            </View>

            <View style={styles.content}>
              <Text>Item3</Text>
            </View>
          </View>
        </ScrollView>

        <View style={[styles.tabbar]} />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  top: {
    height: 346,
    backgroundColor: '#0066cc',
  },

  contentContainer: {
    flex: 1,
    justifyContent: 'space-around',
  },

  content: {
    padding: 20,
    borderWidth: 1,
    borderColor: 'red',
  },

  tabbar: {
    height: 50,
    backgroundColor: '#eee',
  },
});

Please see attached screenshot for my issue. I'm providing a Snack link with all the code.

Note that when I remove ScrollView the items align as I need them to be but removing ScrollView is not an option.

enter image description here

https://snack.expo.io/SJQnkXGS7

Upvotes: 1

Views: 3230

Answers (1)

howtopythonpls
howtopythonpls

Reputation: 790

Either give the ScrollView or the contentContainer a predefined height:

<ScrollView contentContainerStyle={styles.container}>

or

<View style={[styles.contentContainer, {height: Dimensions.get('window').height - 396}]}>

Upvotes: 4

Related Questions