DEV Community

Cover image for Fullstacking: Final Styling
Mark Kop
Mark Kop

Posted on

Fullstacking: Final Styling

#reactnative

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

Top comments (0)