Postition of the Dialog & using state or class variable

[shekharskamble]

Hi Jack,

Great library, I want to achieve something like this

How can I position the dialog to the bottom of the screen? Also tried to use state & class variable to display message but it doesn't work :(

My Code:

          <DialogComponent
              title="Edit"
              titleAlign="left"
              dialogStyle={{borderTopLeftRadius:20, borderTopRightRadius:20}}
              titleTextStyle={{fontSize:14, fontWeight:'bold', color:'#000'}}
              dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
              dialogButton= {<DialogButton text="Close" align='right'/>}
              height={300}
              ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}>
              <DialogContent>
                <View>
                  <Text>{this.message}</Text> // tried to use state & class variable but doesnt work
                </View>
              </DialogContent>
            </DialogComponent>

Please help.

[jacklam718]

@shekharskamble

1. set dialog as position: 'absolute' and bottom: 0 via dialogStyle prop
2. You might need to implement your own animation to fit your needs (I'm not so sure)
3. About using state or class variable. It's not related to this Library. it mostly about React. You could study React's documents.

const slideAnimation = new SlideAnimation({ slideFrom: 'bottom' }) 
<DialogComponent
  title="Edit"
  titleAlign="left"
  dialogStyle={{borderTopLeftRadius:20, borderTopRightRadius:20, position: 'absolute', bottom: 0}}
  titleTextStyle={{fontSize:14, fontWeight:'bold', color:'#000'}}
  dialogAnimation={slideAnimation}
  dialogButton= {<DialogButton text="Close" align='right'/>}
  height={300}
  ref={(dialogComponent) => { this.dialogComponent = dialogComponent; }}
>
  <DialogContent>
    <View>
      <Text>{this.message}</Text> // tried to user state & class variable but doesnt work
    </View>
  </DialogContent>
</DialogComponent>

[shekharskamble]

Thanks a lot for speedy reply, I tried to use state variable & class variable inside DialogContent but it doesn't work am I doing something wrong?

[jacklam718]

You should use component state

[shekharskamble]

Thank you for your reply & sorry to bother you so much, I did try {this.state.message} inside DialogContent but it doesn't work. By Component state you mean dialog components state?

[jacklam718]

Ok, what do you mean by doesn't work? nothing display?

[shekharskamble]

Yes it doesn't display the dialog but the overlay gets displayed....

[shekharskamble]

setState asynchronous issue.... resolved it by adding callback function

[jacklam718]

Nice!

[faizan992]

Hi @shekharskamble , i am also facing the same problem, did you find any solution ?

[shekharskamble]

@faizan992 when you setState message in that callback open the dialog