react-responsive Invalid-hook-call - react-native

Question

I 'm trying to use react-responsive in a monorepos with styled-component and react-native-web.
I've a workspace like my ui lib and i define my component like that:
import styled from 'styled-components/native';
import { theme } from '#components/theme';
import MediaQuery from 'react-responsive';
interface CardProps {
children: React.ReactNode;
tag: string;
}
const Card = (props: CardProps) => {
console.log("Card -> props", props)
return (
<Container>
<MediaQuery minDeviceWidth={1000}>
<Tag>'blablabla</Tag>
</MediaQuery>
<TagContainer>
<Tag>{props.tag}</Tag>
</TagContainer>
<MainContent>{props.children}</MainContent>
</Container>
);
}
I define the style like that:
const Container = styled.View`
display: flex;
flexDirection: column;
minWidth: ${theme.width.minCard};
maxWidth: ${theme.width.maxCard};
height: ${theme.height.card};
boxShadow: 0 0 10px ${theme.colors.primaryGrey};
border: 1px solid ${theme.colors.primaryYellow};
borderRadius: ${theme.borderRadius.rectangular};
marginBottom: ${theme.margins.medium};
`;
const TagContainer = styled.View`
display: flex;
flexDirection: row-reverse;
`;
I'm trying to use this component in my react-native app located in another workspace like this:
return (
<View>
<Specialist
key={psychologist.uuid}
img={psychologist.avatar.url}
name={psychologist.fullname}
job={psychologist.job_name}
description={psychologist.description}
/>
</View>
);
Each time, I find myself blocked by this error:
however my component is indeed a functional component...
Any idea ?

Answer 1

the package you are using is only for react.js.
For React Native you can use
React Native Responsive Screen
example given in react-native-responsive-screen
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Text style={styles.myText}>Login</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: { flex: 1 },
textWrapper: {
height: hp('70%'), // 70% of height device screen
width: wp('80%') // 80% of width device screen
},
myText: {
fontSize: hp('5%') // End result looks like the provided UI mockup
}
});
export default Login;