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',
    
    
      }
    })

;

Give us a full snippet of your code. i think your searchbox object is placed in a wrong area and does not have access to states. — qafoori
– qafoori, Commented Feb 4, 2021 at 12:29
Yes. as i said, you need to move object inside your function. as an another way you can use @SilverskyTechnology answer below — qafoori
– qafoori, Commented Feb 4, 2021 at 12:41

Jignesh Mayani · Accepted Answer · 2021-02-04 12:29:18Z

3

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 }}/>

answered Feb 4, 2021 at 12:29

Jignesh Mayani

7,2551 gold badge24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user14624536 · Accepted Answer · 2021-02-04 12:42:17Z

1

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}} />.

answered Feb 4, 2021 at 12:42

user14624536

2 Comments

Avinash Over a year ago

but we should avoid inline styling .

user14624536 Over a year ago

It's nothing wrong with inline styling. It might not be so cool looking like when you declare your style for classes, but it's helpful, especially when you need some conditioning styling

Avinash · Accepted Answer · 2021-02-04 12:43:18Z

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',
    },
  });
};

Sylvain · Accepted Answer · 2021-02-04 12:42:57Z

0

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

answered Feb 4, 2021 at 12:42

Sylvain

5392 gold badges8 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to use const in react-native?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related