How to make loader center on the View

On one View displaying the page in that page I need to display the loader but the loader need to display it on center.

var LoaderPositionCenter = React.createClass({
    render:function(){
       return(<View  style=   {{backgroundColor:'blue',flex:1,justifyContent:'center',alignItems:'center'}>
                <View>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
                   <Text>one</Text>
              </View>
    <View style={{flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row'}}>
        <Text style={{textAlign:'center',color:'yellow'}}>
           textsds dsdsdsd
        </Text>
    </View>       
   </View>)
    }
})

On First View content i need to show the loader as center how can make it using flexbox

//New one

var Example = React.createClass({
        getInitialState:function(){
            return {status:"button"}
        },
      click:function(){
          this.setState({status:"buttonText"});
      },
      render() {
        return (
          <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            position:'relative',
          }}>
              <View style={{//content view
                 position:'absolute',
                 top:0,
                 left:0,
                 right:0,
                 bottom:0,
              }}>
                  <ScrollView>
                     {
                     <TouchableHighlight 
                         underlayColor="#ffa456" 
                         onPress={this.click}
                      >
                        <Text>{this.state.status}</Text>
                      </TouchableHighlight>
                      }
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                       <Text>one</Text>
                       <Text>one</Text>
                       <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                      <Text>one</Text>
                  </ScrollView>
              </View>
              <View style={{
                    flex:1,
                    alignItems:'center',
                    justifyContent:'center'
              }}>
                 <Image source={{uri:icons.loader}}
                    style=  {styles.loader}/>
               </View>
          </View>
        );
      }
    });

How to disable the content view that means position:'absolute' view using flexbox or other

You can set the outer container to have a style property of:

flex: 1,
alignItems: 'center', 
justifyContent: 'center'

I've set up a full project here, and pasted the entire code below:

https://rnplay.org/apps/Lq4G9w

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActivityIndicatorIOS
} = React;

var SampleApp = React.createClass({

  getInitialState: function(){
    return {
        animating: true
    }
  },

  render: function() {
    return (
      <View style={styles.container}>
       <ActivityIndicatorIOS animating={this.state.animating} style={[{height: 80}]} size="large" />
      </View>
    );
  }

});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center', 
    justifyContent: 'center',
    backgroundColor: '#ddd'
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);