Make a global useState variable in React

Question

I’m making an app through the expo with React-Turn on.I’m making a button that when I click I want it to change the height of a Component . I thought of carrying out an export of a variable useState and make a condition for when click change the styles , but when I try to turn the variable into useState global is not working, someone knows how?

Code Index.js :

import { View , TouchableOpacity ,Text , FlatList , Linking} from 'react-native';

import styles from './styles'

export default function Emergencia(){
    var [aumentar, setAumentar] = useState(false);

    export {aumentar}

    return(
        <View style={styles.container}>
            <Text style={styles.title}> O que fazer quando:</Text>
            <FlatList data={[1]} keyExtractor={incident => String(incident)} style={styles.list}
            renderItem={() => (
            <View>
                <TouchableOpacity onPress={() => {setAumentar(!aumentar)}} 
                style={styles.instructions}>
                <View>
                    <Text> Desmaio </Text>
                    <AntDesign name="caretdown" size={15} color="black" style={styles.verMais} />
                </View>
            </TouchableOpacity>
            </View>
            )}/>
        </View>
    )
}

I say Thestyles.js :

import { StyleSheet } from 'react-native';
import Constants from 'expo-constants'
import {aumentar} from './index.js'

export default StyleSheet.create({

    container : {
        backgroundColor : aumentar ? '#DF2901' : 'black',
        paddingTop : Constants.statusBarHeight + 5,
    },
    title :{
        fontSize : 30,
        color : '#13131a',
        marginTop  : 30,
        marginBottom : 16,
    }
})

Answer 1

Hello, if you are not going to use Context or Redux I recommend that you change the backgroundColor directly on the sheet where the state is, for example:

import { View , TouchableOpacity ,Text , FlatList , Linking} from 'react-native';

import styles from './styles'

export default function Emergencia(){
    var [aumentar, setAumentar] = useState(false);


    return(
        <View style={{...styles.container, backgroundColor : aumentar ? '#DF2901' : 'black'}}>
            <Text style={styles.title}> O que fazer quando:</Text>
            <FlatList data={[1]} keyExtractor={incident => String(incident)} style={styles.list}
            renderItem={() => (
            <View>
                <TouchableOpacity onPress={() => {setAumentar(!aumentar)}} 
                style={styles.instructions}>
                <View>
                    <Text> Desmaio </Text>
                    <AntDesign name="caretdown" size={15} color="black" style={styles.verMais} />
                </View>
            </TouchableOpacity>
            </View>
            )}/>
        </View>
    )
}

And Styles.js should look like:

import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default StyleSheet.create({

    container : {
        paddingTop : Constants.statusBarHeight + 5,
    },
    title :{
        fontSize : 30,
        color : '#13131a',
        marginTop  : 30,
        marginBottom : 16,
    }
})

I hope I’ve helped.