react-native-appearance

react-native-appearance — это библиотека для React Native, которая позволяет управлять и реагировать на изменения цветовой схемы (темной и светлой) на уровне системы. Это особенно полезно для создания приложений, которые поддерживают различные цветовые темы, адаптируясь к предпочтениям пользователя.

Основные возможности react-native-appearance

• Поддержка автоматического переключения между темной и светлой темами.
• Интеграция с системными настройками цветовой схемы.
• Возможность создания пользовательских тем и их динамическое переключение.
• Простота использования и интеграции с существующими проектами React Native.

Установка

Для использования react-native-appearance необходимо установить пакет react-native-appearance и связанный с ним @react-native-community/hooks для поддержки хуков.

npm install react-native-appearance @react-native-community/hooks

Или с использованием Yarn:

yarn add react-native-appearance @react-native-community/hooks

Основное использование

Для начала работы с react-native-appearance, импортируйте необходимые компоненты и хуки, а затем используйте их в своем компоненте.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Appearance, useColorScheme } from 'react-native-appearance';

const App = () => {
  const colorScheme = useColorScheme();

  const styles = colorScheme === 'dark' ? darkStyles : lightStyles;

  return (
    
      Current theme: {colorScheme}
    
  );
};

const lightStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  text: {
    color: 'black',
  },
});

const darkStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  text: {
    color: 'white',
  },
});

export default App;

Динамическое изменение темы

Вы можете динамически изменять тему вашего приложения, реагируя на изменения системных настроек или пользовательские действия.

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Appearance, AppearanceProvider, useColorScheme } from 'react-native-appearance';

const App = () => {
  const [theme, setTheme] = useState(useColorScheme());

  useEffect(() => {
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      setTheme(colorScheme);
    });

    return () => subscription.remove();
  }, []);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
  };

  const styles = theme === 'dark' ? darkStyles : lightStyles;

  return (
    
      
        Current theme: {theme}
        
      
    
  );
};

const lightStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  text: {
    color: 'black',
  },
});

const darkStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  text: {
    color: 'white',
  },
});

export default App;

Создание пользовательских тем

Вы можете создать собственные темы и динамически переключаться между ними в зависимости от предпочтений пользователя.

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Appearance, AppearanceProvider, useColorScheme } from 'react-native-appearance';

const lightTheme = {
  background: 'white',
  text: 'black',
};

const darkTheme = {
  background: 'black',
  text: 'white',
};

const App = () => {
  const systemTheme = useColorScheme();
  const [theme, setTheme] = useState(systemTheme === 'dark' ? darkTheme : lightTheme);

  useEffect(() => {
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      setTheme(colorScheme === 'dark' ? darkTheme : lightTheme);
    });

    return () => subscription.remove();
  }, []);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === darkTheme ? lightTheme : darkTheme));
  };

  return (
    
      
        Current theme: {theme === darkTheme ? 'dark' : 'light'}
        
      
    
  );
};

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

export default App;

Заключение

react-native-appearance — это мощный инструмент для управления цветовой схемой в приложениях React Native. Он позволяет легко адаптироваться к системным настройкам и предпочтениям пользователя, создавая более интуитивно понятные и приятные интерфейсы. Благодаря простоте использования и гибкости, эта библиотека является отличным выбором для разработчиков, стремящихся улучшить пользовательский опыт в своих приложениях.