title: How to change the whole background in react native?
body: <p>I have the following code:</p>
  
  <pre><code>  return (
      &lt;KeyboardAvoidingView
        keyboardVerticalOffset={100}
        style={{ backgroundColor: '#000' }}
      &gt;
        &lt;ScrollView
          style={{ backgroundColor: '#000' }}
        &gt;
          &lt;View&gt;{renderedPreviousMessage}&lt;/View&gt;
          &lt;View style={{ paddingBottom: 50 }}&gt;
            &lt;Input /&gt;
        &lt;/ScrollView&gt;
      &lt;/KeyboardAvoidingView&gt;
    )
  </code></pre>
  
  <p>But this renders black parts with white background:</p>
  
  <p><a href="https://i.stack.imgur.com/bjTAU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bjTAU.jpg" alt="img"></a></p>
  
  <p>How can I get the whole background to be black?</p>
  
  <hr>
  
  <p>Edit</p>
  
  <p>Here is the whole component. When I added <code>flex: 1</code>, it just made the whole screen white and everything disappeared.</p>
  
  <pre><code>return !message || !renderedPreviousMessage ? null : (
      &lt;KeyboardAvoidingView
        // style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}
        behavior="padding"
        enabled
        keyboardVerticalOffset={100}
        style={[
          cosmetic.darkModeEnabled &amp;&amp; { backgroundColor: DARK_COLOR }
          // { flex: 1 }
        ]}
      &gt;
        &lt;ScrollView
          // style={cosmetic.darkModeEnabled &amp;&amp; { backgroundColor: DARK_COLOR }}
          keyboardShouldPersistTaps="handled"
        &gt;
          &lt;View
            style={cosmetic.darkModeEnabled &amp;&amp; { backgroundColor: DARK_COLOR }}
          &gt;
            {renderedPreviousMessage}
          &lt;/View&gt;
          &lt;View
            style={[
              { paddingBottom: 50 },
              cosmetic.darkModeEnabled &amp;&amp; { backgroundColor: DARK_COLOR }
            ]}
          &gt;
            &lt;Input
              inputStyle={cosmetic.darkModeEnabled &amp;&amp; styles.dark_mode_text}
              labelStyle={cosmetic.darkModeEnabled &amp;&amp; styles.dark_mode_text}
              multiline
              label="reply"
              value={replyText}
              rightIcon={
                &lt;View style={{ flexDirection: "row" }}&gt;
                  &lt;View style={{ flexDirection: "column" }}&gt;
                    {showEmojis &amp;&amp; (
                      &lt;Icon
                        name="md-close"
                        type="ionicon"
                        color={cosmetic.darkModeEnabled ? WHITE : BLUE_HUE}
                        iconStyle={{
                          // paddingLeft: 20,
                          paddingRight: 20
                          // paddingTop: 10
                        }}
                        onPress={() =&gt; {
                          setShowEmojis(false);
                        }}
                      /&gt;
                    )}
                  &lt;/View&gt;
                  &lt;View style={{ flexDirection: "column" }}&gt;
                    &lt;Icon
                      name="md-send"
                      type="ionicon"
                      color={cosmetic.darkModeEnabled ? WHITE : BLUE_HUE}
                      iconStyle={
                        {
                          // paddingLeft: 20,
                          // paddingRight: 20,
                          // paddingTop: 10
                        }
                      }
                      onPress={() =&gt; {
                        if (validateLength(replyText) === 0) {
                          setReplyTooShort(true);
  
                          return;
                        }
                        handleSendReply(replyText);
                        setReplyText("");
                      }}
                    /&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              }
              autoCorrect={true}
              errorMessage={replyTooShort ? "reply too short" : ""}
              onChangeText={e =&gt; {
                if (replyTooShort) {
                  setReplyTooShort(false);
                }
  
                setReplyText(e);
              }}
            /&gt;
          &lt;/View&gt;
        &lt;/ScrollView&gt;
      &lt;/KeyboardAvoidingView&gt;
    );
  };
  </code></pre>