reactjs - Create a tutorial using an overlay react native app - Stack Overflow

admin管理员组

文章数量:1122846

I have an app and would like to add a tutorial. This tutorial will mainly consist in displaying an overlay on the app with a text in the center of this overlay and dhow some elements of the app on top of the overlay

This is a basic code sample

import React, { useEffect, useState } from "react";
import { Dimensions, Text, View } from "react-native";
import { TouchableOpacity } from "react-native-web";

function App() {
  const [tutorialOverlay, setTutorialOverlay] = useState(false);

  useEffect(() => {
    console.log({ tutorialOverlay });
  }, [tutorialOverlay]);

  return (
    <View style={{ flex: 1, height: "100%" }}>
      {tutorialOverlay && (
        <TouchableOpacity
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            height: Dimensions.get("window").height,
            width: Dimensions.get("window").width,
            backgroundColor: "#000",
            zIndex: 10,
            opacity: 0.5,
          }}
          onPress={() => setTutorialOverlay(false)}
        >
          <Text style={{ color: "#fff" }}>Welcome to the tutorial</Text>
        </TouchableOpacity>
      )}
      <View style={{ backgroundColor: "blue", flex: 1 }}>
        <TouchableOpacity
          style={{ margin: 30, padding: 10, backgroundColor: "white" }}
          onPress={() => setTutorialOverlay(true)}
        >
          <Text>Activate tutorial</Text>
        </TouchableOpacity>
      </View>
      <View
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          flexDirection: "row",
          backgroundColor: "green",
        }}
      >
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu1
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
            zIndex: tutorialOverlay ? 1 : 20,
          }}
        >
          FooterMenu2
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu3
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu4
        </Text>
      </View>
    </View>
  );
}

export default App;

Testable code there

Now the harder part will be to display for example the FooterMenu2 on top of the tutorial overlay, I tried with a zIndex but it could not work as his parent is under the overlay.

I have an app and would like to add a tutorial. This tutorial will mainly consist in displaying an overlay on the app with a text in the center of this overlay and dhow some elements of the app on top of the overlay

This is a basic code sample

import React, { useEffect, useState } from "react";
import { Dimensions, Text, View } from "react-native";
import { TouchableOpacity } from "react-native-web";

function App() {
  const [tutorialOverlay, setTutorialOverlay] = useState(false);

  useEffect(() => {
    console.log({ tutorialOverlay });
  }, [tutorialOverlay]);

  return (
    <View style={{ flex: 1, height: "100%" }}>
      {tutorialOverlay && (
        <TouchableOpacity
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            height: Dimensions.get("window").height,
            width: Dimensions.get("window").width,
            backgroundColor: "#000",
            zIndex: 10,
            opacity: 0.5,
          }}
          onPress={() => setTutorialOverlay(false)}
        >
          <Text style={{ color: "#fff" }}>Welcome to the tutorial</Text>
        </TouchableOpacity>
      )}
      <View style={{ backgroundColor: "blue", flex: 1 }}>
        <TouchableOpacity
          style={{ margin: 30, padding: 10, backgroundColor: "white" }}
          onPress={() => setTutorialOverlay(true)}
        >
          <Text>Activate tutorial</Text>
        </TouchableOpacity>
      </View>
      <View
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          flexDirection: "row",
          backgroundColor: "green",
        }}
      >
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu1
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
            zIndex: tutorialOverlay ? 1 : 20,
          }}
        >
          FooterMenu2
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu3
        </Text>
        <Text
          style={{
            width: "25%",
            padding: 10,
            textAlign: "center",
            color: "red",
          }}
        >
          FooterMenu4
        </Text>
      </View>
    </View>
  );
}

export default App;

Testable code there https://codesandbox.io/p/sandbox/tutorial-4lg357

Now the harder part will be to display for example the FooterMenu2 on top of the tutorial overlay, I tried with a zIndex but it could not work as his parent is under the overlay.

• reactjs
• react-native

Share Improve this question Follow asked Nov 22, 2024 at 11:37 AjouveAjouve 10.1k2727 gold badges9494 silver badges152152 bronze badges 3

• Have you considered using an external library such as Driver.js? Or do you want to create it yourself? – Edoardo Camara Commented Nov 22, 2024 at 13:40
• Thanks @EdoardoCamara but the lib does not looks compatible with react-native – Ajouve Commented Nov 24, 2024 at 13:25
• 1 There is react-native-copilot for React Native – Edoardo Camara Commented Nov 26, 2024 at 10:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

hey what you can do here is:

• give the footer menu a fixed height
• make the tutorial modal height = (SCREEN_HEIGHT - FOOTER_MENU_HEIGHT)
• align the tutorial modal to top of screen

this way the footer menu will always show even when the modal is open

本文标签： reactjsCreate a tutorial using an overlay react native appStack Overflow