i am using this package for progress bar

1.) I want the progress bar to have white background 2.) I want it not to be stationary, i want it to be showing signs of progress

My code is looking thus :

import {Image, StyleSheet, Text, View} from 'react-native';
import React, { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import * as Progress from 'react-native-progress';

const SplashScreen = () => {
  const navigation = useNavigation();

  useEffect(() => {
    setTimeout(() => navigation.replace('HomePage'), 6000);
  }, []);

  return (
    <View style={styles.container}>
      <Image source={require('../assets/logo.png')} style={styles.logo} />
      <Progress.Bar style={{color:'#FFFFFF'}} progress={0.3} width={200} />
    </View>
  );
};

export default SplashScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#28282B',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 650,
    height: 650,
  },
});

Please what Do i appear not to be doing correctly?

CodePudding user response：

According to the docs, all progress indicators have these two props:

See the docs for more

In order for you to show progress, you have to have data about a process that's going on. For example, if you have a download going on, you could pass a callback to the downloader that would set a local progress state as the download progressed.

Also, take a look at the source code for the progress bar - it's a very simple task that shouldn't really require a package. You'll learn more from doing it yourself.

CodePudding user response：

Instead of using a package for this, you could easily make your own component. Here's an example, you can change the styles to whatever suits your needs, or make them able to be passed in as props.

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 10,
    backgroundColor: '#CCC',
    borderColor: '#0AF',
    borderWidth: 1.5,
    borderRadius: 3,
    overflow: 'hidden',
  },
  progress: {
    height: 10,
    backgroundColor: '#0AF',
  },
});

const ProgressBar = ({ progress }) => (
  <View style={styles.container>
    <View style={[styles.progress, { width: `${progress * 100}%`}] />
  </View>
);