0

I was trying to customize jitsi-meet. Here toolbar contains video mute, audio mute, and other buttons. How to place the container with blue background in the bottom of the screen? If I remove height property then this whole thing is placed in the bottom of the screen but in this case I don't get spacing around items in toolbar.

toolbar: {
        alignItems: 'flex-start',
        flexDirection: 'column',
        justifyContent: 'space-around',
        marginBottom: 10,
        paddingHorizontal: 5,
        backgroundColor: 'dodgerblue',
        height: '70%',
    },

If I put height:'100%' it takes whole screen. Other elements are commented here. This screen in stacked top of a camera screen.

enter image description here enter image description here

Shahrear Bin Amin
  • 1,075
  • 13
  • 31
  • Can you post your full code of what you're rendering? Or is 'toolbar' the only object on the page? – RossHochwert Jul 21 '20 at 21:21
  • @RossHochwert can you please edited post. – Shahrear Bin Amin Jul 21 '20 at 22:11
  • You did not add the full code of what you're rendering, so it's hard for me to understand. My recommendation is to put a `View` around your toolbar, and set the `justifyContent` to `flex-end` to start at the bottom of the screen. – RossHochwert Jul 22 '20 at 01:13

2 Answers2

0
toolbar: {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        marginBottom: 10,
        paddingVertical: 5,
        width:'100%',
        backgroundColor: 'dodgerblue',
    }

if you want to align the content in a horizontal row then you should give the flexDirection='row'. In react native default flexDirection is column so there is no need to mention it explicitly.

rashi jain
  • 474
  • 3
  • 9
0

It's hard to understand without posting what you're fully rendering, but it seems like you need to wrap the toolbar view in a parent view, and fix the parent view to start at the bottom of the page through justifyContent: 'flex-end'

<View style={{justifyContent:'flex-end', flex:1}}>
  <View style={{styles.toolbar}}>
  </View>
</View>

Alternatively, you could set the parent view to flexDirection: 'column-reverse'.

RossHochwert
  • 160
  • 10