diff --git a/packages/rn-tester/js/components/RNTOption.js b/packages/rn-tester/js/components/RNTOption.js
index 7d3d534277b..0d92178524c 100644
--- a/packages/rn-tester/js/components/RNTOption.js
+++ b/packages/rn-tester/js/components/RNTOption.js
@@ -49,6 +49,7 @@ export default function RNTOption(props: Props): React.Node {
testID={props.testID}>
- {props.label}
+ {props.label}
);
@@ -70,16 +71,12 @@ const styles = StyleSheet.create({
pressed: {
backgroundColor: 'rgba(100,215,255,.3)',
},
- label: {
- color: 'black',
- },
selected: {
backgroundColor: 'rgba(100,215,255,.3)',
borderColor: 'rgba(100,215,255,.3)',
},
disabled: {borderWidth: 0},
container: {
- borderColor: 'rgba(0,0,0, 0.1)',
borderWidth: 1,
borderRadius: 16,
padding: 6,
diff --git a/packages/rn-tester/js/components/RNTTestDetails.js b/packages/rn-tester/js/components/RNTTestDetails.js
index 1b5d61e9bcb..7ca2bf52069 100644
--- a/packages/rn-tester/js/components/RNTTestDetails.js
+++ b/packages/rn-tester/js/components/RNTTestDetails.js
@@ -39,8 +39,12 @@ function RNTTestDetails({
)}
{expect == null ? null : (
- Expectation
- {expect}
+
+ Expectation
+
+
+ {expect}
+
)}
>
diff --git a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
index 35e7ba7dd0a..413e0a45059 100644
--- a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
+++ b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
@@ -29,11 +30,14 @@ const styles = StyleSheet.create({
function CompositeAnimationsWithEasingExample(): React.Node {
const anims = [1, 2, 3].map(() => new Animated.Value(0));
+ const theme = React.useContext(RNTesterThemeContext);
return (
- Note you cannot `useNativeDriver` for layout properties.
+
+ Note you cannot `useNativeDriver` for layout properties.
+
{
diff --git a/packages/rn-tester/js/examples/Animated/ComposingExample.js b/packages/rn-tester/js/examples/Animated/ComposingExample.js
index 8e90e4a29ff..3a9080e3439 100644
--- a/packages/rn-tester/js/examples/Animated/ComposingExample.js
+++ b/packages/rn-tester/js/examples/Animated/ComposingExample.js
@@ -14,6 +14,7 @@ import type AnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedVa
import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
import {
@@ -152,11 +153,14 @@ function ComposingExampleItem({
const animation = React.useRef(
compositeAnimation(xTranslations.current, useNativeDriver),
);
+ const theme = React.useContext(RNTesterThemeContext);
return (
- {title}
- {description}
+
+ {title}
+
+ {description}
{boxIndexes.map(boxIndex => {
const translateX = xTranslations.current[boxIndex].interpolate({
diff --git a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
index 6514bf8af5f..e176011dca5 100644
--- a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
+++ b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js
@@ -10,14 +10,26 @@
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
import {Text} from 'react-native';
+function AnimatedContinuousInteractionsExample(): React.Node {
+ const theme = React.useContext(RNTesterThemeContext);
+ return (
+
+ Checkout the Gratuitous Animation App!
+
+ );
+}
+
export default ({
title: 'Continuous Interactions',
name: 'continuousInteractions',
description: ('Gesture events, chaining, 2D ' +
'values, interrupting and transitioning ' +
'animations, etc.': string),
- render: (): React.Node => Checkout the Gratuitous Animation App!,
+ render(): React.Element {
+ return ;
+ },
}: RNTesterModuleExample);
diff --git a/packages/rn-tester/js/examples/Animated/EasingExample.js b/packages/rn-tester/js/examples/Animated/EasingExample.js
index 3a7995ca33f..c4dd4a26206 100644
--- a/packages/rn-tester/js/examples/Animated/EasingExample.js
+++ b/packages/rn-tester/js/examples/Animated/EasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
import {
@@ -103,10 +104,14 @@ function EasingItem({
},
];
+ const theme = React.useContext(RNTesterThemeContext);
+
return (
- {item.title}
+
+ {item.title}
+
{
opacityAndScale.current.setValue(0);
diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
index f7db70b56d7..c107995c3b3 100644
--- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js
@@ -98,7 +98,9 @@ function AnimatedTransformStyleExample(): React.Node {
borderBottomColor: theme.SeparatorColor,
})}
/>
- Selected Styles
+
+ Selected Styles
+
{Object.keys(properties).map(property => {
return (
@@ -125,7 +127,9 @@ function AnimatedTransformStyleExample(): React.Node {
)}
/>
- {'Should not crash when transform style key is undefined'}
+
+ {'Should not crash when transform style key is undefined'}
+
diff --git a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
index 2ec06cbf039..e3d482cb45b 100644
--- a/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
+++ b/packages/rn-tester/js/examples/Animated/utils/ToggleNativeDriver.js
@@ -8,6 +8,7 @@
* @format
*/
+import {RNTesterThemeContext} from '../../../components/RNTesterTheme';
import * as React from 'react';
import {StyleSheet, Switch, Text, View} from 'react-native';
@@ -27,9 +28,10 @@ export default function ToggleNativeDriver({
onValueChange,
style,
}: Props): React.Node {
+ const theme = React.useContext(RNTesterThemeContext);
return (
- Use Native Driver
+ Use Native Driver