Invariant Violation: ScrollView child layout (["justifyContent"]) must be applied through the contentContainerStyle prop

Question

[The Error image 1]

Current Behaviour I receive this image if I am trying to nest a ScrollView within the View.

Expected Behaviour Since the KeyBoardAvoidingView pushes the input boxes to the top and hides some of them I want a ScrollView to be able to scroll through the input boxes so hiding content can be seen but when I try to do it with my code I get the error in the above image.

import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, StatusBar, ScrollView} from 'react-native';


export default class SignUp extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(

          <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
             <StatusBar backgroundColor = "#FFFFFF" barStyle = "dark-content" hidden = {true}/>

                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                      <ScrollView style = {[styles.boxContainer, styles.boxOne]} >
                            <TextInput 
                                style={styles.inputBox} 
                                placeholder="full name"
                                placeholderTextColor="#00000030"
                                underlineColorAndroid="transparent">
                            </TextInput>

                            <TextInput 
                                style={styles.inputBox}
                                placeholder="email or phone"
                                placeholderTextColor="#00000030"
                                underlineColorAndroid="transparent"
                                autoCapitalize="none">
                            </TextInput>

                            <TextInput 
                                style={styles.inputBox} 
                                placeholder="date of birth"
                                placeholderTextColor="#00000030"
                                underlineColorAndroid="transparent"
                                autoCapitalize="none">
                            </TextInput>       

                            <TextInput 
                                style={styles.inputBox} 
                                placeholder="username"
                                placeholderTextColor="#00000030"
                                underlineColorAndroid="transparent"
                                autoCapitalize="none">
                            </TextInput>

                            <TextInput 
                                style={styles.inputBox}                             
                                secureTextEntry={true}
                                placeholder="password"
                                placeholderTextColor="#00000030"
                                underlineColorAndroid="transparent"
                                autoCapitalize="none">
                            </TextInput>
                        </ScrollView>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                              <Text style={styles.paragraph}>Login</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   

            </KeyboardAvoidingView>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',
        padding: 20,
        backgroundColor: 'white',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#FFFFFF',

      },
});

Answer 1

So looks like the problem lies with the style for boxContainer. ScrollView does not support justifyContent unless you either pass it as a part of the contentContainerStyle prop or you wrap all your content inside the ScrollView and give justify content to that view. Personal experience says wrap your content inside the scrollview in its own view tag.

<ScrollView style={ styles.boxOne }
 <View style={ style.boxContainer }>
   {content goes here}
 </View>
</ScrollView>