Skip to content

Commit

Permalink
fix: dark mode in SnapshotExample in RNTester (#41222)
Browse files Browse the repository at this point in the history
Summary:
This PR fixes issue in `RNTester` causing labels and image background to not be visible in dark mode in `SnapshotExample`

It also fixes issue with description in `Header` not being visible in other components examples when using dark mode

Before & After
<img width="505" alt="image" src="https://github.com/facebook/react-native/assets/56474758/ce87df69-4b79-48a0-b9be-4a7335329b78">

## Changelog:

[INTERNAL] [FIXED] - Fix dark mode in SnapshotExample in RNTester

Pull Request resolved: #41222

Test Plan:
1. Launch `RNTester` with dark mode enabled
2. Open `Snapshot / Screenshot` example
3. All labels should be visible, image background should have white color

Reviewed By: cortinico

Differential Revision: D52685754

Pulled By: NickGerleman

fbshipit-source-id: 72f79be45d9c65e307553832592563461a64ff1d
  • Loading branch information
krozniata authored and facebook-github-bot committed Jan 11, 2024
1 parent 3630138 commit 371af3f
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 8 deletions.
4 changes: 3 additions & 1 deletion packages/rn-tester/js/components/RNTesterModuleContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,9 @@ function Header(props: {
: props.theme.BackgroundColor,
},
]}>
<Text style={styles.headerDescription}>{props.description}</Text>
<Text style={[styles.headerDescription, {color: props.theme.LabelColor}]}>
{props.description}
</Text>
</View>
);
}
Expand Down
23 changes: 16 additions & 7 deletions packages/rn-tester/js/examples/Snapshot/SnapshotExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
'use strict';

const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager');
const {RNTesterThemeContext} = require('../../components/RNTesterTheme');
const React = require('react');
const {Alert, Image, StyleSheet, Text, View} = require('react-native');

Expand All @@ -21,12 +22,21 @@ class ScreenshotExample extends React.Component<{...}, $FlowFixMeState> {

render(): React.Node {
return (
<View style={style.container}>
<Text onPress={this.takeScreenshot} style={style.button}>
Click to take a screenshot
</Text>
<Image style={style.image} source={{uri: this.state.uri}} />
</View>
<RNTesterThemeContext.Consumer>
{theme => (
<View style={style.container}>
<Text
onPress={this.takeScreenshot}
style={[style.button, {color: theme.LabelColor}]}>
Click to take a screenshot
</Text>
<Image
style={[style.image, {backgroundColor: theme.LabelColor}]}
source={{uri: this.state.uri}}
/>
</View>
)}
</RNTesterThemeContext.Consumer>
);
}

Expand All @@ -48,7 +58,6 @@ const style = StyleSheet.create({
image: {
flex: 1,
resizeMode: 'contain',
backgroundColor: 'black',
},
});

Expand Down

0 comments on commit 371af3f

Please sign in to comment.