I want to show and hide a element (ActivityIndicator)-CodePudding

What I'm trying to do is when I click the button it disappears, and when it's already loaded in another component it shows again the button.

JSX code:

import { ActivityIndicator } from 'react-native';
     {......}
    {/button besides loading/}
                    <LinearGradient
                        colors={['#D97B29', '#F2B47E']}
                        style={styles.signIn}
                    >
                        <Text style={[styles.textSign, {
                            color:'#fff'
                        }]}>Entrar</Text>
                        {/loading besides button /}
                        <ActivityIndicator size="large" color="#D97B29" />
                    </LinearGradient>
                      {...}

How can I handle it whit the useState?

CodePudding user response：

Assuming you want to hide/show the indicator when the button is pressed, you need

const [ showLoader, setShowLoader ] = useState(false);

Your button on press should show something like

<Button onPress={() => setShowLoader(!showLoader)} text="Some text" />

and your code should look like

              {showLoader && (
                <ActivityIndicator size="large" color="#D97B29" />             
              )}
              {!showLoader && <LinearGradient
                        colors={['#D97B29', '#F2B47E']}
                        style={styles.signIn}
                    >
                        <Text style={[styles.textSign, {
                            color:'#fff'
                        }]}>Entrar</Text>
                    </LinearGradient> }
    ```

CodePudding user response：

something like this

{state && <ActivityIndicator size="large" color="#D97B29" />}

if state is true it will show the component