Fullstacking: Final Styling

Now that we have everything working, at least to a minimum, we can beautify the project

Spoiler:

Buttons

The first visual component we have to work is the input button. Since I didn't want to spend much time trying to make a cool button, I've imported this one: react-native-really-awesome-button.

Not that difficult to swap our buttons to it:

import AwesomeButton from "react-native-really-awesome-button";
// ...
<Button onPress={handleSubmit} title="Add Event"></Button> 
// Button becomes
<AwesomeButton onPress={handleSubmit}> Add Event </AwesomeButton>

Sweet. But we'd like it to be centered, how we'd do that?
Well, React-Native has StyleSheets which are similar to CSS.

import {TextInput, StyleSheet, View} from 'react-native';

<View style={styles.card}>
{//...}
   <AwesomeButton onPress={handleSubmit} style={styles.button} width={styles.button.width}> Add Event </AwesomeButton>
{//...}
</View>

const styles = StyleSheet.create({
  card: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    margin: 10,
    width: 200,
  },
});

Snackbars

Snackbars are great to outputs some message to the user.
Here's how I've used them, for example.

import Snackbar from 'react-native-snackbar';
// ...
    // When completing a UserLoginMutation
    const onCompleted = async payload => {
      if (payload.UserLogin.error) {
        Snackbar.show({
          title: payload.UserLogin.error,
          duration: Snackbar.LENGTH_LONG,
          backgroundColor: 'red',
          color: 'white',
        });
      }
//...

No cool input fields :(

I did some initial search, but didn't find any updated cool TextField to use as text input. If you know anything, please comment below ;D