React Native - use useDimensions hook in stylesheet

user_8518207 0
Viewed 1179

How do you use dimensions returned from a hook in RN in the Stylesheet?

for example

import { useDimensions } from '@react-native-community/hooks';

const ProfileEditScreen = () => {
  const { width, height } = useDimensions().window;
  ...

const styles = StyleSheet.create({
  profileEditContainer__form: {
    borderRadius: 15,
    height: 40,
    width: width - width / 4,
    borderColor: Colors.defaultColor,
    borderWidth: 1,
    textAlign: 'center',
  },
  ...

In the example above, width is not defined.

In the past (class components), I used to have a top-level

const { width: WIDTH } = Dimensions.get('window');

Can't really do that anymore with functional components.. any suggestions?

react-native react-hooks
1 Answers
  1. You only can use hooks in functional components.
  2. For your example I would still suggest to use Dimensions.get('window').
user_129003610
Related