react-native-telegram-dark-theme

     

Note: Make sure you have install react-native-gesture-handler, react-native-reanimated, @shopify/react-native-skia instructions till step, before proceeding.

Installation

yarn add react-native-telegram-dark-theme

npm install react-native-telegram-dark-theme

Usage

ThemeProvider

Wrap the App.js or App.tsx with ThemeProvider and provides the dafult colors.

import {ThemeProvider} from 'react-native-telegram-dark-theme';

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

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

function App() {
  return (
    <ThemeProvider lightColors={lightColors} darkColors={darkColors}>
      {/* ... */}
    </ThemeProvider>
  );
}

High level APIs

useTheme

Returns an object. colors .

import {useTheme} from 'react-native-telegram-dark-theme';

function Component() {
  const {colors} = useTheme();
  return <View style={{backgroundColor: colors?.black}} />;
}

ThemeButton

Toggle the theme.if you want to use your own button pass a prop to ThemeButton button

import {ThemeButton} from 'react-native-telegram-dark-theme';

function Component() {
  const {colors, colorScheme} = useTheme();
  const button = (
    <Text>{colorScheme === 'dark' ? 'switch to light' : 'switch to dark'}</Text>
  );

  return (
    <View style={{backgroundColor: colors?.black}}>
      <ThemeButton button={button} />
    </View>
  );
}

Requirements

iOS

• Xcode 11
• React Native 0.70.x or higher
• iOS 13 to see it in action

Android

• Android 10 or Android Auto to see it in action