Monday, October 15, 2018

How to align a View to center without changing children's position?

By Hường Hana 5:00 AM , Leave a Comment 
<View style={{height: '100%', width: '100%'}}>    {OtherContent}    <ScrollView>       <View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>            {children}       </View>    <ScrollView>  </View>

I want the View inside ScrollView to be in center of the screen without changing it's children position

Children:

<View style={Styles.docsContainer}>             {arr.map((document, index) => {                 return (                     <TouchableOpacity key={index} style={[Style.docStyle} onPress={null}>                         <Icon name='file-text-o'/>                         <Text>{document.name}</Text>                     </TouchableOpacity>                 );             })} </View> const Styles: {     docsContainer: {        flexDirection: 'row',        flexWrap: 'wrap',        padding: 20,     },     docStyle: {       alignItems: 'center',        padding: 20,       margin: 5,       marginBottom: 10,       borderRadius: 8,       width: 170     }

}

3 Answers

Answers 1

Indeed, we don't need parent View, we just need scrollView as flewGrow 1 which makes scrollView have full height and width as per device.

My approach:

   <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>     <View style={{       alignItems: 'center',       justifyContent: 'center',       flex: 1,     }}>       <Text>mahesh nandam</Text>     </View>   </ScrollView>

Try this.

Answers 2

The Viewis your ScrollView's immediate children. So you can style ScrollView using contentContainerStyle and align it in center like this.

<View style={{height: '100%', width: '100%'}}>     <ScrollView          contentContainerStyle={{              flexGrow: 1,              justifyContent: 'center',              alignItems: 'center',          }}     >      <View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>          {children}      </View>     <ScrollView>  </View>

I guess it's what you're loooking for.

Answers 3

Center Horizontally

If you only want to center the View horizontally, you can set alignItems: 'center' to ScrollView's contentContainerStyle. 

<View style={{ height: '100%', width: '100%' }}>   <Text>Other content</Text>   <ScrollView contentContainerStyle={{ alignItems: 'center' }}>     <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 20, backgroundColor: 'red' }}>       <Text>children</Text>     </View>   </ScrollView>  </View>

The inner View is highlighted in red.

center horizontally

Center Horizontally and Vertically

In this case, you can set { flex: 1, justifyContent: 'center', alignItems: 'center' } for the same contentContainerStyle.

<View style={{ height: '100%', width: '100%' }}>   <Text>Other content</Text>   <ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>     <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 20, backgroundColor: 'red' }}>       <Text>children</Text>     </View>   </ScrollView>  </View>

center horizontally and vertically

If what you expect is different layout than in either of the screenshots, please share a simple sketch of the layout.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment