Example LayoutAnimation React Native

app.js

//import liraries
import React, { Component } from "react";
import { View, Text, StyleSheet, ScrollView,LayoutAnimation, StatusBar } from "react-native";
import FlexTab from "./flexTab";
import Header from './header'
// create a component
class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, text: "item1", selected: false, backgroundColor:'#A5F2E7' },
        { id: 2, text: "item2", selected: false, backgroundColor:'#8983F3' },
        { id: 3, text: "item3", selected: false, backgroundColor:'#432C51' },
        { id: 4, text: "item4", selected: false, backgroundColor:'#535474' },
        { id: 5, text: "item5", selected: false, backgroundColor:'#54A4AF' },
        { id: 6, text: "item6", selected: false, backgroundColor:'#ECBC55' },
        { id: 7, text: "item7", selected: false, backgroundColor:'#E8AA8C' },
        { id: 8, text: "item8", selected: false, backgroundColor:'#F03861' },
        { id: 9, text: "item9", selected: false, backgroundColor:'#FFDEDE' },
        { id: 10, text: "item10", selected: false, backgroundColor:'#1EE494' }
      ]
    };
  }

  handleSelectItem = item => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);  
    const _list = this.state.list;
    for (let i = 0; i < _list.length; i++) {
      if ((_list[i].id === item.id)) {
        _list[i].selected = _list[i].selected ? false : true;
      } else {
        _list[i].selected = false;
      }
    }
    this.setState({ list: _list });
  };

  renderflexTabs = () => {
    return this.state.list
     .map((item, i) => {
      return (
        <FlexTab
          key={i}
          item={item}
          onPress={() => this.handleSelectItem(item)}
        />
      );
    });
  };

  render() {
    return (
     <View style={{flex:1}} >
      <StatusBar barStyle="light-content" />
      <Header />       
      <ScrollView scrollEventThrottle={16} style={styles.scroll} > 
        <View style={styles.container}>  
          {this.renderflexTabs()}
        </View>
      </ScrollView>
    </View>  
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  scroll:{
    marginTop:80
  },
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-around",
    flexWrap: "wrap"
  }
});

//make this component available to the app
export default App;

flexTab.js

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';

// create a component
class FlexTab extends Component {
    render() {
        const {item} = this.props;
        const customStyle={
            height:item.selected ? 360: 180,
            width:item.selected ? 360: 180,
            backgroundColor:item.backgroundColor
        }
        return (
            <TouchableOpacity style={[styles.container, customStyle]} {...this.props} >
                <Text style={styles.textStyle} >{item.text} </Text>
            </TouchableOpacity>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        marginBottom:10,
        alignItems:'center',
        justifyContent:'center'
    },
    textStyle:{

    }
});

//make this component available to the app
export default FlexTab;

header.js

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const Header = (props) => {
    return(
        <View style={styles.container} >
           <View style={styles.menu} > 
            <Icon name="bars" size={30} color="#FFFFFF" />
            <TextInput style={styles.textinput} />
            <Icon name="chevron-up" size={20} color="#FFFFFF" style={styles.chevron} />
           </View> 
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
       flexDirection:'row',
       position:'absolute',
       top:0,
       left:0,
       right:0,
       padding:10,
       height:70,
       backgroundColor:'#5e4689'
    },
    menu:{
        alignSelf:'flex-end',
        alignItems:'center',
        flexDirection:'row',
    },
    textinput:{
        backgroundColor:'#FFFFFF',
        marginLeft:10,
        width:280,
        height:28,
    },
    chevron:{
        marginLeft:10
    }
});

export default Header