Github jobs React Native example (App.js code)

App.js

import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Alert, StyleSheet, Text, View, Button, TextInput, FlatList } from 'react-native';

export default function App() {
  const [keyword, setKeyword] = useState('');
  const [repositories, setRepositories] = useState([]);
 
  const getRepositories = () => {
    fetch(`https://api.github.com/search/repositories?q=${keyword}`)
    .then(response => response.json())
    .then(responseJson => setRepositories(responseJson.items))
    .catch(error => { 
        Alert.alert('Error', error); 
    });    
  }
  
  const listSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "80%",
          backgroundColor: "#CED0CE",
          marginLeft: "10%"
        }}
      />
    );
  };

  return (
    <View style={styles.container}>
      <StatusBar hidden={true} />
      <View style={{flex: 1}}>
        <TextInput 
          style={{fontSize: 18, width: 200}} 
          placeholder='Type keyword' 
          value={keyword}
          onChangeText={text => setKeyword(text)} 
        />
        <Button title="Find" onPress={getRepositories} />
      </View>
      <View style={{flex: 6}}>
        <FlatList 
          style={{marginLeft : "5%"}}
          keyExtractor={(item, index) => index.toString()} 
          renderItem={({item}) => 
            <View style={{margin: 5}}>
              <Text style={{fontSize: 18, fontWeight: "bold"}}>{item.full_name}</Text>
              <Text style={{fontSize: 16 }}>{item.description}</Text>
            </View>}
          data={repositories} 
          ItemSeparatorComponent={listSeparator} /> 
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  marginTop: 20,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
 },
});