DEV Community

Cover image for Fullstacking: Final Styling
Mark Kop
Mark Kop

Posted on

2 2

Fullstacking: Final Styling

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

Spoiler:
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

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',
        });
      }
//...
Enter fullscreen mode Exit fullscreen mode

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

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️