CODEWITHSUNDEEP
javascriptreactjsreact-native
J.Doo
J.Doo

Reputation: 57

React Native Modal styling

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

<Modal visible={props.display} animationType="slide" style={{
    width: '50%',
    height: '50%'}}>
      <Wrapper>
          <ShiftDeclinedWrapper>
            <CenterText padding="20px">{props.data}</CenterText>
            <Footer>
              <ButtonWrapper>
                <Button
                  isDisabled={props.isLoading}
                  onPress={() => props.declineAccept()}
                  textColor="white"
                  color={theme.color.red}>
                  Decline
                </Button>
              </ButtonWrapper>
              <ButtonWrapper>
                <Button
                  isDisabled={props.isLoading}
                  onPress={props.declineBack}
                  textColor="white"
                  color={theme.color.green}>
                  No, thanks
                </Button>
              </ButtonWrapper>
            </Footer>
          </ShiftDeclinedWrapper>
      </Wrapper>
    </Modal>

The Wrapper component structure is

export const Wrapper = styled.View`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex: 1;
`;

ShiftDeclineWrapper is just 

export const ShiftDeclinedWrapper = styled.View`
  text-align: center;
`;

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

Upvotes: 1

Views: 13395

Answers (2)

Piyush
Piyush

Reputation: 3265

This worked for me!

<Modal
        presentationStyle="overFullScreen"
        transparent
        visible={true}
    >

        <View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <View style={{
                backgroundColor: "#fff",
                width: 300,
                height: 300,
           }}>
                <Text>MY TEXT </Text>
            </View>
        </View>
    </Modal>

Upvotes: 0

moritzwick
moritzwick

Reputation: 621

From the Modal documentation here, you can't use the style prop for this.

You can add the styles to your <Wrapper> element and add the prop transparent to your Modal to get a transparent background (instead of the default white).

<Modal visible={props.display} animationType="slide" transparent>
  <Wrapper style={{width: '50%', height: '50%'}}>

You also have to use the style props over on your <Wrapper> component.

Upvotes: 4

Related Questions