How to align View at the bottom of the page without making it dependent on other Views

Question

I wish to align view toolbar to the bottom of the page without using 'space- around' of justifyContent attribute.

Below is the code how I am making this toolbar:

    <View style={{ height: '100%', justifyContent: 'space-between', }}>

    <View style={{ flexDirection: 'row', height: 44,
     alignItems: 'center', justifyContent: 'space-around', 
     backgroundColor: 'yellow'}}>

       <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>

    </View>
    </View>

score 0 · Answer 1 · answered Dec 10 '18 at 07:27

I looked at bottom and position attributes. When I add bottom: 0, position: 'absolute' to the inner view style, then we also need to specify the width. ( Don't know why relative allow to auto take full width). But if we add { bottom: 0, position: 'absolute', width: '100%') then inner view will be aligned at bottom always. Like below

<View style={{ flexDirection: 'row', height: 44,
 alignItems: 'center', justifyContent: 'space-around', 
 backgroundColor: 'yellow', bottom: 0, position: 'absolute', width: '100%'}}>

   <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>

</View>
</View>

How to align View at the bottom of the page without making it dependent on other Views

1 Answers1