skip to Main Content

I want to create transparent loader like facebook login, so the loader can stacked the view,

like this one:

enter image description here

I have a file called Loader.js:

class Loader extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.nyoba}>
          <Text style={[global.global.HeaderText, {color:'white', justifyContent:'center'}]}>Loading...</Text>
          <Text style={[global.global.HeaderText, {color:'white', justifyContent:'center', marginBottom:150}]}>Please Wait...</Text>
          <Spinner
            isVisible={true}
            size={100}
            type={'ThreeBounce'}
            color={'#ffffff'}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  indicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 80
  },
  container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0, 0.3)'},
  nyoba: {justifyContent: 'center', alignItems: 'center', backgroundColor: '#8B0000'},
});

And i want to called Loader.js in every screen while calling an API, but the Loader take’s all the screen,

like this :

wreid

How can I makes the Loader.js work like I want? Is there’s some way to makes my loader like facebook loader?

3

Answers


  1. React Native’s Modal component allows to present a view in an enclosing view. What you are trying to achieve can be done using Modal component.

    Please have a look into Modal Component Docs.

    Login or Signup to reply.
  2. Try Applying StyleSheet.absoluteFillObject and zIndex: 5 to your most parent View

    import React from 'react';
    import {
    View,
    Text,
    StyleSheet
    } from 'react-native';
    export class Loader extends React.Component {
    render() {
        return (
            <View style={[styles.container, 
    StyleSheet.absoluteFillObject]}>
                <View style={styles.nyoba}>
                    <Text style={[ {color:'white', 
    justifyContent:'center'}]}>Loading...</Text>
                    <Text style={[ {color:'white', 
    justifyContent:'center', marginBottom:0}]}>Please Wait...</Text>
                    </View>
                </View>
            );
         }
       }
    
    const styles = StyleSheet.create({
    indicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 80
    },
    container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0, 0.3)', zIndex: 5},
    nyoba: {justifyContent: 'center', alignItems: 'center', backgroundColor: '#8B0000'},
    });
    
    Login or Signup to reply.
  3. Add this to Value> styles

       <!--   My Chose Diaog   -->
        <style name="Theme.CustomDialog" parent="Base.Theme.AppCompat.Light.Dialog">
            <item name="android:windowIsFloating">true</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:padding">0.1dp</item>
            <item name="android:background">#8d8cdf</item>
    

    Add this to the AndroidManifest file

    <activity
          android:name=".Add_Posts_Buttons"
          android:theme="@style/Theme.CustomDialog" />
    

    You can adjust transparency by setting the transparency of this color in the style
    Examples :

    <!--Transparent 50%-->
        <item name="android:background">#45ffffff</item>
    
        <!--Transparent 10%-->
            <item name="android:background">#8d8cdf</item>
    
        <!--Transparent 0%-->
            <item name="android:background">#ffffff</item>
    
        <!--Transparent 100%-->
            <item name="android:background">#00ffffff</item>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search