10. Componente StatusBar

 

Tutorial: Componente StatusBar en React Native

📱 Parte 10: Componente StatusBar - Control Total de la Barra de Estado

🎯 Objetivo:

Aprender a usar el componente StatusBar de React Native para controlar la apariencia y comportamiento de la barra de estado en dispositivos iOS y Android.

📸 Introducción a StatusBar

1.1 ¿Qué es la StatusBar?

La StatusBar es la barra superior que muestra información del sistema:

text

┌─────────────────────────────────┐

│ 📶  5:28 PM  🔋 84%             │ ← ¡ESTA ES LA STATUSBAR

crea un tutorial con el tema: 10. Componente StatusBar en react native

Tutorial: Componente StatusBar en React Native

📱 Parte 10: Componente StatusBar - Control Total de la Barra de Estado

🎯 Objetivo:

Aprender a usar el componente StatusBar de React Native para controlar la apariencia y comportamiento de la barra de estado en dispositivos iOS y Android.

📸 Introducción a StatusBar

1.1 ¿Qué es la StatusBar?

La StatusBar es la barra superior que muestra información del sistema:

text

┌─────────────────────────────────┐

│ 📶  5:28 PM  🔋 84%             │ ← ¡ESTA ES LA STATUSBAR!

│                                 │

│        TU APLICACIÓN            │

│                                 │

│                                 │

│                                 │

└─────────────────────────────────┘

Elementos típicos de la StatusBar:

  • ⏰ Hora actual

  • 📶 Indicador de señal

  • 🔋 Nivel de batería

  • 📡 Iconos de conexión (Wi-Fi, datos móviles)

  • 🔔 Notificaciones pendientes

1.2 ¿Por qué es importante controlarla?

  1. Consistencia visual con el diseño de tu app

  2. Legibilidad del contenido

  3. Experiencia de usuario mejorada

  4. Compatibilidad con diferentes dispositivos

📦 Paso 1: Importación y Uso Básico

1.1 Importar el Componente

javascript

import React from 'react';

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

1.2 Uso Más Simple

javascript

const AppBasica = () => {

  return (

    <View style={styles.container}>

      <StatusBar />

      <Text>Mi Aplicación</Text>

    </View>

  );

};

🎨 Paso 2: Propiedades Principales de StatusBar

2.1 Control de Apariencia (barStyle)

javascript

const App = () => {

  return (

    <View style={styles.container}>

      {/* Barra de estado con texto oscuro */}

      <StatusBar barStyle="dark-content" />

      

      <Text>Texto oscuro en StatusBar</Text>

    </View>

  );

};

Opciones de barStyle:

  • "default" - Por defecto (depende del sistema)

  • "light-content" - Texto blanco ⭐

  • "dark-content" - Texto negro ⭐

2.2 Color de Fondo (backgroundColor) - Solo Android

javascript

<StatusBar 

  barStyle="light-content"

  backgroundColor="#6200ee"  // ⚠️ Solo funciona en Android

/>

2.3 Control de Visibilidad

javascript

<StatusBar 

  hidden={true}  // Oculta la StatusBar

/>

📱 Paso 3: Diferencias entre iOS y Android

3.1 Ejemplo con Plataformas Específicas

javascript

import { Platform, StatusBar } from 'react-native';


const App = () => {

  return (

    <View style={styles.container}>

      <StatusBar 

        // Configuración específica por plataforma

        barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'}

        backgroundColor={Platform.OS === 'android' ? '#6200ee' : 'transparent'}

        translucent={Platform.OS === 'android'} // Solo Android

      />

      <Text>App con StatusBar optimizada</Text>

    </View>

  );

};

3.2 Tabla de Compatibilidad

Propiedad

iOS

Android

barStyle

✅

✅

backgroundColor

❌

✅

translucent

❌

✅

hidden

✅

✅

animated

✅

✅

networkActivityIndicatorVisible

✅

❌

🎯 Paso 4: Ejemplos Prácticos Comunes

4.1 Pantalla de Login con StatusBar Clara

javascript

const LoginScreen = () => {

  return (

    <View style={styles.loginContainer}>

      {/* StatusBar con texto blanco sobre fondo de imagen */}

      <StatusBar 

        barStyle="light-content"

        translucent={true}  // Android: StatusBar transparente

        backgroundColor="transparent"

      />

      

      <Image 

        source={require('./background.jpg')}

        style={StyleSheet.absoluteFillObject}

      />

      

      <Text style={styles.loginTitle}>Iniciar Sesión</Text>

      {/* Resto del formulario */}

    </View>

  );

};

4.2 Pantalla con Header de Color

javascript

const HomeScreen = () => {

  return (

    <View style={styles.container}>

      {/* StatusBar que combina con el header */}

      <StatusBar 

        barStyle="light-content"

        backgroundColor="#1976d2"  // Mismo color que el header

      />

      

      {/* Header */}

      <View style={styles.header}>

        <Text style={styles.headerTitle}>Mi App</Text>

      </View>

      

      {/* Contenido */}

      <View style={styles.content}>

        <Text>Contenido principal</Text>

      </View>

    </View>

  );

};


const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  header: {

    height: 60,

    backgroundColor: '#1976d2',

    justifyContent: 'center',

    alignItems: 'center',

  },

  headerTitle: {

    color: 'white',

    fontSize: 20,

    fontWeight: 'bold',

  },

  content: {

    flex: 1,

    padding: 20,

  },

});

4.3 StatusBar Dinámica (Cambia con Scroll)

javascript

import React, { useState } from 'react';

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


const DynamicStatusBarScreen = () => {

  const [isScrolled, setIsScrolled] = useState(false);


  const handleScroll = (event) => {

    const offsetY = event.nativeEvent.contentOffset.y;

    setIsScrolled(offsetY > 50);

  };


  return (

    <View style={{ flex: 1 }}>

      {/* StatusBar que cambia al hacer scroll */}

      <StatusBar 

        barStyle={isScrolled ? 'dark-content' : 'light-content'}

        backgroundColor={isScrolled ? 'white' : 'transparent'}

        animated={true}

      />

      

      <ScrollView 

        onScroll={handleScroll}

        scrollEventThrottle={16}

      >

        {/* Contenido largo */}

        {Array.from({ length: 50 }).map((_, index) => (

          <Text key={index} style={{ padding: 20 }}>

            Elemento {index + 1}

          </Text>

        ))}

      </ScrollView>

    </View>

  );

};

⚡ Paso 5: StatusBar API (Métodos Estáticos)

5.1 Métodos Disponibles

javascript

import { StatusBar } from 'react-native';


// Cambiar propiedades dinámicamente

StatusBar.setBarStyle('light-content', true); // animated

StatusBar.setBackgroundColor('#000000', true); // Android only

StatusBar.setHidden(true, 'fade'); // 'none', 'fade', 'slide'

StatusBar.setTranslucent(true); // Android only

5.2 Ejemplo: Cambiar StatusBar en Diferentes Pantallas

javascript

import React, { useEffect } from 'react';

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


const ProfileScreen = () => {

  useEffect(() => {

    // Al montar la pantalla

    StatusBar.setBarStyle('dark-content', true);

    

    // Al desmontar la pantalla

    return () => {

      StatusBar.setBarStyle('light-content', true);

    };

  }, []);


  return (

    <View style={{ flex: 1 }}>

      <Text>Perfil del Usuario</Text>

    </View>

  );

};

5.3 Obtener Valores Actuales

javascript

// Consultar valores actuales

const currentHeight = StatusBar.currentHeight; // Solo Android

console.log('Altura de StatusBar:', currentHeight);

🔧 Paso 6: Combinación con SafeAreaView

6.1 Ejemplo Completo con Ambos Componentes

javascript

import React from 'react';

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


const AppCompleta = () => {

  return (

    <>

      <StatusBar 

        barStyle="light-content"

        backgroundColor="#6200ee"

      />

      

      <SafeAreaView style={{ flex: 1, backgroundColor: '#6200ee' }}>

        {/* Header dentro del SafeArea */}

        <View style={{ padding: 20 }}>

          <Text style={{ color: 'white', fontSize: 24 }}>

            Mi Aplicación

          </Text>

        </View>

        

        {/* Contenido principal */}

        <View style={{ 

          flex: 1, 

          backgroundColor: 'white',

          borderTopLeftRadius: 20,

          borderTopRightRadius: 20,

          padding: 20 

        }}>

          <Text>Contenido principal aquí</Text>

        </View>

      </SafeAreaView>

    </>

  );

};

6.2 Manejo de Alturas en Android

javascript

import { Platform, StatusBar } from 'react-native';


const getStatusBarHeight = () => {

  if (Platform.OS === 'android') {

    return StatusBar.currentHeight || 0;

  }

  return 0; // iOS maneja esto automáticamente con SafeAreaView

};


const App = () => {

  const statusBarHeight = getStatusBarHeight();

  

  return (

    <View style={{ flex: 1 }}>

      <StatusBar backgroundColor="#6200ee" />

      

      {/* Espacio para la StatusBar en Android */}

      {Platform.OS === 'android' && (

        <View style={{ height: statusBarHeight, backgroundColor: '#6200ee' }} />

      )}

      

      {/* Resto de la app */}

      <Text>Contenido</Text>

    </View>

  );

};

📊 Paso 7: Casos de Uso Avanzados

7.1 StatusBar en Navegación entre Pantallas

javascript

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import { StatusBar } from 'react-native';


const Stack = createStackNavigator();


const App = () => {

  return (

    <>

      <StatusBar 

        barStyle="dark-content"

        backgroundColor="transparent"

        translucent={true}

      />

      

      <NavigationContainer>

        <Stack.Navigator

          screenOptions={{

            headerStyle: {

              backgroundColor: '#fff',

              elevation: 0, // Android

              shadowOpacity: 0, // iOS

            },

            headerTintColor: '#000',

          }}

        >

          <Stack.Screen name="Home" component={HomeScreen} />

          <Stack.Screen 

            name="Details" 

            component={DetailsScreen}

            options={{

              headerTransparent: true,

              headerTintColor: '#fff',

            }}

          />

        </Stack.Navigator>

      </NavigationContainer>

    </>

  );

};

7.2 StatusBar para Modo Oscuro/Claro

javascript

import React, { useState } from 'react';

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


const ThemeToggleScreen = () => {

  const [isDarkMode, setIsDarkMode] = useState(false);


  return (

    <View style={{

      flex: 1,

      backgroundColor: isDarkMode ? '#121212' : '#ffffff',

    }}>

      <StatusBar 

        barStyle={isDarkMode ? 'light-content' : 'dark-content'}

        backgroundColor={isDarkMode ? '#121212' : '#ffffff'}

      />

      

      <View style={{ padding: 20 }}>

        <Text style={{ 

          color: isDarkMode ? '#ffffff' : '#000000',

          fontSize: 24,

          marginBottom: 20 

        }}>

          Modo {isDarkMode ? 'Oscuro' : 'Claro'}

        </Text>

        

        <Switch

          value={isDarkMode}

          onValueChange={setIsDarkMode}

        />

      </View>

    </View>

  );

};

7.3 StatusBar con Animaciones

javascript

import React, { useRef } from 'react';

import { Animated, StatusBar, Button } from 'react-native';


const AnimatedStatusBar = () => {

  const fadeAnim = useRef(new Animated.Value(0)).current;


  const fadeInStatusBar = () => {

    StatusBar.setHidden(false, 'fade');

  };


  const fadeOutStatusBar = () => {

    StatusBar.setHidden(true, 'fade');

  };


  const slideInStatusBar = () => {

    StatusBar.setHidden(false, 'slide');

  };


  return (

    <View style={{ flex: 1, padding: 20 }}>

      <StatusBar 

        barStyle="dark-content"

        animated={true}

      />

      

      <Button title="Mostrar (Fade)" onPress={fadeInStatusBar} />

      <Button title="Ocultar (Fade)" onPress={fadeOutStatusBar} />

      <Button title="Mostrar (Slide)" onPress={slideInStatusBar} />

    </View>

  );

};

⚠️ Paso 8: Problemas Comunes y Soluciones

❌ Problema 1: StatusBar no se ve en iOS

Solución:

javascript

// iOS necesita SafeAreaView para manejar correctamente la StatusBar

<>

  <StatusBar barStyle="dark-content" />

  <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>

    <Text>Contenido</Text>

  </SafeAreaView>

</>

❌ Problema 2: Color no cambia en iOS

Solución:

javascript

// iOS no soporta backgroundColor directamente

<StatusBar 

  barStyle="light-content"

  translucent={false}

/>

// Luego usa un View con el color deseado

<View style={{ 

  height: Platform.OS === 'ios' ? 44 : StatusBar.currentHeight,

  backgroundColor: 'tu-color' 

}} />

❌ Problema 3: Contenido detrás de StatusBar en Android

Solución:

javascript

<>

  <StatusBar translucent backgroundColor="transparent" />

  <View style={{ 

    flex: 1,

    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 

  }}>

    <Text>Contenido</Text>

  </View>

</>

📋 Paso 9: Mejores Prácticas

9.1 Checklist para StatusBar

  • Testear en iOS y Android por separado

  • Usar animated={true} para transiciones suaves

  • Combinar con SafeAreaView en iOS

  • Considerar el modo oscuro/claro del sistema

  • Manejar cambios de orientación (landscape/portrait)

9.2 Código de Configuración Óptima

javascript

import { Platform, StatusBar } from 'react-native';


const configureStatusBar = () => {

  if (Platform.OS === 'android') {

    StatusBar.setTranslucent(true);

    StatusBar.setBackgroundColor('transparent');

  }

  StatusBar.setBarStyle('light-content', true);

};


// Llamar al inicio de la app

configureStatusBar();

🎯 Ejercicio Práctico

Crea una aplicación con:

  1. ✅ Pantalla de inicio con StatusBar clara sobre imagen

  2. ✅ Pantalla de perfil con StatusBar oscura

  3. ✅ Botón para alternar visibilidad de StatusBar con animación

  4. ✅ Header que cambia color junto con la StatusBar

Bonus: Implementa detección automática de modo oscuro/claro del sistema.

📚 Resumen de Propiedades

Propiedad

Valores

Plataforma

barStyle

'default', 'light-content', 'dark-content'

iOS/Android

backgroundColor

Cualquier color

Solo Android

translucent

true/false

Solo Android

hidden

true/false

iOS/Android

animated

true/false

iOS/Android

networkActivityIndicatorVisible

true/false

Solo iOS

🎬 Próximo Tutorial

En el siguiente video aprenderemos:

  • Componente Image y ImageBackground

  • Carga de imágenes locales y remotas

  • Optimización de imágenes

  • Efectos y estilos en imágenes

✅ ¡Ahora dominas el control completo de la StatusBar! Recuerda que una StatusBar bien configurada mejora significativamente la experiencia de usuario y la apariencia profesional de tu aplicación.

Comentarios

Publicar un comentario

Entradas más populares de este blog

18. Visualizar nuestros componentes limpios con StyleSheet

  Tema: 18. Visualizar nuestros componentes limpios con StyleSheet Objetivo: Aprender a organizar y limpiar los estilos de componentes en React Native utilizando StyleSheet.create() , separando la lógica de presentación del JSX para mejorar la legibilidad y mantenibilidad del código. Contenido del tutorial: 1. ¿Qué es StyleSheet? Definición: Una API de React Native que permite definir estilos de manera estructurada y optimizada. Ventajas: Mejora el rendimiento (caché de estilos). Separa estilos de la lógica del componente. Facilita el mantenimiento y reutilización. Valida los nombres de propiedades en tiempo de desarrollo. 2. Importar StyleSheet Se importa desde react-native : jsx import { StyleSheet } from 'react-native' ; 3. Estructura básica de StyleSheet.create() Sintaxis: jsx const styles = StyleSheet . create ({    nombreDelEstilo : {      propiedad1 : valor1 ,      propiedad2 : valor2 ,    },    o...
Leer más

15. Componente Image

  Tutorial: Componente Image en React Native 📱 Parte 15: Componente Image - Mostrando Imágenes en tu App 🎯 Objetivo: Aprender a usar el componente Image para mostrar imágenes en React Native desde diferentes fuentes: archivos locales, URLs remotas y base64. 📸 Analizando el Ejemplo de la Imagen Observando el código de la imagen: javascript < Text style = {{ margin : 5 , fontSize : 20 , fontWeight : 'bold' , color : 'gray' }} >   Componente Imagen </ Text > { /* Imagen local */ } < Image   style = {{ width : 150 , height : 150 }}   source = { require ( './imgs/react-native.jpg' )} /> { /* Imagen remota */ } < Image   style = {{ width : 150 , height : 150 }}   source = {{ uri : 'https://reactnative.dev/img/tiny_logo.png' }} /> Resultado visual esperado: text ┌─────────────────────────────────┐ │ Componente Imagen               │ │         ...
Leer más

Tema: 23. Justify Content en Flexbox para Column (Columna) en React Nativ

Objetivo: Comprender y aplicar la propiedad justifyContent en contenedores con flexDirection: 'column' (valor por defecto) para controlar la distribución vertical de elementos en React Native. Contenido del tutorial: 1. Introducción a justifyContent en columnas Por defecto en React Native: flexDirection: 'column' Cuando usamos flexDirection: 'column' : Eje principal → Vertical (de arriba a abajo) Eje cruzado → Horizontal (de izquierda a derecha) justifyContent controla: Distribución de elementos a lo largo del eje vertical 2. Configuración inicial del ejemplo Código base para columnas: jsx import React from 'react' ; import { View , Text , StyleSheet } from 'react-native' ; const App = () => {    return (      < View style ={ styles . container }>        < View style ={ styles . boxSize }>          < Text style ={ styles . text }> 1 </ Text > ...
Leer más