Search code examples
reactjsreact-nativereact-animated

Anim: Text strings must be rendered within a <Text> component


Have no idea why i am getting this error can someone help? there is no text being rendered

render() {

const { width, height } = Dimensions.get('window')
        const animatedHeight = {
                        transform : this.animated.getTranslateTransform()
        }
        return (
            <Animated.View style={{flex:1, backgroundColor:'red'}}>
                <Animated.View style={[animatedHeight, { position: 'absolute', left: 0, right: 0, zIndex: 10, backgroundColor: 'white', height: height }]}>

                </Animated.View>
            </Animated.View>

        )
    }

Solution

  • I guess it is caused by whitespace hidden inside Animated.View children. Self-enclosed the tag should solve the problem.

    <Animated.View
      style={[
        animatedHeight, 
        {
          position: 'absolute',
          left: 0, 
          right: 0, 
          zIndex: 10, 
          backgroundColor: 'white', 
          height: height
        }
      ]}
    />