Backpack React Native appearance.
> Backpack React Native appearance.
``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:
Append |uiMode to the android:configChanges prop of in AndroidManifest.xml. Example:
`xml`
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
return Arrays.
new MainReactPackage(),
new DarkModePackage()
);
}
`
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'
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).
`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 (
)
}}
);
}
};
export default BpkAppearanceConsumer;
`
`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 (
);
}
};
type ComponentConfig = Config
export default withBpkAppearance
`
#### 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
Fetch the current appearance as provided by the nearest [BpkAppearanceProvider]
Returns BpkAppearancePreferences the current appearance
Fetch the current color scheme as provided by the nearest [BpkAppearanceProvider]
Returns ColorSchemeName the current color scheme
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
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
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
- 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.
Creates a new dynamic stylesheet that transforms all BpkDynamicValues intoStyleSheet
a plain 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.
This HOC wraps a component and provides the current BpkAppearancePreferencesBpkAppearanceProvider
as provided by the nearest .
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
`
Returns Component the wrapped component with an extra bpkAppearance prop.
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
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
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 objectappearance
- 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