flexn-io/renative

[Tizen] App shows blank screen when wrap app with UI lib

Closed this issue · 0 comments

Describe the bug
I'm using Samsung TV tizen version 3.0 and I have an issue with my app when I used react-native-paper UI provider
It shows black blank screen when I wrap app in Provider of react-native-paper like this
It's working with simulator but happen on real TV device. There's no error return or logs

import { Provider as PaperProvider } from "react-native-paper";
<PaperProvider>
      <AppContextContainer>
        <View style={theme.styles.wrapper}>
          <ScrollView
            style={theme.styles.scrollView}
            contentContainerStyle={theme.styles.container}
          >
            <StatusBar
              backgroundColor={theme.styles.container.backgroundColor}
              barStyle={dark ? "light-content" : "dark-content"}
            />
            <Image
              style={theme.styles.image}
              source={ICON_LOGO}
              {...testProps("template-starter-home-screen-renative-image")}
            />
            <Text
              style={theme.styles.textH2}
              {...testProps(
                "template-starter-home-screen-welcome-message-text"
              )}
            >
              {CONFIG.welcomeMessage}
            </Text>
            <Text
              style={theme.styles.textH2}
              {...testProps("template-starter-home-screen-version-number-text")}
            >
              v {packageJson.version}
            </Text>
            {isClient ? (
              <Text style={theme.styles.textH3}>
                {`platform: ${Api.platform}, factor: ${Api.formFactor}, engine: ${Api.engine}`}
              </Text>
            ) : null}
            <Text style={theme.styles.textH3}>{`hermes: ${
              typeof HermesInternal === "object" && HermesInternal !== null
                ? "yes"
                : "no"
            }`}</Text>
            <Text
              style={theme.styles.textH3}
            >{`pixelRatio: ${pixelRatio}, ${fontScale}`}</Text>
            <TouchableOpacity
              ref={buttonRef}
              onPress={toggle}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
              style={[
                theme.styles.button,
                isFocused && { ...theme.styles.focusedButton, outline: "none" },
              ]}
              // Set the initial AndroidTV and tvOS focus to be on the button
              hasTVPreferredFocus
              // On AndroidTV going up can appear as lost focus, so block focus up
              nextFocusUp={findNodeHandle(buttonRef.current) || undefined}
              {...testProps("template-starter-home-screen-try-my-button")}
            >
              <Text style={theme.styles.buttonText}>Try me!</Text>
            </TouchableOpacity>
          </ScrollView>
        </View>
      </AppContextContainer>
    </PaperProvider>

To Reproduce
Steps to reproduce the behavior:

  1. Create rnv project
  2. Install react-native-paper library
  3. Wrap app with Provider of react-native-paper in app.tsx

RNV versions: 1.0.0-rc21, 1.5,0, 1.7.0-rc0 (I tried on these 3 versions)
Node: v20