Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

zIndex in React Native

How to handle with zIndex?

I tried to specify the largest number from the scrollview, but it's still at the bottom(

Without ScrollView it looks like this, but I need to scroll up to image.

Thank you

like image 713
Ivo Dimitrov Avatar asked Jul 14 '16 14:07

Ivo Dimitrov


People also ask

What is zIndex in React Native?

zIndex is the Expo and React Native analog of CSS's z-index property which lets the developer control the order in which components are displayed over one another.

What is zIndex?

What is a Z Index? Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).

How do you write Z index in React Native?

To use z-index in React Native, we can use the zIndex style. to add 2 View s that has different zIndex values. The component with the higher zIndex value is laid over the component with the lower zIndex value. So the green square goes on top of the red square.

What does flex 1 mean React Native?

Normally you will use flex: 1 , which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.


1 Answers

This has been implemented in iOS as of 0.30 (see the commit changes) and in android in 0.31 (changes)

I have made a simple example component for how I have been using it:

'use-strict';

import React, { Component } from 'react';
const { View, StyleSheet } = require('react-native');

const styles = StyleSheet.create({
    wrapper: {
        flex:1,
    },
    back: {
        width: 100,
        height: 100,
        backgroundColor: 'blue',
        zIndex: 0
    },
    front: {
        position: 'absolute',
        top:25,
        left:25,
        width: 50,
        height:50,
        backgroundColor: 'red',
        zIndex: 1
    }
});

class Layers extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.wrapper}>
                <View style={styles.back}></View>
                <View style={styles.front}></View>
            </View>
        );
    }
}

module.exports = Layers;
like image 50
Felipe Avatar answered Oct 03 '22 10:10

Felipe