Expo

Documentation

Styling text

πŸ‘ΆπŸ» We believe in "learning by doing" and so this tutorial emphasizes doing over explaining. If you find yourself typing code that you do not understand, do not worry β€” we will link to you to appropriate resources to help you get a deeper understanding at the end of the tutorial.
Let's change the text that's currently instructing us to "Open up App.js to start working on your app!" to instead instruct our users how to use the app. The app doesn't yet do anything but we can pretend that it does, such is the way of programming.
Change your code according to the following example. Throughout the tutorial, any important code or code that has changed between examples will be highlighted in yellow. You can hover on the highlights (on desktop) or tap them (on mobile) to see more context on the change.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>To share a photo from your phone with a friend, just press the button below!</Text>
    </View>
  );
}

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

😳 Wait, what is this "Try this example on Snack" button!?
Snack is a web-based editor that works similar to a managed Expo project. It's a great way to share code snippets with people and try things out without needing to get a project running on your own computer with expo-cli. Go ahead, press the button. You will see the above code running in it. Switch between iOS, Android, or web. Open it on your device in the Expo client by pressing the "Run" button.

Our text is black and small. We should change the color because, according to some folks, you should never use pure black for text or backgrounds. We'll also increase the font size to make it easier to read.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{color: '#888', fontSize: 18}}> 
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}

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

🎨 Help, I'm not familiar with any color by the name "#888"! #888 is equal parts red, green, and blue, which creates a nice readable grey. React Native uses the same color format as the web, so it supports hex triplets (this is what #888 is), rgba, hsl, and a set of named colors like red, green, blue, and, uh, peru and papayawhip. Read more about colors in React Native here.
Good, that looks better! If you want to learn more about the other styles available on the Text component, you can read more here.
Next we're going to look at adding the logo, let's continue on to looking at the Image component for that.