title: Invariant Violation: ScrollView child layout (["justifyContent"]) must be applied through the contentContainerStyle prop
body: <p>[The Error image <a href="https://i.stack.imgur.com/sPmzv.png" rel="noreferrer">1</a>]</p>
  
  <p><strong>Current Behaviour</strong>
  I receive this image if I am trying to nest a ScrollView within the View. </p>
  
  <p><strong>Expected Behaviour</strong>
  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. </p>
  
  <pre><code>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(
  
            &lt;KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}&gt;
               &lt;StatusBar backgroundColor = "#FFFFFF" barStyle = "dark-content" hidden = {true}/&gt;
  
                  &lt;View style={styles.boxContainer}&gt;
                      &lt;View style = {[styles.boxContainer, styles.boxOne]}&gt;
                        &lt;ScrollView style = {[styles.boxContainer, styles.boxOne]} &gt;
                              &lt;TextInput 
                                  style={styles.inputBox} 
                                  placeholder="full name"
                                  placeholderTextColor="#00000030"
                                  underlineColorAndroid="transparent"&gt;
                              &lt;/TextInput&gt;
  
                              &lt;TextInput 
                                  style={styles.inputBox}
                                  placeholder="email or phone"
                                  placeholderTextColor="#00000030"
                                  underlineColorAndroid="transparent"
                                  autoCapitalize="none"&gt;
                              &lt;/TextInput&gt;
  
                              &lt;TextInput 
                                  style={styles.inputBox} 
                                  placeholder="date of birth"
                                  placeholderTextColor="#00000030"
                                  underlineColorAndroid="transparent"
                                  autoCapitalize="none"&gt;
                              &lt;/TextInput&gt;       
  
                              &lt;TextInput 
                                  style={styles.inputBox} 
                                  placeholder="username"
                                  placeholderTextColor="#00000030"
                                  underlineColorAndroid="transparent"
                                  autoCapitalize="none"&gt;
                              &lt;/TextInput&gt;
  
                              &lt;TextInput 
                                  style={styles.inputBox}                             
                                  secureTextEntry={true}
                                  placeholder="password"
                                  placeholderTextColor="#00000030"
                                  underlineColorAndroid="transparent"
                                  autoCapitalize="none"&gt;
                              &lt;/TextInput&gt;
                          &lt;/ScrollView&gt;
                      &lt;/View&gt;
  
                       &lt;View style={styles.boxContainerToggle}&gt;
                           &lt;TouchableOpacity 
                              style={[styles.boxContainer, styles.boxTwo]}&gt;
                                &lt;Text style={styles.paragraph}&gt;Login&lt;/Text&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;          
                  &lt;/View&gt;   
  
              &lt;/KeyboardAvoidingView&gt;
  
          );
      }
  }
  
  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',
  
        },
  });
  </code></pre>