React Native - Core Components

This lesson is part of a series on React Native.

Step 2 - React Native Core Components

You can't use HTML elements

Instead you must use the core components:

• Text
• View
• Image
• Button
• etc. Here's an overview of the core components

These components are compiled into native components for Android and iOS

Get started by adding the basic components to App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <TextInput placeholder="Enter some text" />
      <Button title="Press me" onPress={() => console.log('Button pressed!')} />
      <Image source={Logo} style={{ width: 100, height: 100, marginBottom: 20 }} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Notes:

• A View component is like a div, and is used to contain other components
• You can nest Views inside of other Views (to group components)
• Text content must be put inside a Text component (or the app will not compile)
• You don't put text inside a Button element, instead you set a title prop:

When things go wrong

Before moving on, it might be good to point out what happens when things go wrong. Remove one of the imports in App.js and notice what happens in the browser, VSCode, and on the device

Styling

• Official Docs on Styling React Natvie
• Colors

NOTE THAT FOR SOME REASON YOU CAN'T REALLY STYLE A BUTTON COMPONENT, INSTEAD YOU HAVE TO CREATE YOUR OWN CUSTOM. WHICH WE'LL DO SOON

To apply styles (similar to CSS but not exactly the same):

• inline (style prop)
• a StyleSheet object

Many of the CSS properties will work in React Native, some will not (such as border), and there are some extra ones added.

Also, there are no inherited properties, like there are in CSS???

The style prop can be applied to most components, but not all of them. For example, you cannot add a style prop to a Button element.

You set the style prop to a JavaScript object:

<Text style={{margin:20}}>Some Text</Text>

This will default to 20px.

It's recommended to use StyleSheet objects, to keep all your style code together.

Notice how the 'container' style is declared in the StyleSheet object and applied as styles.container to the View element:

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

React Native uses a variation of CSS Flexbox, which allows you to control the position of children within a container.

By default, all elements are flex containers (display: flex in CSS) and the default flexDirection is column.

You can set the flex to 1 on a parent to make it take up as much space as possible. I think you can also do this by setting height and width to 100 (a number, not a string).

You can control make the children stretch to 100% of the cross-axis by setting alignItems to "stretch" on the parent. If you set this to something else, like "center" then the children will take up only enough space to accomodate what's inside of them.

The flex property allows you to set the space of a child in relation to it's sibling (if one child has flex 1 and another has flex 2, another will be twice as big)