Scrollview still shows space at top and bottom

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 6.11.4 Yarn: Not Found npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed) react: ^16.0.0-beta.5 => 16.0.0-beta.5 react-native: ^0.49.5 => 0.49.5

target: Android and IOS.

Steps to Reproduce

It might be hard to reproduce with the code I am using, as I use a lot of plugins. Let me post the code here so you know what I have:

import React, { Component } from 'react';
import { TextInput,StyleSheet,Text,View,Button,TouchableOpacity,Picker,ScrollView } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Actions } from 'react-native-router-flux';

import NavigationBar from 'react-native-navbar';
import Communications from 'react-native-communications';
import { Spinner } from './common';

import I18n, { getLanguages } from 'react-native-i18n';

I18n.fallbacks = true;

I18n.translations = {
  en: require('../i18n/translations/en'),
  nl: require('../i18n/translations/nl')
};

const titleConfig = {
    title: 'Contact',
    tintColor: 'white',
};

class ContactScreen extends Component {
    constructor(props){
        super(props);
        this.state = {
            subject: '',
            bodyText: ''
        }
    }

    render() {
        return (
            <ScrollView contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps={false}>
                <LinearGradient colors={['#67B26F', '#4ca2cd']} style={styles.container}>
                    <NavigationBar style={styles.navbar}
                        title={titleConfig}
                        leftButton={{ title: I18n.t('home'), handler: Actions.pop.bind(this), tintColor: 'white', }}
                        tintColor="transparent"
                        leftIcon="user"
                    />
                    <View style={styles.headerWrapper}>
                        <Text style={styles.headertext}>{I18n.t('contact view')}</Text>
                    </View>
                    <View style={styles.contentContainer}>
                        <View style={[styles.contactContent,styles.topBottomBorder]}>
                            <Picker
                                selectedValue={this.state.subject}
                                onValueChange={(itemValue, itemIndex) => this.setState({subject: itemValue})}
                                style={styles.picker}>
                                <Picker.Item label={I18n.t('contactSubject')} />
                                <Picker.Item label="Java" value="java" />
                                <Picker.Item label="JavaScript" value="js" />
                            </Picker>                      
                        </View>
                        <View style={[styles.contactContent,styles.bottomBorder]}>
                            <TextInput
                                underlineColorAndroid='transparent'
                                style={styles.textArea}
                                onChangeText={(bodyText) => this.setState({bodyText})}
                                value={this.state.bodyText}
                                multiline = {true}
                                numberOfLines = {10}
                            />
                        </View>
                        <View style={[styles.contactContent,styles.marginT25,styles.buttonwrapper]}>
                            <TouchableOpacity>
                                <Text style={styles.buttontext}>{I18n.t('send contact')}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </LinearGradient>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    contentContainer: {
        flex: 1,
    },
    container: {
        flex: 1,
        flexGrow: 1,
        backgroundColor: 'transparent',
    },
    navbar: {
        borderColor: '#eee',
        borderStyle: 'solid',
        borderBottomWidth: 0.2,
    },
    contentContainer: {
        flex: 1,
        marginTop: 20,
        paddingTop: 10,
        paddingBottom: 10,
    },
    contactContent: {
        paddingLeft: 10,
        paddingRight: 10,
    },
    headerWrapper: {
        padding: 10,
    },
    headertext: {
        fontSize: 18,
        color: 'white',
        // alignSelf: 'center',
    },
    topBottomBorder: {
        borderColor: '#eee',
        borderStyle: 'solid',
        borderBottomWidth: 0.2,
        borderTopWidth: 0.2,
    },
    bottomBorder: {
        borderColor: '#eee',
        borderStyle: 'solid',
        borderBottomWidth: 0.2,
    },
    picker: {
        color: 'white',
    },
    textArea: {
        textAlignVertical: 'top',
        color: 'white',
    },
    buttonwrapper: {
        
    },
    buttontext: {
        color: 'white',
        fontSize: 20,
        alignSelf: 'center',
        padding: 10,
    },
    marginT25: {
        marginTop: 25,
    },
});

export default ContactScreen;

This is how the issue looks like.

I have tried basically everything I could find, set the container style to flex: 1, which normally would work.

Expected Behavior

I would expect to have a full screen scrollview, which it doesn’t at the moment, so the grey top and bottom should be gone and the gradient so be shown fullscreen.

My guess is this is a bug. But you guys might know it better.

[deadcoder0904]

@udarts @WhoJave I encountered this issue again & I think I have found a solution which works for both scenarios.

Scenario 1 -

If u have scrollable content.

Scenario 2 -

If u don’t have scrollable content.

The solution is as follows -

Keep View as the root component & then put ScrollView as its first children like this -

<View style={{ flex: 1, backgroundColor: 'white' }}>
     <ScrollView>
          {/*Now do whatever u want to do man*/}
    </ScrollView>
</View>

[deadcoder0904]

Put View inside ScrollView & give style to View instead of using contentContainerStyle in ScrollView.

That’s how I am used to solving this ScrollView problem these days 😝

I have stopped using contentContainerStyle with ScrollView as it results in a problem sometimes