How to use const in react-native?

Question

I added a const but I am not able to access it in styles

It is giving the error not able to find the variable size

import React, {  useState } from 'react'; //import useState
    import DropDownPicker from 'react-native-dropdown-picker';
    import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
    import Icon from 'react-native-vector-icons/Feather';
    
    
    export default function App() {
        const [size, setSize] = useState('95%')
        const [search, setSearch] = useState(''); //add this line
        
      return (      
        
        <SafeAreaView>
          <View style={styles.container}>
            <TextInput 
              onChangeText={(text) => setSearch(text)}
              onFocus={()=>setSize(1)}
              placeholder="Search"
              style={styles.searchbox}     
                                 
            ></TextInput>   
    
          <View style={styles.makecentral} >   
            {search.length < 1 ? <Image               
                style={styles.tinyLogo}
                source={require('./assets/icons8_search_200px_3.png')}        
              /> : ( 
                  null  //add clear text image and clear search text
                  
              )}
          
          </View>
                <View style={{flexDirection:'row'}}>
    
                  <View elevation={2}  style={{flex:3,backgroundColor:'#ffffff',height:40,marginTop:10,marginLeft:'2.5%',borderBottomLeftRadius:5,borderTopLeftRadius:5}}>
                    <Text style={{textAlign:'center',fontSize:20,color:'#FF7B00',marginTop:7}}>
                      Category
                    </Text>
                  </View>
                  
                  <View elevation={2} style={{backgroundColor:'#FF7B00',height:40,flex:5,marginTop:10,borderTopRightRadius:5,borderBottomRightRadius:5,marginRight:'2.5%'}}>
         
                  <DropDownPicker
                      items={[
                          {label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true},
                          {label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" />},
                          {label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" />},
                      ]}
                      
                      containerStyle={{height: 40}}
                      style={{backgroundColor: '#fafafa'}}
                      
                   
                    />
    
                  </View>
                 
                
                </View>
    
        </View>
        </SafeAreaView>
      );
    }
    
    
    const styles = StyleSheet.create({
      container: {    
        backgroundColor: '#fff',    
        
      },
    
      searchbox:{
        backgroundColor:'#f2f2f2',
        marginTop : StatusBar.currentHeight+5,
        height : 50,
        width : '95%',
        borderRadius : 20,
        textAlignVertical:'center',
        textAlign : 'center',
        alignItems:'center',        
      },
    
      tinyLogo: {
        position : 'absolute',
        width: 30,
        height: 30,
        
        opacity: 0.5,
        marginTop: -40,    
      },
    
      makecentral: {
        
        alignItems:'center',
        marginRight:80,    
      },
    
      category:{
        backgroundColor:'#f2f2f2',
        height:50,
        width:'90%',
        alignContent:'center',
    
    
      }
    })

;

Answer 1

if you are supposed to use the dynamic style in your component or views then you have to put it as inline style like the below example:

<MyComponent style={{ ...styles.searchbox, width: MY_DYNAMIC_SIZE }}/>

Answer 2

As you can see, your size is used before it is defined. You have to use it as in-line style : <Component className={classes.searchbox} style={{width: size}} /> .

Answer 3

"styles" is outside your function. Put it inside and it will work.

Answer 4

Create a method and pass parameters which are required and return the stylesheet. Please refer below code

export default function App() {
  const [size, setSize] = useState('95%');
  const [search, setSearch] = useState(''); //add this line
 const styles = getStyles(size);
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          onChangeText={(text) => setSearch(text)}
          onFocus={() => setSize(1)}
          placeholder="Search"
          style={styles.searchbox}
        ></TextInput>

        <View style={styles.makecentral}>
          {
            search.length < 1 ? (
              <Image style={styles.tinyLogo} source={require('./assets/icons8_search_200px_3.png')} />
            ) : null //add clear text image and clear search text
          }
        </View>
        <View style={{ flexDirection: 'row' }}>
          <View
            elevation={2}
            style={{
              flex: 3,
              backgroundColor: '#ffffff',
              height: 40,
              marginTop: 10,
              marginLeft: '2.5%',
              borderBottomLeftRadius: 5,
              borderTopLeftRadius: 5,
            }}
          >
            <Text style={{ textAlign: 'center', fontSize: 20, color: '#FF7B00', marginTop: 7 }}>
              Category
            </Text>
          </View>

          <View
            elevation={2}
            style={{
              backgroundColor: '#FF7B00',
              height: 40,
              flex: 5,
              marginTop: 10,
              borderTopRightRadius: 5,
              borderBottomRightRadius: 5,
              marginRight: '2.5%',
            }}
          >
            <DropDownPicker
              items={[
                {
                  label: 'USA',
                  value: 'usa',
                  icon: () => <Icon name="flag" size={18} color="#900" />,
                  hidden: true,
                },
                { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
                { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
              ]}
              containerStyle={{ height: 40 }}
              style={{ backgroundColor: '#fafafa' }}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}
const getStyles = (size) => {
  return StyleSheet.create({
    container: {
      backgroundColor: '#fff',
    },

    searchbox: {
      backgroundColor: '#f2f2f2',
      marginTop: StatusBar.currentHeight + 5,
      height: 50,
      width: size,
      borderRadius: 20,
      textAlignVertical: 'center',
      textAlign: 'center',
      alignItems: 'center',
    },

    tinyLogo: {
      position: 'absolute',
      width: 30,
      height: 30,

      opacity: 0.5,
      marginTop: -40,
    },

    makecentral: {
      alignItems: 'center',
      marginRight: 80,
    },

    category: {
      backgroundColor: '#f2f2f2',
      height: 50,
      width: '90%',
      alignContent: 'center',
    },
  });
};