how can i config this if i am using expo managed flow?

[joycelsq84]

how can i config this if i am using expo managed flow?

[joycelsq84]

also i get error when trying to run npm install react-native-fold-detection

npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/react-native-fold-detection - Not found npm ERR! 404 npm ERR! 404 'react-native-fold-detection@*' is not in this registry. npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

[bhavesh-lw]

@joycelsq84 : Let us review and get back to you

[joycelsq84]

i also did try to created the apk. but it cant detect the state.

[Om-Tripathi24]

@joycelsq84 Could you please provide additional information about your code? Also, ensure that you have wrapped your 'app.js' file within the <FoldingFeatureProvider></FoldingFeatureProvider> tags.

[joycelsq84]

Hi

Here is a sample. it always show me value state = FLAT even i half folded the flip phone. How will it change the isBook? do we need to add any useEffect or etc?

import React, {useState, useEffect, useRef} from 'react'; import { StyleSheet, View, Alert } from 'react-native'; import {WebView} from 'react-native-webview'; import { FoldingFeatureProvider, useFoldingFeature } from '@logicwind/react-native-fold-detection';

const Main = () => {

  const { layoutInfo, isTableTop, isBook, isFlat } = useFoldingFeature();
  Alert.alert('getValue: '+layoutInfo.state+' orient:'+layoutInfo.orientation+' sep:'+isBook+' sss:'+isTableTop+' sdsd'+isFlat);

  return (
    <FoldingFeatureProvider>
        <SafeAreaView>
            <WebView source={{ uri: 'https://hello.com' }} />

        <SafeAreaView>
    <FoldingFeatureProvider>

    );

}

[Om-Tripathi24]

@joycelsq84 Please ensure that the 'App.js' file is wrapped within <FoldingFeatureProvider></FoldingFeatureProvider>, not within your component file. Then you can use the useFoldingFeature() hook in your component.

Please refer this link : https://www.npmjs.com/package/@logicwind/react-native-fold-detection#in-appjs-wrap-your-app-with-foldingfeatureprovider

[joycelsq84]

hi i have tried with the new release. it seems to be able to detect the state. but i want it to be using useEffect upon the state changes everytime to call api. is it possible to do this? thanks.

[joycelsq84]

also just another point, is the vertical and horizontal layout orientation become the opposite?

[Om-Tripathi24]

@joycelsq84 Please refer to below code snippets

// In your App.js file

 import { FoldingFeatureProvider } from "@logicwind/react-native-fold-detection";
const App = () =>{
return(
  <FoldingFeatureProvider>
  <Main/>
  </FoldingFeatureProvider>

)

}

// In your Main.js file

import { useFoldingFeature } from "@logicwind/react-native-fold-detection";
const Main = () => {

  const { layoutInfo, isTableTop, isBook, isFlat } = useFoldingFeature();
  Alert.alert('getValue: '+layoutInfo.state+' orient:'+layoutInfo.orientation+' sep:'+isBook+' sss:'+isTableTop+' sdsd'+isFlat);

  useEffect(()=>{
  // call your Api
},[isTableTop]). // you can add any dependency from above response of useFoldingFeature
  return (

        <SafeAreaView>
            <WebView source={{ uri: 'https://hello.com' }} />

        <SafeAreaView>

    );
}

[joycelsq84]

hi there, its working. thanks so much. but i would like to ask for flip phone, when it is half-opened, but the orientation is Horizontal... but it should be vertical... is this a bug? thanks.

[husenLogicwind]

@joycelsq84 The library orientation is functioning as anticipated. The orientation is inherited from the Android native dependency. According to the official Android documentation, when the width of the FoldingFeature exceeds the height, it results in a Horizontal orientation. When the device is half folded, it takes into account half the height of the screen.

For further details, you can refer to the official documentation: Android FoldingFeature Orientation.

I am closing this issue as it has been resolved. If you have any doubts, feel free to reopen the issue.