React Native - Events and Styling

This lesson is part of a series on React Native.

Step 3 - Handling Events and Creating a List

You can hook up event handlers and use useState just like you do in React.

THERE IS NO onClick IN REACT NATIVE - USE onPress INSTEAD

Here's the finished version of App.js for Step 3:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, Button, Image} from 'react-native';
import Logo from './assets/icon.png';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={Logo} style={{ width: 100, height: 100, marginBottom: 20 }} />
      <Text style={styles.title}>Your App Name</Text>
      <Text style={styles.label}>Email</Text>
      <TextInput placeholder="Enter your email" style={styles.input} />
      <Text style={styles.label}>Password</Text>
      <TextInput placeholder="Enter your password" style={styles.input} secureTextEntry />
      // SINCE YOU CAN'T STYLE BUTTONS, PUT IT IN A VIEW AND STYLE THE VIEW
      <View style={styles.btnContainer}>
        <Button title="Submit" style={styles.btn} onPress={() => {console.log('Button pressed!')}} />
        // YOU CAN'T STYLE BUTTONS MUCH, SO WE PUT IN INSIDE A VIEW AND STYLE THAT
        // MAKE SURE TO SEE HOW THE CONSOLE LOG WORKS BOTH IN THE BROWSER AND ON THE DEVICE IN EXPO GO
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

// You can think of these as 'class' selectors
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title:{
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    width: '100%',
    paddingHorizontal: 10,
  },
  label:{
    marginBottom: 5,
    fontWeight: 'bold',
    alignItems: 'flex-start',
    width: '100%',
  },
  btnContainer: {
    width: '100%',
    marginTop: 10,
  }

});

Assigning an Array to the Style Prop

• You can assign an array to the style prop
• This allows you to apply the 'title' class, and add to it (or override) the blue bg:

<Text style={[styles.title, {backgroundColor:'blue'}]}>Your App Name</Text>

We'll see using arrays for the style prop in the next lesson.