Make create and focus manager react-native compatible

[aurimasmi]

Allow any developer to run create component and focus manager without using renative. Goal is to have: supported devices: atv, fire tv, tvos, tizen, lg, any other web tv supported frameworks: react native, rnv

[GabrieleKaceviciute]

@aurimasmi How should I test it?

[mihaiblaga89]

This is the PR that mentions the test case, https://github.com/flexn-io/create/pull/111,

1. create new project following react-native-tvos documentation
2. Install flexn create and required peer dependencies. You'll have to go into node_modules/@flexn/create/package.json and copy peerDependencies into your package.json and run yarn again.
3. add the snippet from PR into MainActivity.java + import android.view.KeyEvent; on top of the file
4. add this to app.js

   
   import React, {useState} from 'react';
   import {Text, TVFocusGuideView} from 'react-native';
   import {
   App as CreateApp,
   Pressable,
   Screen,
   View,
   Debugger as CreateDebugger,
   FlashList,
   CreateListRenderItemInfo,
   withParentContextMapper,
   ScrollView,
   } from '@flexn/create';

function Menu() { const [width, setWidth] = useState(50);

return ( <Screen onFocus={() => setWidth(100)} onBlur={() => setWidth(50)} focusOptions={{ stealFocus: false, focusKey: 'drawer', forbiddenFocusDirections: ['up', 'down'], }} style={{ width: width, position: 'absolute', left: 0, top: 0, bottom: 0, height: '100%', backgroundColor: 'yellow', }}> <View style={{ justifyContent: 'center', alignItems: 'center', height: '100%', }}>

Item 1

    <Pressable>
      <Text style={{color: 'black'}}>Item 2</Text>
    </Pressable>
    <Pressable>
      <Text style={{color: 'black'}}>Item 3</Text>
    </Pressable>
  </View>
</Screen>

); }

function Content() { const [data] = useState(new Array(100).fill(0)); const [lists] = useState(new Array(6).fill(0));

const renderItem = ({ item, focusRepeatContext, }: CreateListRenderItemInfo) => { return ( <Pressable focusRepeatContext={focusRepeatContext} focusOptions={{ animator: { type: 'border', focus: { borderColor: 'blue', borderWidth: 2, }, }, }} style={{ width: 100, height: 100, borderWidth: 2, borderColor: 'red', marginHorizontal: 5, }} /> ); };

return ( <> <Screen focusOptions={{stealFocus: true, nextFocusLeft: 'drawer'}}>

{lists.map((_, key) => ( ))}

  </Screen>
  <Menu />
</>

); }

function App(): JSX.Element { return ( <CreateApp style={{flex: 1}}>

  <CreateDebugger />
</CreateApp>

); } export default App;

5. run it on androidtv and tvos

[pauliusguzas]

@mihaiblaga89 did everything as you said and this is the outcome: tvOS:

AndroidTV:

pauliusguzas@Pauliuss-MBP TestApp % react-native run-android
warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/3.1.0/gems/cocoapods-core-1.12.1/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
info JS server already running.
info Installing the app...
WARNING:The specified Android SDK Build Tools version (29.0.2) is ignored, as it is below the minimum supported version (30.0.3) for Android Gradle Plugin 7.3.1.
Android SDK Build Tools 30.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '29.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

> Task :app:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
56 actionable tasks: 2 executed, 54 up-to-date
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:5: error: class, interface, or enum expected
  public boolean onKeyUp(int keyCode, KeyEvent event) {
         ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:8: error: class, interface, or enum expected
    return super.onKeyUp(keyCode, event);
    ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:9: error: class, interface, or enum expected
  }
  ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:12: error: class, interface, or enum expected
   public boolean onKeyLongPress(int keyCode, KeyEvent event) {
          ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:15: error: class, interface, or enum expected
      return super.onKeyLongPress(keyCode, event);
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:16: error: class, interface, or enum expected
   }
   ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:19: error: class, interface, or enum expected
   public boolean onKeyDown(int keyCode, KeyEvent event) {
          ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:22: error: class, interface, or enum expected
        TvRemoteHandlerModule.getInstance().onKeyEvent(event, "down");
        ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:24: error: class, interface, or enum expected
        return true;
        ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:25: error: class, interface, or enum expected
      }
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:28: error: class, interface, or enum expected
      return super.onKeyDown(keyCode, event);
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:29: error: class, interface, or enum expected
   }
   ^
12 errors

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

* Get more help at https://help.gradle.org

BUILD FAILED in 5s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:5: error: class, interface, or enum expected
  public boolean onKeyUp(int keyCode, KeyEvent event) {
         ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:8: error: class, interface, or enum expected
    return super.onKeyUp(keyCode, event);
    ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:9: error: class, interface, or enum expected
  }
  ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:12: error: class, interface, or enum expected
   public boolean onKeyLongPress(int keyCode, KeyEvent event) {
          ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:15: error: class, interface, or enum expected
      return super.onKeyLongPress(keyCode, event);
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:16: error: class, interface, or enum expected
   }
   ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:19: error: class, interface, or enum expected
   public boolean onKeyDown(int keyCode, KeyEvent event) {
          ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:22: error: class, interface, or enum expected
        TvRemoteHandlerModule.getInstance().onKeyEvent(event, "down");
        ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:24: error: class, interface, or enum expected
        return true;
        ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:25: error: class, interface, or enum expected
      }
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:28: error: class, interface, or enum expected
      return super.onKeyDown(keyCode, event);
      ^
/Users/pauliusguzas/Desktop/TestApp/android/app/src/main/java/com/testapp/MainActivity.java:29: error: class, interface, or enum expected
   }
   ^
12 errors

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

* Get more help at https://help.gradle.org

BUILD FAILED in 5s

    at makeError (/Users/pauliusguzas/Desktop/TestApp/node_modules/execa/index.js:174:9)
    at /Users/pauliusguzas/Desktop/TestApp/node_modules/execa/index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (/Users/pauliusguzas/Desktop/TestApp/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:82:7)
    at async Command.handleAction (/Users/pauliusguzas/.nvm/versions/node/v16.14.2/lib/node_modules/@react-native-community/cli/build/index.js:111:9)
pauliusguzas@Pauliuss-MBP TestApp %