RN: Center spinner using flexbox?

Question

I am trying to get as spinner centered vertically and horizontally (iOS and Android - currently testing on iOS). Here is my JSX

            <View>
                <Spinner/>
            </View>

of course, Spinner is a custom component which is simply this that contains a ActivityIndicator

const Spinner = ({size}) => {
    return (
        <View style={styles.spinnerStyle}>
            <ActivityIndicator/>
        </View>

    );
};


const styles = {
    spinnerStyle: {
        flex: 1,
        justifyContent : 'center',
        alignItems: 'center'
    }
}
export {Spinner}

The spinner works but its always at the top of the screen, the spinner contains a VIEW and also the flex items that I think should work. But it doesn't

I also tried add some styles of the the first VIEW that holds the custom component ie..

            <View style={....}>
                <Spinner/>
            </View>

But no joy.

If you add a border on its parent, in which it is supposed to be centered, you'll quickly see if it as the expected height ... as it sounds it does not. Is height set in percent or ? — Asons, Apr 16 '17 at 19:21
flexDirection, hasn't been changed so default is column but also tried row — Martin, Apr 16 '17 at 19:27
Here is another post that relates to the thought I had when posted my first comment: http://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent — Asons, Apr 16 '17 at 19:29

score 3 · Accepted Answer · answered Apr 16 '17 at 22:43

I think you are almost there! The only thing that is missing is to set flex: 1 to the <View> around the <Spinner /> component.

I did create an example on Expo's Sketch. Feel free to have a look at it. Try removing the flex: 1 and add a background color to see how it behaves. Hope it helps!

import React, { Component } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';

const spinnerStyles = StyleSheet.create({
  spinnerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

class Spinner extends Component {
  render() {
    return (
      <View style={spinnerStyles.spinnerStyle}>
        <ActivityIndicator size="small" />
      </View>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Spinner />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: '#4286f4',
  },
});

RN: Center spinner using flexbox?

1 Answers1