/**

 * Copyright (c) Meta Platforms, Inc. and affiliates.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

 *

 * @flow

 */

import * as React from 'react';

import {Fragment, useState} from 'react';

import {Button, Text, View} from 'react-native-web';

export default function ReactNativeWeb(): React.Node {

  const [backgroundColor, setBackgroundColor] = useState('purple');

  const toggleColor = () =>

    setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');

  return (

    <Fragment>

      <h1>ReactNativeWeb</h1>

      <View>

        <Text>auto (default) - english LTR</Text>

        <Text>

          {

            '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'

          }

        </Text>

        <Text style={{textAlign: 'left'}}>

          left left left left left left left left left left left left left left

          left

        </Text>

        <Button

          color={backgroundColor}

          onPress={toggleColor}

          title={`Switch background color to "${

            backgroundColor === 'purple' ? 'green' : 'purple'

          }"`}

        />

      </View>

    </Fragment>

  );

}