Ad

How To Float A View Over All Views In A Screen

- 1 answer

screen 1

screen 2

Check Sandbox example here : https://codesandbox.io/s/react-native-ylfe2?fbclid=IwAR3LoEbOVASVm3JttJnXJuSRbt_htb_A11XLHBj2WxgMT9efNn_7M6r0xQw

I have a drag-able component which the user should drag and drop it next to the write answer I have divided the screen to 3 Views or containers The problem is that when the user drop the answer on the 3rd View/Component its not catchable any more. I think that's because of zIndex levels, I tried to get zIndex work but with no success + I can't use positions absolute it will rune the design I have set the back ground colors to different colors.

    render() {
     return (
  <View style={styles.mainContainer}>

    <View style={styles.titleContainer}>
      <Text style={styles.textlarge}>Match
        <Text style={styles.text}> Match the image with the matching text :</Text>
      </Text>
    </View>

    <View style={styles.imagesContainer}>
      {/* images here  */}
      <Draggable style={styles.draggable} imageurl={require(drugs)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
      <Draggable imageurl={require(nomobile)} moveY={140} moveX={80} answerId={2} qtrue={q2true} />
      <Draggable imageurl={require(speedlimit)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
      <Draggable imageurl={require(streetwork)} moveY={120} moveX={40} answerId={1} qtrue={q1true} />
    </View>

    <View style={styles.answersContainer}>
      {/* answers here */}
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we never use a handheld mobile device when driving</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE ALWAYS drive safely and legally: <Text style={styles.questionTextSmall}>we always obey the speed limit</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>WE NEVER <Text style={styles.questionTextSmall}>work under the influence of alcohol or drugs</Text></Text>
        </View>
      </View>
      <View style={styles.questionContainer}>
        <View style={styles.dropZone}></View>
        <View style={styles.questionTextContainer}>
          <Text style={styles.questionTextLarge}>NEVER <Text style={styles.questionTextSmall}>undertake any street or underground work activities unless competent to do so</Text></Text>
        </View>
      </View>
    </View>

  </View>
);
   }


    const styles = StyleSheet.create({
     mainContainer: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'stretch',
     padding: DEVICE_WIDTH * 0.03,
     backgroundColor: '#EE82EE',
     zIndex: 1,
   },
   dropZone: {
     width: CIRCLE_RADIUS * 2,
     height: CIRCLE_RADIUS * 2,
     borderStyle: "solid",
     borderWidth: 3,
     borderColor: "#cccccc",
     borderRadius: CIRCLE_RADIUS,
     zIndex: 1,
   },
   titleContainer: {
     flexDirection: 'row',
     backgroundColor: '#00BFFF',
     flex: 2,
     paddingTop: DEVICE_HEIGHT * 0.03,
     flexWrap: 'wrap',
   },
   textlarge: {
     fontSize: 28,
     fontWeight: "bold",
     fontStyle: "normal",
     lineHeight: 25,
     letterSpacing: 0,
     color: "#e60000",
     flexWrap: 'wrap',
   },
   text: {
     fontSize: 21,
     fontWeight: "bold",
     fontStyle: "normal",
     lineHeight: 25,
     letterSpacing: 0,
     color: "#4c464e",
     flexWrap: 'wrap',
   },
   imagesContainer: {
     backgroundColor: 'yellow',
     flex: 2,
     flexDirection: 'row',
     justifyContent: 'space-between',
     zIndex: 1,
   },
   answersContainer: {
     flexDirection: 'column',
     flex: 8,
     zIndex: 1,
   },
   questionContainer: {
     flexDirection: 'row',
     flex: 1,
     zIndex: 1,
   },
   questionTextContainer: {
     flex: 3,
     marginLeft: 10,
     zIndex: 0,
   },
   questionTextLarge: {
     flexWrap: 'wrap',
     backgroundColor: '#C0C0C0',
     fontSize: 16,
     fontWeight: "bold",
     fontStyle: "normal",
     letterSpacing: 0,
     color: "#4b464d",
   },
   questionTextSmall: {
     flexWrap: 'wrap',
     fontSize: 16,
     fontWeight: "normal",
     fontStyle: "normal",
     lineHeight: 20,
     letterSpacing: 0,
     color: "#4b464d"
   },
   draggable: {
     zIndex: 100,
     position: 'absolute',
   }
 });
Ad

Answer

questionContainer: zIndex: -1 will solve your problem

Ad
source: stackoverflow.com
Ad