Can Not Find Global Variable

ahmadhatahet commented 6 years ago

Steps to Reproduce

I defined global variable on my style sheet.
after calling this variable error shows 'Can't find variable $largeImageSize' .
When I hover on $largeImageSize with holding Control on Windows I get any.
I use Windows 10 and Android Emulator.

Try in Expo

Expected Behavior

I'm trying to change Logo to small Size when Keyboard activated then get back the large size

Actual Behavior

$largeImageSize will give my image width so I can animated to smaller width

Show the code

Style Sheet ` import { Dimensions } from 'react-native'; import EStyleSheet from 'react-native-extended-stylesheet';

const imageWidth = Dimensions.get('window').width/5*3;

export default EStyleSheet.create({ $largeImageSize: imageWidth, $smallImageSize: imageWidth/2,

container : {
    alignItems:'center',
},
image: {
    justifyContent:'center',
    alignItems: 'center',
    width: '$largeImageSize',
    height: '$largeImageSize',
},
text: {
    fontWeight: '400',
    color: '$white',
    fontSize: 26,
    letterSpacing: 0.5,
    marginTop: 20,
    marginBottom: 10,
}

}); `

Logo.js ` import React, { Component } from 'react'; import { View, Image, Text, Keyboard, Animated, Platform } from 'react-native'; import styles from './styles'

const ANIMATED_DURATION = 250;

class Logo extends Component { constructor(props) { super(props);

    this.imageSize = new Animated.Value(styles.$largeImageSize);
}
componentDidMount() {
    const os = Platform.os === 'ios' ? 'Will' : 'Did';
    this.KeyboardShowListener = Keyboard.addListener(`keyboard{os}Show`, this.keyboardShow);
    this.KeyboardHideListener = Keyboard.addListener(`keyboard{os}Hide`, this.keyboardHide);
}
componentWillUnmount() {
    this.KeyboardShowListener.remove();
    this.KeyboardHideListener.remove();
}
keyboardShow = () => {
    Animated.parallel([
        Animated.timing(this.imageSize, {
            toValue: $smallImageSize,
            duration: ANIMATED_DURATION,
        })
    ]).start();
}
keyboardHide = () => {
    Animated.parallel([
        Animated.timing(this.imageSize, {
            toValue: $largeImageSize,
            duration: ANIMATED_DURATION,
        })
    ]).start();
}

render() {
    const imageSize =[
        styles.image,
        {width: $largeImageSize, height: $largeImageSize}
    ]

    return (
        <View style={styles.container} >
            <Image
                resizeMode='contain'
                style={this.imageSize}
                source={require('./img/logo.png')}
            />

            <Text style={styles.text}>
                Ahmad Hatahet
            </Text>
        </View>
    );
}

};

export default Logo; `

Package.json { "name": "converter", "version": "0.1.0", "private": true, "devDependencies": { "react-native-scripts": "1.14.0", "jest-expo": "~27.0.0", "react-test-renderer": "16.3.1" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "jest" }, "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "6.2.0", "color": "2.0.0", "expo": "^27.0.1", "moment": "2.18.1", "react": "16.3.1", "react-native": "~0.55.2", "react-native-extended-stylesheet": "0.8.0" } }

Environment

` Environment: OS: Windows 10 Node: 8.6.0 Yarn: 1.5.1 npm: 5.7.1 Watchman: Not Found Xcode: N/A Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed) react: 16.3.1 => 16.3.1 react-native: ~0.55.2 => 0.55.4 `

vitalets commented 6 years ago

Hi @hatahetahmad!

Is there EStyleSheet.build() in your code?

ahmadhatahet commented 6 years ago

Yes, In my Index File

After testing my app again it works fine, I really don't know why.

Vijaysuryawanshi1993 commented 4 years ago

Hi, try
width: () => EStyleSheet.value('$largeImageSize'), height: () => EStyleSheet.value('$largeImageSize'),

vitalets / react-native-extended-stylesheet