how to bring ProgressBar in center of the screen and remove warning message in react native

Question

how to bring the progress bar to the center of the screen like we do in android center in parent in relative layout and how to remove the warning message.How to change the visibility(invisible or gone or visible) in progressbar. MyScreen

var ProgressBar = require('ProgressBarAndroid');
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
        <Text style={{
            backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center',
            color: 'white', marginBottom: 30
        }}>LOGIN</Text>
        <ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} />
        <View style={{ justifyContent: 'center' }}>
            <TextInput
                style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
                placeholder='Username' placeholderTextColor='white'
                autoFocus={true}
                returnKeyType='next'
                keyboardType='email-address'
                onChangeText={(valUsername) => _values.username = valUsername}
                />
            <TextInput
                secureTextEntry={true}
                style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
                placeholder='Password' placeholderTextColor='white'
                onChangeText={(valPassword) => _values.password = valPassword}
                />
        </View>
        <Button onPress={() => { _handlePress() } } label='Login' />
        <View>
            <Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
                Forgot Password
            </Text>
            <Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
                SignUp
            </Text>
        </View>
    </View>

try using ActivityIndicator instead of progressbar.Also what do you mean by center of screen? As an overlay ? — Ravi Theja, Nov 30 '16 at 12:40
yes like a overlay in center and how to change its visibility — YLS, Nov 30 '16 at 12:42

score 1 · Answer 1 · answered Nov 30 '16 at 17:04

1

As noted by @ravi-teja, use absolute positioning. Also, your warning arises because styleAttr is not a style attribute (the name is misleading) but a prop. You can also show and hide it programmatically using a boolean (myCondition) (that you can maybe store in your state). You should do something like this:

var ProgressBar = require('ProgressBarAndroid');

// ...
render(){
    const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render.
    return (

       //...
       {this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />}
       //...
}

In addition to that and as others said, you should give a try to ActivityIndicator, since it works for both iOS and Android.

answered Nov 30 '16 at 17:04

martinarroyo

9,389
3
38
75

initial state of mycondition=false, when i change the mycondition=true, i am not able to see the ActivityIndicator(progressbar) on my screen how to refresh to show the indicator. I tried your way by setting absolute and other still my activityindicator is shown at end of the screen left side. Above i have posted my screen and my view code. – YLS Dec 01 '16 at 08:13
Are you using `this.setState({myCondition: true})` to update the value? Otherwise it will not trigger a render. Try without the `justifyContent` and `alignItems` styles. – martinarroyo Dec 01 '16 at 08:23
i am not using state i am using const _showProgress = { progress: false } is there any other way to refresh without using state – YLS Dec 01 '16 at 08:25
There are some ways (by using a flux-based pattern, for instance), but the simplest case is using the state. The idea of react is that a component is always is sync with its props and its state, so the only way of triggering a render is to update one of those. – martinarroyo Dec 01 '16 at 08:27
https://github.com/yuvaraj119/ReactNative/blob/master/NavigationSample/app/components/Login.js this is my sample project Login Screen how to add props or state in this because this is not a class.Please can you look at it how to add state – YLS Dec 01 '16 at 09:18

how to bring ProgressBar in center of the screen and remove warning message in react native

1 Answers1