React Native app working in web-based but not on Android phone using Expo
Created 2 years ago
108
Views
0
Comments
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);