Studying React-Native is like — 3 (Components, Components styling)

Core components is components using a lot. We all can say that React Native is a programming between core components that is build into React Native and your UI & custom components.

Lots of beginners make a big mistake that making css to styling React Native apps. React Native supplies Inline Styles and StyleSheet Objects. So, you write your styles in Javascript.

App components is the root components that is rendered in your app.

Look at code below.

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello my brody!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

We can see this code works well.

But how about this code when we remove Text component?

export default function App() {
  return (
    <View style={styles.container}>
     Hello my brody!
      <StatusBar style="auto" />
    </View>
  );
}

We can see it makes error. It is different what we learned from web development.

Why this error happened?

First, view is a boxes and containers that hold other content. View can take some text component or Textinput or button, images like this.

If view is only component without text component, we can’t display text.

So writing text component between view is important to display text.

Moreover, we can put other view inside of view like this.

export default function App() {
  return (
    <View style={styles.container}>
     <View>
      <Text>Second View</Text>
     <View>
     <Text>Hello my brody!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Then let’s add button too.

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

export default function App() {
  return (
    <View style={styles.container}>
     <View>
      <Text>Second View</Text>
     <View>
     <Text>Hello my brody!</Text>
     <Button title='Click!' />
      <StatusBar style="auto" />
    </View>
  );
}

We have to import Button components from react native.

But UI is not just about combining components. We should style them.

I’ll post styling for next story. Thank you.