title: Sort array by value and alphabet React Native
body: <p>I get an array from firebase, it is now sorted alphabetically. If an object contains 'routes' then it will get the text 'Bekijk' button otherwise the text 'coming soon' button, what I would like is that the objects with the name 'Bekijk' are displayed first and then the other objects alphabetically order, does anyone know if that is possible? </p>
  
  <p>This is my code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, Image, ImageBackground, StatusBar, ScrollView, Dimensions, TouchableOpacity} from 'react-native';
  import { Header, Icon,Button,Rating, AirbnbRating  } from 'react-native-elements';
  import firebase from 'react-native-firebase';
  
  
  class routeScreen extends Component {
  
    constructor(props){
      super(props);
      this.state = {
        goverments: [],
      }
  }
  
    getGovermentData = () =&gt; {
      let ref = firebase.database().ref('Goverments');
      ref.on('value' , snapshot =&gt;{
          var state = snapshot.val();
          this.setState({
            goverments: state,
          })
          console.log(state);
        })
  
    }
  
      componentWillMount(){
        this.getGovermentData(); 
      }
  
  
  
      render() {
        const width = {
         width: (Dimensions.get('window').width / 2),
        };
        return (
          &lt;ScrollView&gt;
  
            {
              this.state.goverments.sort(function(a, b) {
                if(a.name.toLowerCase() &lt; b.name.toLowerCase()) return -1;
                if(a.name.toLowerCase() &gt; b.name.toLowerCase()) return 1;
                return 0;
               }).map((item, i) =&gt; (
                &lt;View style={[styles.cards, { backgroundColor: (i % 2  == 0) ? '#D1A96E' : '#A58657'  }]}&gt;
                &lt;View style={styles.leftcolum}&gt;
              &lt;Text style={styles.title}&gt;{item.name}&lt;/Text&gt;
                  &lt;Text style={styles.undertitle}&gt;4km - 5km - 7km&lt;/Text&gt;
                  &lt;Image source={require('./assets/images/stars.png')} style={styles.stars}/&gt;
  
                  &lt;Button buttonStyle={{
                            backgroundColor: item.routes ? "#3F494B" : "#018786",
                            marginTop: 40,
                            borderRadius: 50,
                        }} title={item.routes ? "Bekijk" : "Coming soon"}
                        onPress={() =&gt; item.routes ? this.props.navigation.navigate('Location', {govermentData: item}) : '#'}
                        /&gt;
  
                &lt;/View&gt;
                &lt;View style={styles.rightcolum}&gt;
                  &lt;Image source={{uri: item.logoUrl}} style={{width: 150, height: 68}}/&gt;
                &lt;/View&gt;
  
              &lt;/View&gt;
            ))
          }
      &lt;/ScrollView&gt;
  
  
        );
      }
    }
  
    const styles = StyleSheet.create({
      cards:{
        backgroundColor: '#D1A96E',
        borderRadius: 10,
        marginTop: 20,
        marginRight: 10,
        marginLeft: 10,
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 20,
        paddingBottom: 20,
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start'
      },
      stars:{
        marginTop: 10,
      },
      leftcolum:{
        width: '50%',
      },
      rightcolum:{
        width: '50%',
        paddingTop:30,
        paddingLeft:10,
      },
      title:{
        fontSize: 17,
        color: '#fff',
        marginTop: 5,
        fontWeight: '800',
      },
      undertitle:{
        fontSize: 12,
        color: '#fff',
        fontWeight: '200',
      },
      button:{
        backgroundColor: '#3F494B',
        borderRadius: 22,
        marginTop: 20,
      },
      valkenburg:{
        backgroundColor: '#A58657',
      },
      gulpen:{
        backgroundColor: '#EBC285',
      },
      logoValkenburg:{
        width: '50%',
        paddingTop:10,
        paddingLeft:10,
      },
      logoGulpen:{
        width: '50%',
        paddingTop:30,
        paddingLeft:10,
      }
  
    });
  
    export default routeScreen;
  </code></pre>
  
  <p>Structure of array:
  <a href="https://i.stack.imgur.com/cWT1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cWT1n.png" alt="enter image description here"></a></p>
  
  <p>what I would like:
  now the array is shown in alphabetical order, that is good, I would only like to show object <a href="https://i.stack.imgur.com/cWT1n.png" rel="nofollow noreferrer">1</a> of Goverments at the top because it contains the value routes, with the others the value routes being empty. so if it is filled, it must show it at the top</p>