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

Question

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

Answer 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.

Answer 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.

Answer 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 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>
If what you expect is different layout than in either of the screenshots, please share a simple sketch of the layout.