App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {
  Keyboard,
  StyleSheet,
  View,
  Text,
  TextInput,
  Image,
  Button,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
// Install react-native-linear-gradient: "https://www.npmjs.com/package/react-native-linear-gradient"

const App: () => React$Node = () => {

  // function constructor() {
  //   this.state = {
  //     username,
  //   };
  //   this.handleChangeUsername = this.handleChangeUsername.bind(this);
  // }

  // function handleChangeUsername(username) {
  //   this.setState({
  //     value: username,
  //   });
  // }

  function onPressButton(username) {
    const githubURL = 'https://api.github.com/users';
    return fetch(githubURL)
      .then(response => response.json())
      .then(json => {
        return json.users;
      })
      .catch(error => {
        console.error(error);
      });
  }

  function handleKeyPress(e) {
    if (e.nativeEvent.key === 'Enter') {
      Keyboard.dismiss();
      onPressButton();
    }
  }

  return (
    <View style={styles.body}>
      <View style={styles.container}>
        <Image
          style={styles.image}
          source={require('./assets/github-logo.png')}
        />
        <Text style={styles.title}>GitHub User Grabber</Text>
        <Text style={styles.description}>
          Enter a GitHub username to lookup:
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="e.g. RayanAlkhelaiwi"
          placeholderTextColor="#eff3f6"
          onKeyPresss={handleKeyPress}
          // defaultValue={this.state.username}
          // onChangeText={this.handleChangeUsername}
        />
        <LinearGradient
          colors = {
            ['#34d058', '#28a745'] //Original Gradient colors: #34d058 & #28a745 (From Github's New/Clone-or-download button)
          }
          style={styles.linearGradient}>
          <Text style={styles.button}>Lookup</Text>
        </LinearGradient>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: Colors.black,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  container: {
    justifyContent: 'center',
    margin: 24,
  },
  image: {
    width: 150,
    height: 150,
    alignSelf: 'center',
    marginBottom: 48,
  },
  title: {
    color: Colors.white,
    fontSize: 24,
    fontWeight: '600',
    paddingBottom: 32,
  },
  description: {
    color: Colors.white,
    marginTop: 8,
    fontWeight: '400',
  },
  textInput: {
    color: Colors.white,
  },
  linearGradient: {
    // flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  button: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#fff',
    backgroundColor: 'transparent',
  },
});

export default App;