0Pricing
React Native Academy · Aula

O componente View como contêiner

Use View como o principal contêiner de layout, aninhando várias Views para criar telas estruturadas e entendendo como elas correspondem às caixas de interface nativas.

O componente View como contêiner é uma aula grátis de React Native Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Native Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Native Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

What Is the View Component?

Meet View — the basic box you build every screen with. It is a rectangle that holds other components, mapping to a real native box on iOS and Android.

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

export default function App() {
  return (
    <View>
      <Text>I am inside a View!</Text>
    </View>
  );
}

View Maps to Native UI Boxes

Every View you write becomes a real native box on the device — not HTML in a browser. That is why your app feels as smooth as one built in Swift or Kotlin.

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

// A simple colored box rendered natively
export default function Box() {
  return (
    <View style={styles.box} />
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#4f86f7',
    borderRadius: 12,
  },
});

Nesting Views for Structure

The real power is nesting: put Views inside Views to build rows, columns, and sections. Every View is a Flexbox container, so children just line up.

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

export default function Layout() {
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>
      <View style={styles.body}>
        <Text>Body content here</Text>
      </View>
      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  header: { height: 60, backgroundColor: '#333', justifyContent: 'center', alignItems: 'center' },
  body: { flex: 1, padding: 16 },
  footer: { height: 50, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' },
  headerText: { color: '#fff', fontWeight: 'bold' },
});

View Styling: backgroundColor and Borders

Style a View with the style prop. Reach for backgroundColor, borderRadius, padding, and margin — written in camelCase, with plain numbers, not "16px".

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

export default function Card() {
  return (
    <View style={styles.card}>
      {/* Children go here */}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    padding: 20,
    marginHorizontal: 16,
    marginVertical: 8,
    // Shadow (iOS)
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Shadow (Android)
    elevation: 3,
  },
});

flex: 1 to Fill Available Space

Add flex: 1 and a View stretches to fill its parent. Your outer screen View usually wants this so it spreads across the whole display.

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

export default function SplitScreen() {
  return (
    <View style={{ flex: 1 }}>
      {/* Top half */}
      <View style={{ flex: 1, backgroundColor: '#4f86f7' }} />
      {/* Bottom half */}
      <View style={{ flex: 1, backgroundColor: '#f74f4f' }} />
    </View>
  );
}

Absolute Positioning in View

Need an overlay or floating badge? Set position: absolute, then place it with top, bottom, left, and right. It pops out of the normal Flexbox flow.

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

export default function BadgeExample() {
  return (
    <View style={styles.container}>
      <View style={styles.icon} />
      {/* Badge overlaid in top-right corner */}
      <View style={styles.badge}>
        <Text style={styles.badgeText}>3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 48, height: 48 },
  icon: { width: 48, height: 48, backgroundColor: '#555', borderRadius: 8 },
  badge: {
    position: 'absolute',
    top: -4, right: -4,
    width: 20, height: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    alignItems: 'center', justifyContent: 'center',
  },
  badgeText: { color: '#fff', fontSize: 11, fontWeight: 'bold' },
});

overflow: 'hidden' for Clipping

By default a View lets children spill past its edges. Add overflow: hidden to clip them — perfect for round avatars or neat rounded cards.

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

export default function CircleAvatar() {
  return (
    <View style={styles.circle}>
      <Image
        source={{ uri: 'https://picsum.photos/80' }}
        style={{ width: 80, height: 80 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    overflow: 'hidden', // clips the image to the circle
  },
});

The pointerEvents Prop

The pointerEvents prop decides if a View catches touches. Set it to "none" so taps pass right through — handy for overlays that should not block scrolling.

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

function LoadingOverlay({ visible }) {
  if (!visible) return null;
  return (
    // 'box-none' — overlay blocks no touches (children can)
    // Use 'auto' to block all interaction behind it
    <View style={styles.overlay} pointerEvents='auto'>
      <Text style={styles.text}>Loading...</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { color: '#fff', fontSize: 18 },
});

StyleSheet.absoluteFillObject

StyleSheet.absoluteFillObject is a shortcut that makes a View fill its parent edge to edge. Spread it in for instant full-screen overlays and loaders.

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

// Full-screen background overlay
const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    zIndex: 999,
  },
});

// Equivalent to:
// { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
//   backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 999 }

SafeAreaView for Notch and Home Bar

Phones have notches and home bars. Wrap your screen in SafeAreaView and your content stays clear of them, never hidden behind the hardware.

import { SafeAreaView, StyleSheet, Text } from 'react-native';
// Or use from react-native-safe-area-context for more control
// import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>This content avoids the notch!</Text>
    </SafeAreaView>
  );
}

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

Platform-Specific View Styling

Sometimes iOS and Android need different styles. The Platform module helps: Platform.OS tells you which one, and Platform.select() picks the right value.

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

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    // Platform-specific shadows:
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

Quick Check

Quick check! See how well the View basics stuck. 💪

Lesson Recap

Nice work! View is your native container, flex: 1 makes it fill its parent, and SafeAreaView keeps content off notches. Next up: showing text.

Perguntas Frequentes

A aula “O componente View como contêiner” é grátis?

Sim — o texto completo de “O componente View como contêiner” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Native Academy, atualize para CoddyKit PRO. O curso de React Native Academy inclui 4 aulas no total.

O que vou aprender em “O componente View como contêiner”?

Use View como o principal contêiner de layout, aninhando várias Views para criar telas estruturadas e entendendo como elas correspondem às caixas de interface nativas. Você pratica React Native Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Native Academy?

Nenhuma experiência prévia é necessária. React Native Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O componente View como contêiner”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Native Academy?

Sim. Cada aula de React Native Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O componente View como contêiner
  2. Exibindo texto e estilizando fontes
  3. Exibindo imagens de fontes locais e remotas
  4. Compondo um cartão de perfil simples
← Voltar para React Native Academy