Convert React Native functional components to class components

Question

I'm new to React Native and after following some tutorials I hacked this together but now I want to load some gifs right when the app starts - not after the button click.

Did some research and it looks like it's not possible with functional components and I need to switch to class components to use lifecycle functions like:

componentWillMount(){
        this.setState({data : inputObject});
    }

All the examples I've read so far don't have functions in their components and I can't figure out what to do with them. So if it is possible to call a function when the app starts using this as is please let me know how, if not, how do I convert this code to class component style? Thanks!

import React, {useState} from 'react';
import {
  Dimensions,
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  FlatList,
} from 'react-native';
import SearchInput from './SearchInput';

export default function App() {
  const [allGifResults, setAllGifResults] = useState([]);

  function addSearchResultsHandler(searchTerm) {
    console.log(searchTerm);
    setAllGifResults([]);
    fetchResults(searchTerm);
  }

  function allGifResultsHandler(url) {
    setAllGifResults(currentGifs => [...currentGifs, {id: url, value: url}]);
  }

  function fetchResults(searchTerm) {
    fetch(
      'http://api.giphy.com/v1/gifs/search?q=' +
        searchTerm +
        '&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50',
    )
      .then(response => response.json())
      .then(responseJson => {
        for (let item of responseJson.data) {
          allGifResultsHandler(item.images.fixed_height.url);
          console.log(item.images.fixed_height.url);
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.screen}>
        <SearchInput onSearchButtonPressed={addSearchResultsHandler} />
      </View>

      <FlatList
        keyExtractor={(item, index) => item.id}
        data={allGifResults}
        numColumns={2}
        renderItem={itemData => (
          <Image
            source={itemData.item.value ? {uri: itemData.item.value} : null}
            style={styles.images}
          />
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  screen: {
    margin: 10,
  },
  images: {
    width: Dimensions.get('window').width / 2 - 20,
    height: Dimensions.get('window').width / 2 - 20,
    margin: 10,
  },
});

import React, {useState} from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';

function SearchInput(props) {
  const [searchTerm, setSearchTerm] = useState('');

  function inputHandler(enteredText) {
    setSearchTerm(enteredText);
  }

  return (
    <View style={styles.inputContainer}>
      <TextInput
        placeholder="Search Term"
        style={styles.input}
        onChangeText={inputHandler}
        value={searchTerm}
      />
      <TouchableOpacity
        style={styles.searchButton}
        onPress={props.onSearchButtonPressed.bind(this, searchTerm)}>
        <Text style={styles.searchButtonText}>Search</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 20,
  },
  input: {
    width: '70%',
    borderColor: 'black',
    borderWidth: 1,
    fontSize: 16,
  },
  searchButton: {
    height: 50,
    width: 100,
    backgroundColor: 'lightblue',
    marginLeft: 10,
  },
  searchButtonText: {
    height: 50,
    fontSize: 18,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

export default SearchInput;

Answer 1

    import React, {useState} from 'react';
    import {
      Dimensions,
      StyleSheet,
      SafeAreaView,
      View,
      Image,
      FlatList,
    } from 'react-native';
    import SearchInput from './SearchInput';
    const [allGifResults, setAllGifResults] = useState([]);

    class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {

          };
        this.addSearchResultsHandler = this.addSearchResultsHandler.bind(this);
        this.allGifResultsHandler = this.allGifResultsHandler.bind(this);
        this.fetchResults = this.fetchResults.bind(this);
      }

      addSearchResultsHandler(searchTerm) {
        console.log(searchTerm);
        setAllGifResults([]);
        fetchResults(searchTerm);
      }

      allGifResultsHandler(url) {
        setAllGifResults(currentGifs => [...currentGifs, {id: url, value: url}]);
      }

      fetchResults(searchTerm) {
        fetch(
          'http://api.giphy.com/v1/gifs/search?q=' +
            searchTerm +
            '&api_key=MKSpDwx7kTCbRp23VtVsP4d0EvfwIgSg&limit=50',
        )
          .then(response => response.json())
          .then(responseJson => {
            for (let item of responseJson.data) {
              allGifResultsHandler(item.images.fixed_height.url);
              console.log(item.images.fixed_height.url);
            }
          })
          .catch(error => {
            console.error(error);
          });
      }
      render(){
         return (
            <SafeAreaView style={styles.container}>
              <View style={styles.screen}>
                <SearchInput onSearchButtonPressed={(data)=> this.addSearchResultsHandler(data)} />
              </View>

              <FlatList
                keyExtractor={(item, index) => item.id}
                data={allGifResults}
                numColumns={2}
                renderItem={itemData => (
                  <Image
                    source={itemData.item.value ? {uri: itemData.item.value} : null}
                    style={styles.images}
                  />
                )}
              />
            </SafeAreaView>
          );
      }
    }

    export default App;

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
      },
      screen: {
        margin: 10,
      },
      images: {
        width: Dimensions.get('window').width / 2 - 20,
        height: Dimensions.get('window').width / 2 - 20,
        margin: 10,
      },
    });

   import React, {useState} from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet,
} from 'react-native';

const [searchTerm, setSearchTerm] = useState('');
class SearchInput extends React.Component {
  constructor(props) {
      super(props);
      this.state = {

      };
    this.inputHandler = this.inputHandler.bind(this);
  }

  inputHandler(enteredText) {
    setSearchTerm(enteredText);
  }

  render(){
    return (
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Search Term"
          style={styles.input}
          onChangeText={inputHandler}
          value={searchTerm}
        />
        <TouchableOpacity
          style={styles.searchButton}
          onPress={props.onSearchButtonPressed.bind(this, searchTerm)}>
          <Text style={styles.searchButtonText}>Search</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
export default SearchInput;


const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 20,
  },
  input: {
    width: '70%',
    borderColor: 'black',
    borderWidth: 1,
    fontSize: 16,
  },
  searchButton: {
    height: 50,
    width: 100,
    backgroundColor: 'lightblue',
    marginLeft: 10,
  },
  searchButtonText: {
    height: 50,
    fontSize: 18,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

export default SearchInput;