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 '';


React Native - Order Children


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.


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

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


module.exports = ExampleComponent;