From 9b4f8e01442356f820e135fae3849063b2b8c92c Mon Sep 17 00:00:00 2001
From: Jordan Becker <jordanbeckerfr@gmail.com>
Date: Mon, 9 Aug 2021 17:19:37 -0700
Subject: [PATCH] Feat/dynamic color borders (#31140)

Summary:
Following up my issue https://github.com/facebook/react-native/issues/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 https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
---
 .../js/examples/Border/BorderExample.js       | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index 80813def9e5e20..c326752a2038c4 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -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: {
@@ -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';
@@ -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]} />;
+    },
+  },
 ];