React Native text goes behind object

Question

Hi Guys I have an issue where some text is being overlapped by another object.

Here is an image of what's happening.

You can see that the second line of text is behind the white shape, how can I make it so it becomes above the white shape? Ive tried z order and various other positions but can't get my head round this.

The code for this:

code for the white square:

const Square = () => {
  return <View style={styles.square} />;
};

then the main code

<View style={{flex: 1, padding: 0}}>
      {isLoading ? (
        <Text>Loading...</Text>
      ) : (
        <SafeAreaView style={{flex: 1, backgroundColor: '#8af542'}}>
          <View
            style={{
              marginTop: 150,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text>TEST</Text>
            <Text
              style={{
                position: 'absolute',
                top: 140,
                zIndex: 1,
                elevation: 1,
              }}>
              TEXT HERE
            </Text>
          </View>
          <View
            style={{
              flex: 1,
              justifyContent: 'flex-end',
              marginBottom: windowHeight * -0.05,
            }}>
            <Square></Square>
          </View>
        </SafeAreaView>
      )}
    </View>

Then here are the styles:

const styles = StyleSheet.create({
  centerItems: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: windowWidth,
    height: windowHeight * 0.6,
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: windowHeight * -0.05,
    position: 'absolute',
  },
});

danw0001 · Accepted Answer · 2021-10-28 12:16:30Z

This is occuring because you have set the zIndex of the TEXT HERE view, and not the view that you want to have on the bottom. To resolve this, simply add the following to the square's view like so:

       <View
        style={{
          marginTop: 150,
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 100
        }}>
        <Text>TEST</Text>
        <Text
          style={{
            position: 'absolute',
            top: 140,
            zIndex: 1,
            elevation: 1,
          }}>
          TEXT HERE
        </Text>
      </View>

And then, if that does not help you, set the square's view zIndex: -1 like so:

      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          marginBottom: windowHeight * -0.05,
          zIndex: -1
        }}>
        <Square></Square>
      </View>

When doing this, we are essentially telling the views to switch positions, and the view with the whitespace is being forced to the bottom.

Collectives™ on Stack Overflow

React Native text goes behind object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related