react-native-order-children

Orders the children of the component by the "order" prop unless otherwise defined by providing it with a prop "by"

Usage no npm install needed!

<script type="module">
  import reactNativeOrderChildren from 'https://cdn.skypack.dev/react-native-order-children';
</script>

README

React Native - Order Children

Overview

A simple React Native Component which allows you to re-order the children by a given prop. By default it will order by the prop "order." This can also be used in conjunction with absolute positioning to give a very basic Z-Index capability to React Native.

Available Props

  1. by (default: 'order') - Allows you to define the key that each child should by ordered by.
  2. direction (default: 'column') - Choose 'row' or 'column' to define what direction the views should be ordered in.
  3. style (default: '') - Define extra styling which can be used to style the wrapper view of the children.

Example

var Order = require('react-native-order-children');
var React = require('react-native');

var ExampleComponent = React.createClass({
  render() {
    return (
        <Order>
            <View order={2}>
                <Text> 1 </Text>
            </View>
            <View order={1}>
                <Text> 2 </Text>
            </View>
        </Order>
    );
  },

});

module.exports = ExampleComponent;