React Native Welcome Screen

This is a React Native App using TextInput, custom keyboard types and StyleSheet API.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Code

My process

Built with

• React Native - React Native using Expo Go
• SectionList - For lazy rendering menu items
• StyleSheet - For styles

What I learned

• Create a React Native App using Expo
• Use View, Text, TextInput, ScrollView, KeyboardAvoiding View Components
• Create a Header Component
• Create a Footer Component
• Create a Welcome Screen Component
• Configure TextInput component on the Welcome Screen
• Store user input within TextInput as local state by using useState Hook
• Set behaviors for the virtual keyboard
• Set keyboard types (phone-pad)
• Prevent the keyboard from obstructing the view
• Update Styles of Components to match Scenario
• Extract All Styles to StyleSheet API
• Render Components to the App Component

Here is a code snippet:

export default function WelcomeScreen() {
  //declare variables
  const [firstName, onChangeFirstName] = React.useState('');
  const [lastName, onChangeLastName] = React.useState('');
  const [phoneNumber, onChangePhoneNumber] = React.useState('');
  const [message, onChangeMessage] = React.useState('');

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}>
      <ScrollView indicatorStyle="white" keyboardDismissMode="on-drag">
        <Text style={styles.headerText}>Welcome to Little Lemon</Text>
        <Text style={styles.regularText}>
          Little Lemon is a charming neighborhood bistro that serves simple food
          and classic cocktails in a lively but casual environment. We would
          love to hear more about your experience with us!
        </Text>
        <TextInput
          style={styles.input}
          placeholder="First Name"
          onChangeText={onChangeFirstName}
          value={firstName}
          placeholderTextColor="grey"
        />
        ...
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

Useful resources

• React Native Docs (StyleSheet) - This helped me for all the neccessary React Native styles. I really liked their documentation and will use it going forward.
• React Native Docs (TextInput) - This helped me for accepting user inputs.
• React Native Docs (KeyboardAvoidingView) - This helped me for preventing obstruction of keyboard from the view.

Author

• Website - Marvin Morales Pacis
• LinkedIn - @marventures
• Twitter - @marventures11