How to cover the whole tabbed app using react native and router flux?

Question

lightBox : {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    backgroundColor: rgba(0,0,0,0.7),
    position: 'absolute',
    top: -0,
    left: 0,
    zIndex: 9999,
    justifyContent : 'center'
}

The problem is: The Tab Bar is still active, the user are capable to navigate to other tab while it's busy. Also, the navigation bar is not covered.

Any solution for this ?

Answer 1

You might not have structured your scenes appropriately. The Lightbox styles seems to work fine for me. Here is a simple example demonstrating your requirement.

import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import {
  Router,
  Scene,
  Actions,
  Lightbox,
  Tabs
} from "react-native-router-flux";

export default (App = () => (
  <Router>
    <Lightbox>
      <Tabs key="root">
        <Scene key="events" component={Events} title="Events" />
        <Scene key="missions" component={Missions} title="Missions" />
        <Scene key="share" component={Share} />
      </Tabs>
      <Scene key="uploading" component={Uploading} />
    </Lightbox>
  </Router>
));

class Missions extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => null}>Missions</Text>
      </View>
    );
  }
}

class Uploading extends React.Component {
  render() {
    return (
      <View
        style={{
          width: Dimensions.get("window").width,
          height: Dimensions.get("window").height,
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          position: "absolute",
          top: 0,
          left: 0,
          zIndex: 9999,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ color: "white" }} onPress={() => null}>
          Uploading
        </Text>
      </View>
    );
  }
}

class Share extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => Actions.uploading()}>Share</Text>
      </View>
    );
  }
}

class Events extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => null}>Events</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});