react-native-bpk-appearance

> Backpack React Native appearance.

Installation

``sh
npm install react-native-bpk-appearance --save-dev
`

Because this package ships with native code, it is also necessary to add some native dependencies to your RN project:

$3

Append |uiMode to the android:configChanges prop of in AndroidManifest.xml. Example:

`xml
android:name=".MainActivity"
android:exported="true"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
`

Add the following configurations to gradle:

1. Define the react-native-bpk-appearance project in your settings.gradle file:

`groovy
include ':react-native-bpk-appearance'
project(':react-native-bpk-appearance').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bpk-appearance/src/android')
`

2. Add react-native-bpk-appearance as a dependency in your app/module build.gradle file:

`groovy
dependencies {
implementation project(':react-native-bpk-appearance')
}
`

If you have defined project-wide properties in your root build.gradle, this library will detect the presence of the following properties:

`groovy
ext {
compileSdkVersion = 28
targetSdkVersion = 28
minSdkVersion = 21
buildToolsVersion = "28.0.3"
}
`

If you haven't or are using the pre compiled version bellow, it will use the values shown above.

#### Pre compiled version

Alternatively, the pre compiled version is available on Skyscanner's internal Artifactory. Make sure you have the infrastructure-maven registry configured and are logged in, then add the following dependency to your build.gradle file:

`groovy
dependencies {
implementation 'net.skyscanner.backpack:react-native-bpk-appearance:'
}
`

Note: The version should be the same used for the npm package.

#### Importing the bridge package

After you have installed the lib, import the DialogPackage() in your react application:

`java
import com.codemotionapps.reactnativedarkmode.DarkModePackage

....

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new DarkModePackage()
);
}
`

$3

Add a dependency to your Podfile using the path to the NPM package as follows:

pod 'ReactNativeDarkMode', path: '../node_modules/react-native-bpk-appearance/node_modules/react-native-dark-mode/ReactNativeDarkMode.podspec'

Usage

First wrap your app with BpkAppearanceProvider

`js
import {
useBpkDynamicValue,
} from 'react-native-bpk-appearance';

const App = ({ children }) => (


{children}


);
`

Now you can use the provided hooks to react to changes in the system appearance

`js
import React from 'react';
import { View } from 'react-native';
import BpkImage from 'react-native-bpk-component-image';
import {
BpkDynamicStyleSheet,
useBpkDynamicStyleSheet,
useBpkDynamicValue,
} from 'react-native-bpk-appearance';
import {
backgroundDarkColor,
backgroundLightColor,
} from 'bpk-tokens/tokens/base.react.native';

const style = BpkDynamicStyleSheet.create({
view: {
backgroundColor: { light: backgroundLightColor, dark: backgroundDarkColor }
},
image: {
light: {
borderWidth: 1,
borderColor: '#d6d7da',
},
dark: {
backgroundColor: 'rgb(205, 205, 215)'
},
},
});

const UserProfile = () => {
const currentStyle = useBpkDynamicStyleSheet(style);
const image = useBpkDynamicValue({ light: './user-profile-light.png', dark: './user-profile-dark.png' });

return (



);
};
`

For non-functional components use BpkAppearanceConsumer or withBpkAppearance HOC and the unpack* functions. (See full in API section bellow).

$3

`js
import React, { Component, type Config } from 'react';
import { View } from 'react-native';
import BpkText from 'react-native-bpk-component-text';
import {
BpkDynamicStyleSheet,
unpackBpkDynamicValue,
BpkAppearanceConsumer,
} from 'react-native-bpk-appearance';
import {
backgroundDarkColor,
backgroundLightColor,
} from 'bpk-tokens/tokens/base.react.native';

const style = BpkDynamicStyleSheet.create({
view: {
backgroundColor: { light: backgroundLightColor, dark: backgroundDarkColor }
}
});

type Props = {
user: Object,
}

const defaultProps = {
user: { guest: true }
};

class UserProfile extends Component {
render() {
const { user } = this.props;

return (

{({ bpkAppearance }) => {
const currentStyle = unpackBpkDynamicValue(style, bpkAppearance);
return (

{user.name}

)
}}

);
}
};

export default BpkAppearanceConsumer;
`

$3

`js
import React, { Component, type Config } from 'react';
import { View } from 'react-native';
import BpkText from 'react-native-bpk-component-text';
import {
BpkDynamicStyleSheet,
withBpkAppearance,
unpackBpkDynamicValue,
type WithBpkAppearanceInjectedProps,
} from 'react-native-bpk-appearance';
import {
backgroundDarkColor,
backgroundLightColor,
} from 'bpk-tokens/tokens/base.react.native';

const style = BpkDynamicStyleSheet.create({
view: {
backgroundColor: { light: backgroundLightColor, dark: backgroundDarkColor }
}
});

type Props = {
user: Object,
}

const defaultProps = {
user: { guest: true }
};

class UserProfile extends Component {
render() {
const { bpkAppearance, user } = this.props;
const currentStyle = unpackBpkDynamicValue(style, bpkAppearance);

return (

{user.name}

);
}
};

type ComponentConfig = Config;
export default withBpkAppearance(UserProfile);
`

API

#### Table of Contents

- useBpkAppearance
- useBpkColorScheme
- useBpkDynamicValue
- Parameters
- Examples
- useBpkDynamicStyle
- Parameters
- Examples
- useBpkDynamicStyleSheet
- Parameters
- Examples
- BpkAppearanceConsumer
- Parameters
- Examples
- BpkDynamicStyleSheet
- create
- Parameters
- Examples
- withBpkAppearance
- Parameters
- Examples
- isBpkDynamicValue
- Parameters
- unpackBpkDynamicValue
- Parameters
- Examples
- unpackBpkDynamicStyle
- Parameters
- Examples

$3

Fetch the current appearance as provided by the nearest [BpkAppearanceProvider]

Returns BpkAppearancePreferences the current appearance

$3

Fetch the current color scheme as provided by the nearest [BpkAppearanceProvider]

Returns ColorSchemeName the current color scheme

$3

Takes in a BpkDynamicValue and returns the correct value for the
current color scheme as provided by the nearest [BpkAppearanceProvider]

#### Parameters

- value Object a dynamic value.

#### Examples

`javascript
const color = useBpkDynamicValue({ light: 'black', dark: 'white' })
`

Returns mixed the value for the current color scheme.
If value is not a valid dynamic value it will be returned back

$3

Takes in a style object and returns the correct value for all properties,
based on the current color scheme as provided by the nearest [BpkAppearanceProvider]

#### Parameters

- style Object the style object

#### Examples

`javascript
const color = useBpkDynamicStyle({
color: { light: 'black', dark: 'white' },
flex: 1,
});
`

Returns Object object with mapped properties for the current color scheme

$3

Takes in a BpkDynamicStyleSheet and returns the correct value for
the current color scheme as provided by the nearest [BpkAppearanceProvider]

#### Parameters

- style BpkDynamicStyle the dynamic stylesheet

#### Examples

`javascript
const dynamicStyles = BpkDynamicStyleSheet.create({
color: { light: 'black', dark: 'white' },
flex: 1,
})
const styles = useBpkDynamicStyleSheet(dynamicStyles);
`

Returns BpkDynamicStyleProp the current stylesheet

$3

- See:

A render prop component that provides the current BpkAppearance
as provided by the nearest [BpkAppearanceProvider].

NOTE: This component should mainly be used in class components, for
functional components we recommend using the provided hooks.

#### Parameters

- children Function Function that will receive the current appearance and should return a react Node.
- children.children

#### Examples

`javascript

{({ bpkAppearance }) => {
const logo = unpackDynamicValue({ light: 'light.png', dark: 'dark.png' }, bpkAppearance);
return
}}

`

Returns Node a react Node.

$3

$3

Creates a new dynamic stylesheet that transforms all BpkDynamicValues into
a plain StyleSheet for each color scheme.

This should generally be used in conjunction with useBpkDynamicStyleSheet hook.

#### Parameters

- obj Object a style containing dynamic values

#### Examples

`javascript
BpkDynamicStyleSheet.create({
view: {
shadowColor: { light: '#fff', dark: '#ff0' },
}
});
`

`javascript
BpkDynamicStyleSheet.create({
view: {
light: {
borderWidth: 1,
borderColor: '#d6d7da',
},
dark: {
backgroundColor: 'rgb(205, 205, 215)'
},
}
});
`

Returns BpkDynamicStyle an object containing a plain stylesheet for each color scheme.

$3

This HOC wraps a component and provides the current BpkAppearancePreferences
as provided by the nearest BpkAppearanceProvider.

NOTE: If you are using a functional component use one of the provided hooks instead.

#### Parameters

- Component Component the component to be wrapped

#### Examples

`javascript
import React, { type Config } from 'react';
import { type WithBpkAppearanceInjectedProps, withBpkAppearance } from 'react-native-bpk-appearance';

class MyComponent extends Component {
render() {
const { bpkAppearance, ...rest } = this.props;
....
}
}

export default withBpkAppearance>(MyComponent);
`

Returns Component the wrapped component with an extra bpkAppearance prop.

$3

Check if a value is a BpkDynamicValue

#### Parameters

- value mixed the value to be checked

Returns boolean true if is a BpkDynamicValue or false otherwise

$3

Takes in a BpkDynamicValue and returns the correct value for provided appearance.

#### Parameters

- value mixed a dynamic value.
- appearance Object the appearance preferences.

#### Examples

`javascript
const color = unpackBpkDynamicValue({ light: 'black', dark: 'white' }, bpkAppearance)
`

Returns mixed the value for the current color scheme.
If value is not a valid dynamic value it will be returned back

$3

Takes in a style object and returns the correct value for all properties,
based on the current color scheme as provided by the nearest [BpkAppearanceProvider]

#### Parameters

- style Object the style object
- appearance Object the appearance preferences.

#### Examples

`javascript
const style = unpackBpkDynamicStyle(
{
color: { light: 'black', dark: 'white' },
flex: 1,
},
appearance
);
``

Returns Object object with mapped properties for the current color scheme