/**
 * 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
 */

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',
  },
});

@@ -457,63 +457,8 @@
 %3E;%0A%0A
-import %7BRNTesterThemeContext%7D from './RNTesterTheme';%0A%0A
 expo
@@ -529,1003 +529,219 @@
 nst 
-theme = React.useContext(RNTesterThemeContext);%0A%0A  const description = props.description ?? '';%0A  const onAndroid = props.android;%0A  const onIos = props.ios;%0A  const category = props.category;%0A%0A  return (%0A    %3C%3E%0A      %3CView style=%7Bstyles.titleView%7D%3E%0A        %3CText style=%7Bstyles.description%7D%3E%7Bdescription%7D%3C/Text%3E%0A        %3CView style=%7Bstyles.rowStyle%7D%3E%0A          %3CText style=%7B%7Bcolor: theme.SecondaryLabelColor, width: 65%7D%7D%3E%0A            %7Bcategory %7C%7C 'Other'%7D%0A          %3C/Text%3E%0A          %3CView style=%7Bstyles.platformLabelStyle%7D%3E%0A            %3CText%0A              style=%7B%7B%0A                color: onIos ? '#787878' : theme.SeparatorColor,%0A                fontWeight: onIos ? '500' : '300',%0A              %7D%7D%3E%0A              iOS%0A            %3C/Text%3E%0A            %3CText%0A              style=%7B%7B%0A                color: onAndroid ? '#787878' : theme.SeparatorColor,%0A                fontWeight: onAndroid ? '500' : '300',%0A              %7D%7D%3E%0A              Android%0A            %3C/Text%3E%0A          %3C/View%3E%0A        %3C/View
+description = props.description ?? '';%0A  return (%0A    %3C%3E%0A      %3CView style=%7Bstyles.titleView%7D%3E%0A        %3CText style=%7Bstyles.title%7D%3E%7Bprops.title%7D%3C/Text%3E%0A        %3CText style=%7Bstyles.description%7D%3E%7Bdescription%7D%3C/Text
 %3E%0A  
@@ -961,16 +961,38 @@
 dingTop:
+ 4,%0A    paddingBottom:
  8,%0A    
@@ -1022,301 +1022,139 @@
 ,%0A  
-iconContainer: %7B%0A    flexDirection: 'row',%0A    justifyContent: 'flex-end',%0A  %7D,%0A  examplesContainer: %7B%0A    flexGrow: 1,%0A    flex: 1,%0A  %7D,%0A  description: %7B%0A    marginVertical: 8,%0A    fontSize: 16,%0A  %7D,%0A  docsContainer: %7B%0A    alignContent: 'center',%0A    justifyContent: 'center',%0A  %7D,%0A  rowStyle
+title: %7B%0A    alignSelf: 'center',%0A    fontSize: 12,%0A  %7D,%0A  description: %7B%0A    fontSize: 16,%0A    paddingTop: 4,%0A  %7D,%0A  iconContainer
 : %7B%0A
@@ -1196,37 +1196,32 @@
 fyContent: '
-space-betwe
+flex-
 en
+d
 ',%0A  %7D,%0A  pl
@@ -1222,107 +1222,57 @@
 ,%0A  
-platformLabelStyle: %7B%0A    flexDirection: 'row',%0A    width
+examplesContainer: %7B%0A    flexGrow
 : 1
-00
 ,%0A    
-justifyContent: 'space-between'
+flex: 1
 ,%0A  

Update RNTester example headers