Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

React Native – How to create Loader with transparent view?

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?

Tags:

3

Answers


  1. 0

    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. 0

    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. 0

    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