Center Activity Indicator with absolute position in React Native - css

Question

i am using View overlay and ActivityIndicator to hide loading map in the background. The solution i am using is View with absolute position to make it on top of everything and putting activityindicator on top, so there is something happening.
The issue is, that because the ActivityIndiator size cant be set to specific pixels on iOS, i dont know what is its size and thus i cant center it properly. Or i didnt figure out way to do it.
Here is some code:
<View style={styles.whiteOverlay}>
<ActivityIndicator style={styles.indicator} size="large" color={colors.color4} />
</View>
whiteOverlay: {
width: screen.height,
height: screen.height,
backgroundColor: 'white',
position: 'absolute',
zIndex: 20
},
indicator: {
zIndex: 21,
position: 'absolute',
left: screen.width/2,
top: screen.height/2
}
This positions the indicator offseted from center. I can put there some magic numbers to make it work for a specific device, guessing the size of the indicator, but it then doesnt work on other devices. Thanks for any help.

Answer 1

If you want to center the ActivityIndicator on the screen, you can set the style like this.
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", zIndex: 20 }}>
<ActivityIndicator
size="large" color={colors.color4}
/>
</View>
orYou can use style'sposition
<View style={styles.whiteOverlay} >
<ActivityIndicator
size="large" color={colors.color4}
/>
</View >
...
whiteOverlay: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}

Answer 2

Couple options;
NON-Flex
whiteOverlay: {
width: screen.height,
height: screen.height,
backgroundColor: 'white',
position: 'absolute',
zIndex: 20
},
indicator: {
zIndex: 21,
position: 'absolute',
left: 50%,
top: 50%,
transform: translate(-50%, -50%)
}
WITH-Flex (assumes indicator renders as child of overlay);
whiteOverlay: {
width: screen.height,
height: screen.height,
backgroundColor: 'white',
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 20
}