Convert React Native functional components to class components - react-native

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;