How to show ActivityIndicator for scrollView in React native?

Question

I have used React native - Activity Indicator with scrollView for Form fields. while submitting form loading indicator is not displaying. Found solution for FlatList but how to display loader with ScrollView

<ActivityIndicator size="large" color="black" style={styles.loading} /> with

Styles.js

loading: {
        position: "absolute",
        zIndex: 10000,
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        // backgroundColor: "rgba(0, 0, 0, 0.25)",
    }

Answer 1

you need to use ....

  <View style={LayoutStyle.indicatorWithLoader}>
        <ActivityIndicator size="large" color="#fff" />
  </View>

and LayoutStyle.js like

 indicatorWithLoader: {
   flex: 1,
   position: 'absolute',
   right: 0,
   left: 0,
   zIndex: 9999999,
   //backgroundColor: 'rgba(0,0,0,0.6)', // for flip image or else remove this
   alignItems: 'center', // for flip image or else remove this
   justifyContent:'center', // for flip image or else remove this
 },

hope it's working I think

Answer 2

Does your Activity Indicator need to be inside the scroll view? Why can't you render another View while the form is being submitted? Like the GIF below:

I've build a full example to you here

Answer 3

1. create loading state for your loader.

   const [isLoading, setLoading] = useState(false);

2. create your custom loader:-

   <View style={styles.loader}>
     <View style={styles.backdrop} />
     <ActivityIndicator color={colors.primary} />
   </View>
   

   const styles = StyleSheet.create({ loader: { width: "100%", height: "100%", position: "absolute", zIndex: 99999, elevation: 5, alignItems: "center", justifyContent: "center", }, backdrop: { backgroundColor: "#000", opacity: 0.8, width: "100%", height: "100%", position: "absolute", } });

3. use the loading state to conditionally render the loader:-

    { isLoading ? <Loader/> : (
     <ScrollView>
   
     // rest of your code
   
     <Button onPress = {()=>{yourFn(); setLoading(true);}/>
   
    </ScrollView>)}