Using react-native-dialog, how to change dialog's height and width

Question

I am working on React Native application. I am using "react-native-dialog". I want to change the height and width of the dialog. I am unable to do it. My code is:

import Dialog from "react-native-dialog";

<Dialog.Container style={{height: "50%", width: "50%"}} visible={this.state.dialogVisible}>

    <Dialog.Title>Edit Your Note</Dialog.Title>

    <Dialog.Input multiline={true} onChangeText={(nm)=> this.setState({newNote: nm})}
    value={this.state.newNote}></Dialog.Input>

    <Dialog.Button label="Cancel" onPress={() => this.handleCancel(e.ans)} />
    <Dialog.Button label="Save" onPress={() => this.handleSave(e.idx, e.ans)} />
  </Dialog.Container>

I want to increase the height and width of the dialog so that i can increase the height and width of the "Dialog.Input". Currently my dialog looks like this:

I dont see a style prop for this component. You should play with contentStyle, headerStyle and wrapperStyle. Refer to the docs — Saif Kamaal
– Saif Kamaal, Commented Aug 27, 2019 at 10:08

Pushprajsinh Chudasama · Accepted Answer · 2019-08-27 11:13:49Z

1

You need to add View in Container . I hope it will helps you.

     <Dialog.Container visible={this.state.dialogVisible} style={{ 
       justifyContent:'center', alignItems: 'center', backgroundColor: 'pink' }}>
         <View style={{ height: '70%', width: '70%' }}>
           <Dialog.Title>Edit Your Note</Dialog.Title>

           <Dialog.Input multiline={true} onChangeText={(nm) => 
          this.setState({ newNote: nm })}
             value={this.state.newNote}></Dialog.Input>
         </View>
         <Dialog.Button label="Cancel" onPress={() => this.handleCancel(e.ans)} />
         <Dialog.Button label="Save" onPress={() => this.handleSave(e.idx, e.ans)} />

       </Dialog.Container>

answered Aug 27, 2019 at 11:13

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Waleed Naveed Over a year ago

there is some empty space between the "Dialog.Input" and buttons, how can i remove that ? @Komal

Waleed Naveed Over a year ago

your answer was very helpful and was almost right but i have managed to do it with "contentStyle" prop. I am posting my solution too

Waleed Naveed · Accepted Answer · 2019-08-27 12:47:57Z

1

"contentStyle" helped me in resolving the issue. My code is:

<Dialog.Container visible={this.state.dialogVisible} contentStyle={{height: 300, width: 300, paddingBottom: 105}}>

    <Dialog.Title>Edit Your Note</Dialog.Title>

    <Dialog.Input paddingHorizontal = "0%" height = "100%" width="100%" multiline={true} onChangeText={(nm) => 
         this.setState({ newNote: nm })}
            value={this.state.newNote}></Dialog.Input>

    <Dialog.Button label="Cancel" onPress={() => this.handleCancel(e.ans)} />
    <Dialog.Button label="Save" onPress={() => this.handleSave(e.idx, e.ans)} />

</Dialog.Container>

Now, view is:

answered Aug 27, 2019 at 12:47

Waleed Naveed

2,4032 gold badges38 silver badges67 bronze badges

Collectives™ on Stack Overflow

Using react-native-dialog, how to change dialog's height and width

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related