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
Top comments (0)