It can not be wrapped into a view

[cinder92]

I want to make an overlay with animation text, but when i set flex rules it just dissapear, any fix?

code

import React from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';
import RNMorphingText from 'react-native-morphing-text';

const Overlay = props =>{
    return(
        <View style={styles.overlay}>
            <View style={styles.center}>
                <RNMorphingText color={"#ffffff"} size={22} effect={"scale"}>{props.text}</RNMorphingText>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    overlay : {

        backgroundColor : "rgba(0,0,0,0.8)",
        position : "absolute",

        top : 0,
        left : 0,
        bottom : 0,
        right : 0,
        zIndex : 5
    },

    center : {
        alignItems : "center",
        justifyContent : "center"
    }
});

export default Overlay;

[prscX]

Thanks @cinder92 for raising the issue and sharing the snippet.

I have tried the same source in example app and it is working as expected. Can you please share the style of parent component to which you are adding this overlay.

Please reference below my test snippet:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import RNMorphingText from 'react-native-morphing-text'

type Props = {};
export default class App extends Component<Props> {
  constructor (props) {
    super(props)

    this.state = {
      value: 1
    }
  }

  componentDidMount () {
    setInterval(() => {
     this.setState({ value: this.state.value + 1 });
    }, 1000)
  }

  render() {
    return <View style={styles.container}>
        <View style={styles.overlay}>
          <View style={styles.center}>
            <RNMorphingText color={"#ffffff"} size={22} effect={"scale"}>
              {this.state.value.toString()}
            </RNMorphingText>
          </View>
        </View>
      </View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  overlay: {
    backgroundColor: "rgba(0,0,0,0.8)",
    position: "absolute",

    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: 5
  },
  center: {
    alignItems: "center",
    justifyContent: "center"
  }
});

Thanks </ Pranav >