Как сделать фон серым, когда в React работает спиннер

Question

Как сделать серым фоновое приложение или экран во время работы спиннера в React. Все работает нормально, но экран не отображается серым цветом в коде

{
        loading ? <Spinner animation="border" variant="success"  />  : (<Modal></Modal>)
    }

my css part is

.spinner-border{
    width: 6rem !important;
    height: 6rem !important;
    left: 880px;
    position: absolute;
    top: 33%
}

Answer 1

Заключите все в представление и поместите backgroundColor в rgba, при необходимости поместите представление с zindex -1

<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', alignItems: "center", justifyContent: "center" }}>
  <Spinner animation="border" variant="success" />
</View>