mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Su Min Kim
84dde677d9
Summary: Added examples to RNTester for the AccessibilityInfo API for: 1. SetAccessibilityFocus() 2. isReduceMotionEnabled() 3. iOS Only a. isBoldTextEnabled() b. isGrayScaleEnabled() c. isInvertColorsEnabled() d. isReduceTransparencyEnabled() ## 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 --> [General] [Added] - Add new examples to the Accessibility API page Pull Request resolved: https://github.com/facebook/react-native/pull/30379 Test Plan:  Reviewed By: TheSavior Differential Revision: D25245329 Pulled By: rickhanlonii fbshipit-source-id: e9c11c775410075199b4e1011b3dac0acd972e89
99 lines
2.3 KiB
JavaScript
99 lines
2.3 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as React from 'react';
|
|
import {StyleSheet, View, Text} from 'react-native';
|
|
|
|
type Props = $ReadOnly<{|
|
|
children?: React.Node,
|
|
title: string,
|
|
description?: ?string,
|
|
category?: ?string,
|
|
ios?: ?boolean,
|
|
android?: ?boolean,
|
|
|}>;
|
|
|
|
import {RNTesterThemeContext} from './RNTesterTheme';
|
|
|
|
export default function ExamplePage(props: Props): React.Node {
|
|
const theme = React.useContext(RNTesterThemeContext);
|
|
|
|
const description = props.description ?? '';
|
|
const onAndroid = props.android;
|
|
const onIos = props.ios;
|
|
const category = props.category;
|
|
|
|
return (
|
|
<>
|
|
<View style={styles.titleView}>
|
|
<Text style={styles.description}>{description}</Text>
|
|
<View style={styles.rowStyle}>
|
|
<Text style={{color: theme.SecondaryLabelColor, width: 65}}>
|
|
{category || 'Other'}
|
|
</Text>
|
|
<View style={styles.platformLabelStyle}>
|
|
<Text
|
|
style={{
|
|
color: onIos ? '#787878' : theme.SeparatorColor,
|
|
fontWeight: onIos ? '500' : '300',
|
|
}}>
|
|
iOS
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
color: onAndroid ? '#787878' : theme.SeparatorColor,
|
|
fontWeight: onAndroid ? '500' : '300',
|
|
}}>
|
|
Android
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.examplesContainer}>{props.children}</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
titleView: {
|
|
backgroundColor: '#F3F8FF',
|
|
paddingHorizontal: 25,
|
|
paddingTop: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
iconContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
examplesContainer: {
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
},
|
|
description: {
|
|
marginVertical: 8,
|
|
fontSize: 16,
|
|
},
|
|
docsContainer: {
|
|
alignContent: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
rowStyle: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
platformLabelStyle: {
|
|
flexDirection: 'row',
|
|
width: 100,
|
|
justifyContent: 'space-between',
|
|
},
|
|
});
|