CODEWITHSUNDEEP
react-nativeflexbox
ThinkAndCode
ThinkAndCode

Reputation: 1657

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

<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
    }

}

Upvotes: 3

Views: 3873

Answers (3)

vahissan
vahissan

Reputation: 2332

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.

Upvotes: 1

Nandam Mahesh
Nandam Mahesh

Reputation: 1278

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.

Upvotes: 5

AKAP
AKAP

Reputation: 526

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.

Upvotes: 1

Related Questions