Not able to center lottie animation in screen

[maakle]

I already asked this question on Stackoverflow but seems like nobody was able to help me there. (https://stackoverflow.com/questions/48070527/not-able-to-center-lottie-animation-and-text-in-screen-react-native)

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.

[CubeSugar]

try as below:

1. import StyleSheet
2. wrap LottieView into a containerView,
3. set LottieView style: style={[StyleSheet.absoluteFill, {someOtherStyles}]}

[maakle]

Okay I solved it. So what I had to do is go on step deeper where the animation is (not the class of the screen). I had to align the Lottie Loading animation (animationWrapper) to it's higher wrapper (imageWrapper). My Loading class with the animation looks something like this. The other class basically stayed the same. I hope this helps someone!

// all imports
import ..., { ... };

var styles = StyleSheet.create({
  imageWrapper: {
    width: 170,
    height: 170,
    opacity: 0.85,
  },
  loadingText: {
    width: '100%',
    textAlign: 'center',
  },
  logoImage: {
    width: '100%',
    alignItems: 'center',
  },
  animationWrapper: {
    width: '100%',
    height: '100%',
  },
});

export default class Loading extends Component {
  static propTypes = {
    text: PropTypes.string,
  }

  componentDidMount() {
    this.animation.play();
  }

  render() {
    const loader = EXPLICIT_DATA_COLLECTION ? MyLoadingAnimation : LoadingAnimation;

    return (
      <ScreenWrapper style={{ alignItems: 'center' }}>
        <StandardWrapper style={styles.imageWrapper}>
          <Animation
            ref={animation => { this.animation = animation; }}
            style={styles.animationWrapper}
            source={loader}
            loop
          />
        </StandardWrapper>
        <PrimaryText style={styles.loadingText}>
          {this.props.text}
        </PrimaryText>
      </ScreenWrapper>
    );
  }
};

[carlosen14]

what are StandardWrapper and ScreenWrapper? simple View's ?