I’ve built this code in way that I’m not happy with it. because I think I used many lines that I could make it shorter and neat. I want to remove SEARCH function from the App.js file and put it in separate local one so I can include it later. I want to include it before RENDER function. What I have to use here import it as component or script?

import React, { Component } from 'react'; import {   Platform,   StyleSheet,   Button,   Text,   View,   ScrollView,   FlatList,   ActivityIndicator,   Image,   Modal,   TouchableOpacity, } from 'react-native';  export default class App extends Component {   constructor() {     super();     this.state = {       isLoading: true,       type_1: '#ddd',       type_2: '#0078d4',       type_3: '#0078d4',       type_4: '#0078d4',       year_1: '#ddd',       year_2: '#0078d4',       year_3: '#0078d4',       year_4: '#0078d4',       model_1: '#ddd',       model_2: '#0078d4',       model_3: '#0078d4',       model_4: '#0078d4',       type: 'Hyundai',       year: '80-85',       model: 'Seedan',     };   }    componentDidMount() {     this.setState(       {         isLoading: false,       },       function () {         // In this block you can do something with new state.       }     );   }   search(type, data, color) {     if (type == 'type') {       this.setState({ type: data });       switch (color) {         case 'type_1':           this.setState({ type_1: '#ddd' });           this.setState({ type_2: '#0078d4' });           this.setState({ type_3: '#0078d4' });           this.setState({ type_4: '#0078d4' });           break;         case 'type_2':           this.setState({ type_1: '#0078d4' });           this.setState({ type_2: '#ddd' });           this.setState({ type_3: '#0078d4' });           this.setState({ type_4: '#0078d4' });           break;         case 'type_3':           this.setState({ type_1: '#0078d4' });           this.setState({ type_2: '#0078d4' });           this.setState({ type_3: '#ddd' });           this.setState({ type_4: '#0078d4' });           break;         case 'type_4':           this.setState({ type_1: '#0078d4' });           this.setState({ type_2: '#0078d4' });           this.setState({ type_3: '#0078d4' });           this.setState({ type_4: '#ddd' });           break;       }     } else if (type == 'year') {       this.setState({ year: data });       switch (color) {         case 'year_1':           this.setState({ year_1: '#ddd' });           this.setState({ year_2: '#0078d4' });           this.setState({ year_3: '#0078d4' });           this.setState({ year_4: '#0078d4' });           break;         case 'year_2':           this.setState({ year_1: '#0078d4' });           this.setState({ year_2: '#ddd' });           this.setState({ year_3: '#0078d4' });           this.setState({ year_4: '#0078d4' });           break;         case 'year_3':           this.setState({ year_1: '#0078d4' });           this.setState({ year_2: '#0078d4' });           this.setState({ year_3: '#ddd' });           this.setState({ year_4: '#0078d4' });           break;         case 'year_4':           this.setState({ year_1: '#0078d4' });           this.setState({ year_2: '#0078d4' });           this.setState({ year_3: '#0078d4' });           this.setState({ year_4: '#ddd' });           break;       }     } else {       this.setState({ model: data });       switch (color) {         case 'model_1':           this.setState({ model_1: '#ddd' });           this.setState({ model_2: '#0078d4' });           this.setState({ model_3: '#0078d4' });           this.setState({ model_4: '#0078d4' });           break;         case 'model_2':           this.setState({ model_1: '#0078d4' });           this.setState({ model_2: '#ddd' });           this.setState({ model_3: '#0078d4' });           this.setState({ model_4: '#0078d4' });           break;         case 'model_3':           this.setState({ model_1: '#0078d4' });           this.setState({ model_2: '#0078d4' });           this.setState({ model_3: '#ddd' });           this.setState({ model_4: '#0078d4' });           break;         case 'model_4':           this.setState({ model_1: '#0078d4' });           this.setState({ model_2: '#0078d4' });           this.setState({ model_3: '#0078d4' });           this.setState({ model_4: '#ddd' });           break;       }     }   }   render() {     if (this.state.isLoading) {       return (         <View           style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>           <ActivityIndicator size="large" />         </View>       );     }     return (       <View style={styles.MainContainer}>         <View           style={{             backgroundColor: '#f8f8f8',             height: 200,             paddingTop: 30,             justifyContent: 'center',             alignItems: 'center',             shadowColor: 'black',             shadowOffset: { width: 0, height: 2 },             shadowOpacity: 0.2,             elevation: 2,             position: 'relative',           }}>           <Text style={{ fontSize: 20 }}>Choose only on option each time:</Text>           <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>             <TouchableOpacity               onPress={() => {                 this.search('type', 'Hyundai', 'type_1');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.type_1 }]}>                 Hyundai               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('type', 'Mazda', 'type_2');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.type_2 }]}>                 Mazda               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('type', 'Toyota', 'type_3');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.type_3 }]}>                 Toyota               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('type', 'Nissan', 'type_4');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.type_4 }]}>                 Nissan               </Text>             </TouchableOpacity>           </ScrollView>           <ScrollView             horizontal={true}             showsHorizontalScrollIndicator={false}             style={styles.svBX}>             <TouchableOpacity               onPress={() => {                 this.search('year', '80-85', 'year_1');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.year_1 }]}>                 80-85               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('year', '90-95', 'year_2');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.year_2 }]}>                 90-95               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('year', '20-25', 'year_3');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.year_3 }]}>                 20-25               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('year', '70-75', 'year_4');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.year_4 }]}>                 70-75               </Text>             </TouchableOpacity>           </ScrollView>           <ScrollView             horizontal={true}             showsHorizontalScrollIndicator={false}             style={styles.svBX}>             <TouchableOpacity               onPress={() => {                 this.search('model', 'Seedan', 'model_1');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.model_1 }]}>                 Seedan               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('model', '4W', 'model_2');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.model_2 }]}>                 4W               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('model', '2Door', 'model_3');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.model_3 }]}>                 2Door               </Text>             </TouchableOpacity>             <TouchableOpacity               onPress={() => {                 this.search('model', '5Door', 'model_4');               }}>               <Text                 style={[styles.btnSV, { backgroundColor: this.state.model_4 }]}>                 5Door               </Text>             </TouchableOpacity>           </ScrollView>         </View>         <View           style={{             flexDirection: 'row',             justifyContent: 'center',             alignItems: 'center',             marginTop: 20,           }}>           <Text style={styles.text}>{this.state.type}</Text>           <Text style={styles.text}>{this.state.year}</Text>           <Text style={styles.text}>{this.state.model}</Text>         </View>       </View>     );   } }  const styles = StyleSheet.create({   MainContainer: {     justifyContent: 'center',     flex: 1,     paddingTop: Platform.OS === 'ios' ? 20 : 0,   },   btnSV: {     fontSize: 18,     width: 100,     height: 30,     margin: 3,     padding: 3,     borderRadius: 10,   },   svBX: {     //flexDirection: 'row-reverse',     margin: 3,   },   text: {     justifyContent: 'center',     border: '1px dotted #ddd',     width: 100,     height: 30,     marginLeft: 10,     textAlign: 'center',     paddingTop: 5,   }, });