Skip to content

Commit

Permalink
Feat/dynamic color borders (#31140)
Browse files Browse the repository at this point in the history
Summary:
Following up my issue #30377 I decided to have a look myself and contribute.

On iOS, border colors using `PlatformColor` or `DynamicColorIOS` do not update on the fly when the system appearance updates.
When the component mounts, the color is correct for the current appearance, but a component unmout/remount is required in order to see the color changing after a system appearance change.

Fixes #30377

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Internal] [Added] - Added `PlatformColor` and `DynamicColorIOS` examples to RNTester

Pull Request resolved: #31140

Test Plan:
I added 2 border examples, one using `PlatformColor` and the other using `DynamicColorIOS`. I recorded the following before/after videos showing the effect of my changes:

https://user-images.githubusercontent.com/4186230/110828711-9c5dd600-8297-11eb-8bc8-bdc9054b6b44.mov

https://user-images.githubusercontent.com/4186230/110828800-b4cdf080-8297-11eb-9d23-07f69dc3a702.mov

Reviewed By: lunaleaps

Differential Revision: D30073335

Pulled By: charlesbdudley

fbshipit-source-id: 2990a6ed40dd08fc2b1f20e93d6f21ec3d8980da
  • Loading branch information
habovh authored and facebook-github-bot committed Aug 10, 2021
1 parent b931aa7 commit 9b4f8e0
Showing 1 changed file with 29 additions and 1 deletion.
30 changes: 29 additions & 1 deletion packages/rn-tester/js/examples/Border/BorderExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@
'use strict';

const React = require('react');
const {StyleSheet, View} = require('react-native');
const {
StyleSheet,
View,
PlatformColor,
DynamicColorIOS,
} = require('react-native');

const styles = StyleSheet.create({
box: {
Expand Down Expand Up @@ -175,6 +180,14 @@ const styles = StyleSheet.create({
borderBottomRightRadius: 30,
borderBottomLeftRadius: 40,
},
border15: {
borderWidth: 10,
borderColor: PlatformColor('systemGray4', 'holo_orange_dark'),
},
border16: {
borderWidth: 10,
borderColor: DynamicColorIOS({light: 'magenta', dark: 'cyan'}),
},
});

exports.title = 'Border';
Expand Down Expand Up @@ -302,4 +315,19 @@ exports.examples = [
return <View style={[styles.box, styles.border14]} />;
},
},
{
title: 'System color',
description: 'Using a platform color',
render() {
return <View style={[styles.box, styles.border15]} />;
},
},
{
title: 'Dynamic color',
description: 'Using a custom dynamic color',
platform: 'ios',
render() {
return <View style={[styles.box, styles.border16]} />;
},
},
];

0 comments on commit 9b4f8e0

Please sign in to comment.