diff --git a/packages/playground/Samples/simple.tsx b/packages/playground/Samples/simple.tsx index 71349398ce4..dec494a06af 100644 --- a/packages/playground/Samples/simple.tsx +++ b/packages/playground/Samples/simple.tsx @@ -1,21 +1,124 @@ -/** - * Copyright (c) Microsoft Corporation. - * Licensed under the MIT License. - * @format - */ -import React from 'react'; -import {AppRegistry, View} from 'react-native'; - -export default class Bootstrap extends React.Component { - render() { - return ( - - +import React, { memo, useState, useTransition } from 'react'; +import { AppRegistry, Button, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native' + +const styles = StyleSheet.create({ + tab: { + alignItems: 'center', + }, + post: { + padding: 5, + borderTopWidth: 1, + backgroundColor: 'light-gray', + alignItems: 'center', + }, + activeTab: { + fontSize: 20, + fontWeight: 'bold', + alignSelf: 'center', + }, + pendingTab: { + color: 'gray', + }, + +}); + +function ContactTab() { + return ( + + + You can find me online here: + + * admin@mysite.com + * +123456789 + + ); +} + +function AboutTab() { + return ( + + Welcome to my profile! + + ); +} + +const PostsTab = memo(function PostsTab() { + // Log once. The actual slowdown is inside SlowPost. + console.log('[ARTIFICIALLY SLOW] Rendering 500 '); + + let items = []; + for (let i = 0; i < 500; i++) { + items.push(); + } + return ( + + {items} + + ); +}); + +function SlowPost({ index }) { + let startTime = performance.now(); + while (performance.now() - startTime < 1) { + // Do nothing for 1 ms per item to emulate extremely slow code + } + + return ( + + + + Post #{index + 1} + - ); + + ); +} + +function TabButton({ title, isActive, onClick }) { + const [isPending, startTransition] = useTransition(); + if (isActive || isPending) { + const tabStyle = [styles.activeTab, isPending ? styles.pendingTab : null]; + return {title} + } + return ( +