CODEWITHSUNDEEP
react-nativereact-hooks
asus
asus

Reputation: 1759

React Native - use useDimensions hook in stylesheet

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?

Upvotes: 2

Views: 1829

Answers (1)

mleister
mleister

Reputation: 2585

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

Upvotes: 1

Related Questions