diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/common/LoadingIndicator.tsx | 24 | ||||
-rw-r--r-- | src/components/common/index.ts | 1 | ||||
-rw-r--r-- | src/components/onboarding/RegistrationWizard.tsx | 8 |
3 files changed, 31 insertions, 2 deletions
diff --git a/src/components/common/LoadingIndicator.tsx b/src/components/common/LoadingIndicator.tsx new file mode 100644 index 00000000..f6679556 --- /dev/null +++ b/src/components/common/LoadingIndicator.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {ActivityIndicator, StyleSheet} from 'react-native'; +import {usePromiseTracker} from 'react-promise-tracker'; + +const LoadingIndicator: React.FC = () => { + const {promiseInProgress} = usePromiseTracker(); + return promiseInProgress ? ( + <ActivityIndicator + style={styles.loadingIndicator} + size="large" + color="#fff" + /> + ) : ( + <></> + ); +}; + +const styles = StyleSheet.create({ + loadingIndicator: { + marginVertical: '5%', + }, +}); + +export default LoadingIndicator; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 4a226c8f..cb9d641b 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -7,4 +7,5 @@ export {default as GradientBackground} from './GradientBackground'; export {default as SocialIcon} from './SocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; +export {default as LoadingIndicator} from './LoadingIndicator'; export * from './post'; diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx index 0094c8af..8d747b01 100644 --- a/src/components/onboarding/RegistrationWizard.tsx +++ b/src/components/onboarding/RegistrationWizard.tsx @@ -3,7 +3,7 @@ import {View, StyleSheet, ViewProps, Keyboard} from 'react-native'; import * as Animatable from 'react-native-animatable'; interface RegistrationWizardProps extends ViewProps { - step: 'one' | 'two' | 'three' | 'four' | 'five'; + step: 'one' | 'two' | 'three' | 'four' | 'five' | 'six'; } const RegistrationWizard = (props: RegistrationWizardProps) => { @@ -41,6 +41,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { <View style={props.step === 'four' ? stepActiveStyle : stepStyle} /> <View style={styles.progress} /> <View style={props.step === 'five' ? stepActiveStyle : stepStyle} /> + <View style={styles.progress} /> + <View style={props.step === 'six' ? stepActiveStyle : stepStyle} /> </View> </Animatable.View> )} @@ -58,6 +60,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { <View style={props.step === 'four' ? stepActiveStyle : stepStyle} /> <View style={styles.progress} /> <View style={props.step === 'five' ? stepActiveStyle : stepStyle} /> + <View style={styles.progress} /> + <View style={props.step === 'six' ? stepActiveStyle : stepStyle} /> </View> </Animatable.View> )} @@ -82,7 +86,7 @@ const styles = StyleSheet.create({ backgroundColor: '#e1f0ff', }, progress: { - width: '16%', + width: '13%', height: 2, backgroundColor: '#e1f0ff', }, |