Back

React Native app working in web-based but not on Android phone using Expo

Created 2 years ago
108 Views
0 Comments
JagdeeshucGIO9
@JagdeeshucGIO9
JagdeeshucGIO9
@JagdeeshucGIO9Profile is locked. Login

I have done till REDUX states, this is Menu.js file:-

Then in mobile i got this error "error while updating property 'top' in shadow node of type rcttext react native"

import { LinearGradient } from "expo-linear-gradient";
import React from "react";
import styled from 'styled-components/native';
import {Animated,TouchableOpacity} from "react-native"
import {Ionicons} from "@expo/vector-icons"
import { connect } from "react-redux";

const mapStateToProps = state => { 
    return { mu: state.menu }; 
};

class Menu extends React.Component
{
state=    
{
    top:new Animated.Value(900)    
    //top:900
}

componentDidMount()
{
if(this.props.mu=="openMenu")
{
Animated.spring(this.state.top,{toValue:0,useNativeDriver:false}).start();
}
if(this.props.mu=="closeMenu"){
Animated.spring(this.state.top,{toValue:900,useNativeDriver:false}).start();    
}

}



render()
{
return(
<AnimatedContainer style={{
position: "absolute",
top:this.state.top,
zIndex:100,

}}>
<Cover>
<LinearGradient
colors={["rgba(255,148,115,1)","rgba(255,148,115,1)"]}
style={{width:"100%",height:"100%"}}
>
</LinearGradient>    
</Cover>
<TouchableOpacity style={{
top:122,
 position:"absolute",
 left:"50%",
 marginLeft:-22,
}}
onPress={()=>{
Animated.spring(this.state.top,{toValue:900,useNativeDriver:false}).start();        
console.warn(this.props.mu);
}}
>
<CloseView>
<Ionicons name="ios-close" size={45}></Ionicons>
</CloseView>
</TouchableOpacity>
<Content/>
</AnimatedContainer>    
);    
}
}
export default connect(mapStateToProps)(Menu);
const Container = styled.View`
width: 100%;
height:100%;
background-color: #f0f3f5;
`;

const Cover = styled.View`
width: 100%;
height: 142px;
background-color: #f0f3f5;
`;

const Content = styled.View`
  
`;

const CloseView = styled.View`
width: 44px;
height:44px;
border-radius: 22px;
background-color: aqua;
justify-content: center;
align-items: center;
`;

const AnimatedContainer = Animated.createAnimatedComponent(Container);

Comments
Please login to comment.