Not able to center lottie animation and text in screen (react-native)

Question

How is it possible to center both a text and an animation from lottie? My loading animation is a bit cut of to the right side. I tried to following here but it didn't work https://github.com/airbnb/lottie-react-native/issues/143

My class looks like this:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';

import Loading from '../Components/Loading';

var styles = StyleSheet.create({
  viewAlignments: {
    width: 300,
    height: 300,
  },
  containterAlignments: {
    width: 300,
    height: 300,
  },
});

const LoadingWithMessage = props => {
  const { authSuccess } = props;

  const text = authSuccess ? 'Success!...'
    : 'Checking you against your information...';

  return (
    <Loading text={text} />
  );
};

LoadingWithMessage.propTypes = {
  authSuccess: PropTypes.bool.isRequired,
};

const LoadingMessageContainer = connect(state => ({
  authSuccess: state.authUi.authSuccess,
}))(LoadingWithMessage);

export default class AuthenticationLoading extends Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
        <View style={styles.viewAlignments}>
          <LoadingMessageContainer style={styles.containterAlignments} />
        </View>
      </View>
    );
  }
};

And the screen looks like this. So you can see that the animation is a bit cut of to the right. Also without the height and width = 300 it is very to the right shifted.

Answer 1

I have managed placement using the flexbox way with empty views as reference + optional out commented parts where playing with size if the animation has not a proper size:

<View style={{ flex: 1 }>
      <View style={{ flex: 2 }}>
        <LottieView
          style={{ flex: 1 }}
          // resizeMode="cover"
          // height={400}
          // width={600}
        />
      </View>
      <View style={{ flex: 2 }}>
    </View>