title: React Native Modal styling
body: <p>So, I have a modal in react native which takes my whole screen, I do not want this to happen, any ideea how to configure it?
  I have the following structure</p>
  
  <pre><code>&lt;Modal visible={props.display} animationType="slide" style={{
      width: '50%',
      height: '50%'}}&gt;
        &lt;Wrapper&gt;
            &lt;ShiftDeclinedWrapper&gt;
              &lt;CenterText padding="20px"&gt;{props.data}&lt;/CenterText&gt;
              &lt;Footer&gt;
                &lt;ButtonWrapper&gt;
                  &lt;Button
                    isDisabled={props.isLoading}
                    onPress={() =&gt; props.declineAccept()}
                    textColor="white"
                    color={theme.color.red}&gt;
                    Decline
                  &lt;/Button&gt;
                &lt;/ButtonWrapper&gt;
                &lt;ButtonWrapper&gt;
                  &lt;Button
                    isDisabled={props.isLoading}
                    onPress={props.declineBack}
                    textColor="white"
                    color={theme.color.green}&gt;
                    No, thanks
                  &lt;/Button&gt;
                &lt;/ButtonWrapper&gt;
              &lt;/Footer&gt;
            &lt;/ShiftDeclinedWrapper&gt;
        &lt;/Wrapper&gt;
      &lt;/Modal&gt;
  </code></pre>
  
  <p>The Wrapper component structure is</p>
  
  <pre><code>export const Wrapper = styled.View`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex: 1;
  `;
  </code></pre>
  
  <p>ShiftDeclineWrapper is just </p>
  
  <pre><code>export const ShiftDeclinedWrapper = styled.View`
    text-align: center;
  `;
  </code></pre>
  
  <p>I have tried putting 50% width/height just so i can make sure it works so i can style it how i want, I tried putting it on the modal, wrapper, also shiftdeclinewrapper too nothing worked</p>