NativewindMultiplatform/app/(tabs)/tvdemo.tsx at main · react-native-tvos/NativewindMultiplatform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import {
  Text,
  Pressable,
  View,
  FlatList,
  TouchableHighlight,
} from 'react-native';

import '@/global.css';
import { useScreenDimensions } from '@/hooks/useScreenDimensions';
import { SafeAreaView } from '@/components/CSSWrappedComponents';
const backgroundClassName = 'bg-[--color-background] flex-1';

const buttonBaseClassName = `relative m-[0.5vw] bg-blue-500 w-[80vw] text-white p-[1vw] font-bold overflow-hidden transition duration-500 hover:bg-blue-300 focus:bg-blue-300 active:bg-green-500`;

const buttonTextClassName = 'text-white text-[2.5vw]';

const ribbonClassName = 'ribbonstyle';

const blockTextClassName = 'text-blue-800 font-bold text-[2.5vw] p-[1.5vw]';

const data: number[] = [...Array(10).keys()];

const TVDemo: () => React.JSX.Element = () => {
  const { orientation } = useScreenDimensions();

  const buttonHeightStyle =
    orientation === 'landscape' ? 'h-[10vw]' : 'h-[10vh]';
  const buttonStyle = `${buttonBaseClassName} ${buttonHeightStyle}`;

  const ribbonTextStyle = `text-white ${
    orientation === 'landscape' ? 'text-[1.2vw]' : 'text-[1.2vh]'
  }`;

  const renderRow = ({ item }: { item: number }) => {
    return (
      <View key={item}>
        <Text className={blockTextClassName}>{`Block ${item}`}</Text>
        <Pressable
          onPress={() => console.log('onPress')}
          onLongPress={() => console.log('onLongPress')}
          onPressIn={() => console.log('onPressIn')}
          onPressOut={() => console.log('onPressOut')}
          className={buttonStyle}
        >
          <Text className={buttonTextClassName}>Button 1</Text>
          <View className={ribbonClassName}>
            <Text className={ribbonTextStyle}>Press me</Text>
          </View>
        </Pressable>
        <Pressable
          onPress={() => console.log('onPress')}
          onLongPress={() => console.log('onLongPress')}
          onPressIn={() => console.log('onPressIn')}
          onPressOut={() => console.log('onPressOut')}
          tvParallaxProperties={{ enabled: false }}
          className={buttonStyle}
        >
          <Text className={buttonTextClassName}>Button 2</Text>
          <View className={ribbonClassName}>
            <Text className={ribbonTextStyle}>Cool ribbon style</Text>
          </View>
        </Pressable>
        <Pressable
          onPress={() => console.log('onPress')}
          onLongPress={() => console.log('onLongPress')}
          onPressIn={() => console.log('onPressIn')}
          onPressOut={() => console.log('onPressOut')}
          tvParallaxProperties={{
            enabled: false,
          }}
          className={buttonStyle}
        >
          <Text className={buttonTextClassName}>Button 3</Text>
          <View className={ribbonClassName}>
            <Text className={ribbonTextStyle}>ABCDEFG</Text>
          </View>
        </Pressable>
        <TouchableHighlight
          onPress={() => console.log('onPress')}
          onLongPress={() => console.log('onLongPress')}
          onPressIn={() => console.log('onPressIn')}
          onPressOut={() => console.log('onPressOut')}
          className={buttonStyle}
        >
          <View>
            <Text className={buttonTextClassName}>TouchableHighlight</Text>
            <View className={ribbonClassName}>
              <Text className={ribbonTextStyle}>LMNOP</Text>
            </View>
          </View>
        </TouchableHighlight>
      </View>
    );
  };
  return (
    <SafeAreaView className={backgroundClassName}>
      <View className="h-[75vh]">
        <FlatList
          contentContainerStyle={{
            justifyContent: 'center',
            alignItems: 'center',
            width: '100%',
          }}
          data={data}
          renderItem={renderRow}
        ></FlatList>
      </View>
    </SafeAreaView>
  );
};

export default TVDemo;