Error: Argument 'x' passed to 'transpose' must be a Tensor or TensorLike, but got 'Tensor

[pradnyayeram]

Please make sure that this is a bug. As per our
GitHub Policy,
we only address code/doc bugs, performance issues, feature requests and
build/installation issues on GitHub. tag:bug_template

System information

• Have I written custom code (import React, {useState, useEffect} from 'react';
  import {View, Text, StyleSheet, TouchableOpacity, Button} from 'react-native';

//packages
import Ionicons from 'react-native-vector-icons/AntDesign';
import * as Animatable from 'react-native-animatable';
import {ScrollView} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import {LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import Collapsible from 'react-native-collapsible';
import {Rect, Svg} from 'react-native-svg';

// custom component
import {PuttingTempo} from '../Section/Dashboard/PuttingTempo';
import CircularProgressComp from '../components/CircularProgressComp';
import {LoftAngle} from '../Section/Dashboard/LoftAngle';
import {FaceAngle} from '../Section/Dashboard/FaceAngle';
import {PutterFaceImpact} from '../Section/Dashboard/PutterFaceImpact';
import {LieAngle} from '../Section/Dashboard/LieAngle';
import {AccelerationImpact} from '../Section/Dashboard/AccelerationImpact';

import * as tf from '@tensorflow/tfjs';
import {bundleResourceIO, decodeJpeg} from '@tensorflow/tfjs-react-native';

const StartPractice = ({route}) => {
const {Sessiontime} = route.params;
const [isActive, setIsActive] = useState(true);
const [showLoft, setShowLoft] = useState(true);
const [showFaceAngle, setShowFaceAngle] = useState(true);
const [showFaceImpact, setShowFaceImpact] = useState(true);
const [showLieAngle, setShowLieAngle] = useState(true);
const [showAccele, setShowAccele] = useState(true);
const [singlePuttData, setSinglePuttData] = useState([]);

const [LoftAngleData, setLoftAngleData] = useState(0);
const [PutterFaceData, setPutterFaceData] = useState(0);
const [PutterFaceImpactdata, setPutterFaceImpact] = useState(0);
const [LieAngleStart, setLieAngleStart] = useState(0);
const [LieAngleEnd, setLieAngleEnd] = useState(0);
const [Accelration, setAccelration] = useState(0);

const [frontStrokData, setFrontStrokeData] = useState([]);
const [backStrokeData, setBackStrokeData] = useState([]);

const [tfliteInterpreter, setTfliteInterpreter] = useState(null);
// const [tensor, setTensor] = useState(null);
// const [predictionResult, setPredictionResult] = useState(null);
// const [modelReady, setModelReady] = useState(false);

// graph data
const data = [
{data: frontStrokData, svg: {stroke: '#FF0000', strokeWidth: 5}},
{
data: backStrokeData,
svg: {stroke: '#00FF00', strokeWidth: 5},
},
];
const datay = [-0.4, -0.3, -0.2, -0.1, 0.0, 0.1, 0.2, 0.3];
const datax = [-0.35, -0.3, -0.25, -0.2, -0.15, -0.1, -0.05];

//tensorflow start

const arr3D = [
[
[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8],
[2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8],
[3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8],
[4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8],
[5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8],
],
];
useEffect(() => {
initialize();
}, []);

const initialize = async () => {
try {
await tf.ready();
console.log('Tensorflow is ready');
await loadModel();
} catch (error) {
console.log('error in tensorflow', error);
}
};

const loadModel = async () => {
const modelJSON = require('../../android/app/src/main/assets/react_model/model.json');
const modelWeights = require('../../android/app/src/main/assets/react_model/group1-shard1of1.bin');
try {

  const interpreter = await tf.loadGraphModel(
    bundleResourceIO(modelJSON, modelWeights),
  );
  // const interpreter  = await tf.loadGraphModel(modelJSON);
  setTfliteInterpreter(interpreter);
  // return interpreter;
} catch (e) {
  console.log('[LOADING ERROR] info:', e);
}

};
const handlePredict = async () => {
if (!tfliteInterpreter) {
console.error('TensorFlow Lite Interpreter is not initialized.');
return;
}
const inputShape = [1, 6, 9];
const h0Shape = [1,128];
const inputData = [
[
[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8],
[2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8],
[3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8],
[4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8],
[5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8],
],
];
console.log('[LOADING ] itest nfo:');

console.log('[LOADING ] 22 nfo:');
// const transposeTensorData = tf.transpose(inputTensorData, [0, 2, 1]);
// outputs, h0,c0= model(tf.zeros(input_shape),h0,c0)
const h0Tensor = tf.zeros(h0Shape); // Initialize h0 with zeros
const c0Tensor = tf.zeros(h0Shape); 
const inputTensor = tf.zeros(inputShape);


try {
  // const inputTensor = tf.tensor(inputData, inputShape);
const outputTensors = await tfliteInterpreter.executeAsync({

args_0:inputTensor,
args_1:h0Tensor,
args_2:c0Tensor
}

);

// const outputTensors = await tfliteInterpreter.executeAsync({ args_0: inputTensor });

  console.log('Prediction result:', outputTensors);

} catch (e) {
console.error('Prediction error:', e);
}
};

// const handlePredict = async () => {
// console.log(tfliteInterpreter);
// const h0 = new Array(128).fill(0); // Initialize h0 with zeros
// const c0 = new Array(128).fill(0);
// const inputTensor = tf.tensor(arr3D);
// console.log(inputTensor);
// // tfliteInterpreter.predict(inputTensor);
// // const output = await tfliteInterpreter.predict(inputTensor,h0, c0);
// const output =tfliteInterpreter.predict(tf.zeros([ inputTensor, h0, c0])).dispose();

// console.log('Prediction result:', output);

// }

// if (!tfliteInterpreter) {
// console.error('TensorFlow Lite Interpreter is not initialized.');
// return;
// }
// // inputData = [[[1, 6, 9]]];

// if (model) {
// // const inputTensor = tf.tensor(inputData); // Use the inputData prop
// // const predictions = await model.executeAsync(inputTensor);
// // const result = Array.from(predictions.dataSync());

// // console.log('Prediction:', result);

// // // You can use the prediction result here as needed
// } else {
// console.error('Model not loaded.');
// }

// // // Prepare your input data as a TensorFlow.js tensor
// // const inputData = tf.tensor(arr3D);

// // // Initialize h0 and c0 if needed
// // const h0 = new Array(1).fill(null).map(() => new Array(128).fill(0));
// // const c0 = new Array(1).fill(null).map(() => new Array(128).fill(0));
// // console.log(c0,h0,"dddeee");

// // // Call the predict function with the interpreter and input data
// // const result = await PredictClass(tfliteInterpreter, inputData, h0, c0);
// // console.log(result, "sskjdks");

// // // Process the result and update your component state
// // if (result) {
// // // Update your component state with the result
// // // Example: setPredictionResult(result);
// // }

// // inputData.dispose();
// };

// tensorflow end

const CollapsibleHeader = ({title, val, onPressCollapse, IsActive}) => (

<Animatable.View
duration={400}
style={[styles.header, IsActive ? styles.active : styles.inactive]}
transition="backgroundColor">
{title}

    <View style={{flexDirection: 'row'}}>
      <Text
        style={{
          backgroundColor: '#FF0000',
          color: '#FFFFFF',
          height: 25,
          width: 50,
          textAlign: 'center',
          marginRight: 10,
        }}>
        {' '}
        {val}
      </Text>

      <Ionicons
        name={!IsActive ? 'up' : 'down'}
        color={'#FFFFFF'}
        size={26}
      />
    </View>
  </Animatable.View>
</TouchableOpacity>

);

return (
<>









Putt Number{ }
{singlePuttData.id}

({Sessiontime} ft)



Top View

<View
style={{
height: 150,
margin: 10,
marginTop: 10,
flexDirection: 'row',
}}>
<YAxis
style={{marginRight: 5}}
svg={{
fill: '#454545',
fontSize: 10,
scale: '#454545',
}}
contentInset={{top: 10, bottom: 20}}
data={datay}
min={-0.4}
max={0.3}
numberOfTicks={datay.length}
formatLabel={item => item}
/>
<View style={{flex: 1}}>
<LineChart
data={data}
style={{flex: 1}}
yAccessor={({item}) => item.y}
xAccessor={({item}) => item.x}
contentInset={{left: 100, right: 20, bottom: 40, top: 100}}
/>
<XAxis
data={datax}
contentInset={{left: 10, right: 20}}
svg={{
fill: '#454545',
fontSize: 10,
}}
style={{color: '#FF0000'}}
min={-0.12}
max={12}
numberOfTicks={datax.length}
formatLabel={(value, index) => datax[index]}
/>






FrontStroke



BackStroke

        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Button
              title="Pause Practice"
              color="#8C1C04"
              onPress={handlePredict}
            />
            <View style={styles.buttonSpace} />
            <Button
              title="Stop Session"
              color="#8C1C04"
              onPress={() => console.log('Button 2 pressed')}
            />
          </View>
        </View>
      </View>
      <View>
        <CollapsibleHeader
          title={'PuttingTempo'}
          val={2.1}
          onPressCollapse={() => setIsActive(!isActive)}
          IsActive={isActive}
        />
        <Collapsible collapsed={isActive} align="center">
          <PuttingTempo greenText={2.1} redText={2.4} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Loft Angle'}
          val={LoftAngleData}
          onPressCollapse={() => setShowLoft(!showLoft)}
          IsActive={showLoft}
        />
        <Collapsible collapsed={showLoft} align="center">
          <LoftAngle loftAng={LoftAngleData} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Putter Face Angle'}
          val={PutterFaceData}
          onPressCollapse={() => setShowFaceAngle(!showFaceAngle)}
          IsActive={showFaceAngle}
        />
        <Collapsible collapsed={showFaceAngle} align="center">
          <FaceAngle faceAng={PutterFaceData} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Putter Face Impact'}
          val={PutterFaceImpactdata}
          onPressCollapse={() => setShowFaceImpact(!showFaceImpact)}
          IsActive={showFaceImpact}
        />
        <Collapsible collapsed={showFaceImpact} align="center">
          <PutterFaceImpact faceImpact={PutterFaceImpactdata} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Lie Angle Position'}
          val={LieAngleStart}
          onPressCollapse={() => setShowLieAngle(!showLieAngle)}
          IsActive={showLieAngle}
        />
        <Collapsible collapsed={showLieAngle} align="center">
          <LieAngle lieAng={LieAngleStart} lieEnd={LieAngleEnd} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Acceleration Impact'}
          val={Accelration}
          onPressCollapse={() => setShowAccele(!showAccele)}
          IsActive={showAccele}
        />
        <Collapsible collapsed={showAccele} align="center">
          <AccelerationImpact />
        </Collapsible>
      </View>
    </ScrollView>
  </SafeAreaView>
</>

);
};

export default StartPractice;

const styles = StyleSheet.create({
Container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
circularProgress: {
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 20,
},
outerCircle: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 70,
borderColor: '#E5E5E5',
borderWidth: 5,
},
outerCircle2: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 70,
borderColor: 'white',
borderWidth: 2,
},
progressPer: {
color: '#000000',
},
circularMainText: {
color: '#000000',
marginLeft: 'auto',
marginRight: 'auto',
fontWeight: 400,
},
circularSubText: {
color: '#000000',
marginLeft: 'auto',
marginRight: 'auto',
fontSize: 10,
fontWeight: 400,
},
TopViewContainer: {
padding: 10,
marginTop: 20,
},
TopViewSubContainer: {
borderBottomWidth: 2,
borderBottomColor: '#e5e4e2',
},
labelContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: 300,
paddingHorizontal: 70,
marginTop: 2,
},
label: {fontSize: 12, color: '#000000'},
TopViewText: {
color: '#000000',
borderBottomWidth: 2,
borderBottomColor: '#000',
width: 70,
fontWeight: 'bold',
fontSize: 15,
paddingBottom: 3,
},
TopViewGraph: {
height: 120,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: '#000000',
padding: 10,
marginTop: 5,
marginLeft: 20,
marginRight: 20,
borderRadius: 5,
},
headerText: {
textAlign: 'left',
fontSize: 16,
fontWeight: '500',
color: 'white',
},
content: {
padding: 20,
backgroundColor: '#3B3C36',
marginLeft: 20,
marginRight: 20,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
Graphcontainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 4,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 20,
},
buttonSpace: {
width: 10, // Adjust the space width as needed
},
});
):

• OS Platform and Distribution (e.g., windows):
• Mobile device (e.g. nothing 13 android ) if the issue happens on mobile device:
• TensorFlow.js installed from (npm or script link):
• TensorFlow.js version (use command below): "@tensorflow/tfjs": "^3.7.0",
  "@tensorflow/tfjs-react-native": "^0.8.0",
• Browser version:
• Tensorflow.js Converter Version:

Describe the current behavior
Argument 'x' passed to 'transpose' must be a Tensor or TensorLike, but got 'Tensor
Describe the expected behavior
passed the tensor parameter
Standalone code to reproduce the issue
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Button} from 'react-native';

//packages
import Ionicons from 'react-native-vector-icons/AntDesign';
import * as Animatable from 'react-native-animatable';
import {ScrollView} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import {LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import Collapsible from 'react-native-collapsible';
import {Rect, Svg} from 'react-native-svg';

// custom component
import {PuttingTempo} from '../Section/Dashboard/PuttingTempo';
import CircularProgressComp from '../components/CircularProgressComp';
import {LoftAngle} from '../Section/Dashboard/LoftAngle';
import {FaceAngle} from '../Section/Dashboard/FaceAngle';
import {PutterFaceImpact} from '../Section/Dashboard/PutterFaceImpact';
import {LieAngle} from '../Section/Dashboard/LieAngle';
import {AccelerationImpact} from '../Section/Dashboard/AccelerationImpact';

import * as tf from '@tensorflow/tfjs';
import {bundleResourceIO, decodeJpeg} from '@tensorflow/tfjs-react-native';

const StartPractice = ({route}) => {
const {Sessiontime} = route.params;
const [isActive, setIsActive] = useState(true);
const [showLoft, setShowLoft] = useState(true);
const [showFaceAngle, setShowFaceAngle] = useState(true);
const [showFaceImpact, setShowFaceImpact] = useState(true);
const [showLieAngle, setShowLieAngle] = useState(true);
const [showAccele, setShowAccele] = useState(true);
const [singlePuttData, setSinglePuttData] = useState([]);

const [LoftAngleData, setLoftAngleData] = useState(0);
const [PutterFaceData, setPutterFaceData] = useState(0);
const [PutterFaceImpactdata, setPutterFaceImpact] = useState(0);
const [LieAngleStart, setLieAngleStart] = useState(0);
const [LieAngleEnd, setLieAngleEnd] = useState(0);
const [Accelration, setAccelration] = useState(0);

const [frontStrokData, setFrontStrokeData] = useState([]);
const [backStrokeData, setBackStrokeData] = useState([]);

const [tfliteInterpreter, setTfliteInterpreter] = useState(null);
// const [tensor, setTensor] = useState(null);
// const [predictionResult, setPredictionResult] = useState(null);
// const [modelReady, setModelReady] = useState(false);

// graph data
const data = [
{data: frontStrokData, svg: {stroke: '#FF0000', strokeWidth: 5}},
{
data: backStrokeData,
svg: {stroke: '#00FF00', strokeWidth: 5},
},
];
const datay = [-0.4, -0.3, -0.2, -0.1, 0.0, 0.1, 0.2, 0.3];
const datax = [-0.35, -0.3, -0.25, -0.2, -0.15, -0.1, -0.05];

//tensorflow start

const arr3D = [
[
[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8],
[2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8],
[3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8],
[4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8],
[5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8],
],
];
useEffect(() => {
initialize();
}, []);

const initialize = async () => {
try {
await tf.ready();
console.log('Tensorflow is ready');
await loadModel();
} catch (error) {
console.log('error in tensorflow', error);
}
};

const loadModel = async () => {
const modelJSON = require('../../android/app/src/main/assets/react_model/model.json');
const modelWeights = require('../../android/app/src/main/assets/react_model/group1-shard1of1.bin');
try {

  const interpreter = await tf.loadGraphModel(
    bundleResourceIO(modelJSON, modelWeights),
  );
  // const interpreter  = await tf.loadGraphModel(modelJSON);
  setTfliteInterpreter(interpreter);
  // return interpreter;
} catch (e) {
  console.log('[LOADING ERROR] info:', e);
}

};
const handlePredict = async () => {
if (!tfliteInterpreter) {
console.error('TensorFlow Lite Interpreter is not initialized.');
return;
}
const inputShape = [1, 6, 9];
const h0Shape = [1,128];
const inputData = [
[
[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8],
[2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8],
[3.0, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8],
[4.0, 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8],
[5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8],
],
];
console.log('[LOADING ] itest nfo:');

console.log('[LOADING ] 22 nfo:');
// const transposeTensorData = tf.transpose(inputTensorData, [0, 2, 1]);
// outputs, h0,c0= model(tf.zeros(input_shape),h0,c0)
const h0Tensor = tf.zeros(h0Shape); // Initialize h0 with zeros
const c0Tensor = tf.zeros(h0Shape); 
const inputTensor = tf.zeros(inputShape);


try {
  // const inputTensor = tf.tensor(inputData, inputShape);
const outputTensors = await tfliteInterpreter.executeAsync({

args_0:inputTensor,
args_1:h0Tensor,
args_2:c0Tensor
}

);

// const outputTensors = await tfliteInterpreter.executeAsync({ args_0: inputTensor });

  console.log('Prediction result:', outputTensors);

} catch (e) {
console.error('Prediction error:', e);
}
};

// const handlePredict = async () => {
// console.log(tfliteInterpreter);
// const h0 = new Array(128).fill(0); // Initialize h0 with zeros
// const c0 = new Array(128).fill(0);
// const inputTensor = tf.tensor(arr3D);
// console.log(inputTensor);
// // tfliteInterpreter.predict(inputTensor);
// // const output = await tfliteInterpreter.predict(inputTensor,h0, c0);
// const output =tfliteInterpreter.predict(tf.zeros([ inputTensor, h0, c0])).dispose();

// console.log('Prediction result:', output);

// }

// if (!tfliteInterpreter) {
// console.error('TensorFlow Lite Interpreter is not initialized.');
// return;
// }
// // inputData = [[[1, 6, 9]]];

// if (model) {
// // const inputTensor = tf.tensor(inputData); // Use the inputData prop
// // const predictions = await model.executeAsync(inputTensor);
// // const result = Array.from(predictions.dataSync());

// // console.log('Prediction:', result);

// // // You can use the prediction result here as needed
// } else {
// console.error('Model not loaded.');
// }

// // // Prepare your input data as a TensorFlow.js tensor
// // const inputData = tf.tensor(arr3D);

// // // Initialize h0 and c0 if needed
// // const h0 = new Array(1).fill(null).map(() => new Array(128).fill(0));
// // const c0 = new Array(1).fill(null).map(() => new Array(128).fill(0));
// // console.log(c0,h0,"dddeee");

// // // Call the predict function with the interpreter and input data
// // const result = await PredictClass(tfliteInterpreter, inputData, h0, c0);
// // console.log(result, "sskjdks");

// // // Process the result and update your component state
// // if (result) {
// // // Update your component state with the result
// // // Example: setPredictionResult(result);
// // }

// // inputData.dispose();
// };

// tensorflow end

const CollapsibleHeader = ({title, val, onPressCollapse, IsActive}) => (

<Animatable.View
duration={400}
style={[styles.header, IsActive ? styles.active : styles.inactive]}
transition="backgroundColor">
{title}

    <View style={{flexDirection: 'row'}}>
      <Text
        style={{
          backgroundColor: '#FF0000',
          color: '#FFFFFF',
          height: 25,
          width: 50,
          textAlign: 'center',
          marginRight: 10,
        }}>
        {' '}
        {val}
      </Text>

      <Ionicons
        name={!IsActive ? 'up' : 'down'}
        color={'#FFFFFF'}
        size={26}
      />
    </View>
  </Animatable.View>
</TouchableOpacity>

);

return (
<>









Putt Number{ }
{singlePuttData.id}

({Sessiontime} ft)



Top View

<View
style={{
height: 150,
margin: 10,
marginTop: 10,
flexDirection: 'row',
}}>
<YAxis
style={{marginRight: 5}}
svg={{
fill: '#454545',
fontSize: 10,
scale: '#454545',
}}
contentInset={{top: 10, bottom: 20}}
data={datay}
min={-0.4}
max={0.3}
numberOfTicks={datay.length}
formatLabel={item => item}
/>
<View style={{flex: 1}}>
<LineChart
data={data}
style={{flex: 1}}
yAccessor={({item}) => item.y}
xAccessor={({item}) => item.x}
contentInset={{left: 100, right: 20, bottom: 40, top: 100}}
/>
<XAxis
data={datax}
contentInset={{left: 10, right: 20}}
svg={{
fill: '#454545',
fontSize: 10,
}}
style={{color: '#FF0000'}}
min={-0.12}
max={12}
numberOfTicks={datax.length}
formatLabel={(value, index) => datax[index]}
/>






FrontStroke



BackStroke

        <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Button
              title="Pause Practice"
              color="#8C1C04"
              onPress={handlePredict}
            />
            <View style={styles.buttonSpace} />
            <Button
              title="Stop Session"
              color="#8C1C04"
              onPress={() => console.log('Button 2 pressed')}
            />
          </View>
        </View>
      </View>
      <View>
        <CollapsibleHeader
          title={'PuttingTempo'}
          val={2.1}
          onPressCollapse={() => setIsActive(!isActive)}
          IsActive={isActive}
        />
        <Collapsible collapsed={isActive} align="center">
          <PuttingTempo greenText={2.1} redText={2.4} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Loft Angle'}
          val={LoftAngleData}
          onPressCollapse={() => setShowLoft(!showLoft)}
          IsActive={showLoft}
        />
        <Collapsible collapsed={showLoft} align="center">
          <LoftAngle loftAng={LoftAngleData} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Putter Face Angle'}
          val={PutterFaceData}
          onPressCollapse={() => setShowFaceAngle(!showFaceAngle)}
          IsActive={showFaceAngle}
        />
        <Collapsible collapsed={showFaceAngle} align="center">
          <FaceAngle faceAng={PutterFaceData} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Putter Face Impact'}
          val={PutterFaceImpactdata}
          onPressCollapse={() => setShowFaceImpact(!showFaceImpact)}
          IsActive={showFaceImpact}
        />
        <Collapsible collapsed={showFaceImpact} align="center">
          <PutterFaceImpact faceImpact={PutterFaceImpactdata} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Lie Angle Position'}
          val={LieAngleStart}
          onPressCollapse={() => setShowLieAngle(!showLieAngle)}
          IsActive={showLieAngle}
        />
        <Collapsible collapsed={showLieAngle} align="center">
          <LieAngle lieAng={LieAngleStart} lieEnd={LieAngleEnd} />
        </Collapsible>
      </View>
      <View>
        <CollapsibleHeader
          title={'Acceleration Impact'}
          val={Accelration}
          onPressCollapse={() => setShowAccele(!showAccele)}
          IsActive={showAccele}
        />
        <Collapsible collapsed={showAccele} align="center">
          <AccelerationImpact />
        </Collapsible>
      </View>
    </ScrollView>
  </SafeAreaView>
</>

);
};

export default StartPractice;

const styles = StyleSheet.create({
Container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
circularProgress: {
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 20,
},
outerCircle: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 70,
borderColor: '#E5E5E5',
borderWidth: 5,
},
outerCircle2: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 70,
borderColor: 'white',
borderWidth: 2,
},
progressPer: {
color: '#000000',
},
circularMainText: {
color: '#000000',
marginLeft: 'auto',
marginRight: 'auto',
fontWeight: 400,
},
circularSubText: {
color: '#000000',
marginLeft: 'auto',
marginRight: 'auto',
fontSize: 10,
fontWeight: 400,
},
TopViewContainer: {
padding: 10,
marginTop: 20,
},
TopViewSubContainer: {
borderBottomWidth: 2,
borderBottomColor: '#e5e4e2',
},
labelContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: 300,
paddingHorizontal: 70,
marginTop: 2,
},
label: {fontSize: 12, color: '#000000'},
TopViewText: {
color: '#000000',
borderBottomWidth: 2,
borderBottomColor: '#000',
width: 70,
fontWeight: 'bold',
fontSize: 15,
paddingBottom: 3,
},
TopViewGraph: {
height: 120,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: '#000000',
padding: 10,
marginTop: 5,
marginLeft: 20,
marginRight: 20,
borderRadius: 5,
},
headerText: {
textAlign: 'left',
fontSize: 16,
fontWeight: '500',
color: 'white',
},
content: {
padding: 20,
backgroundColor: '#3B3C36',
marginLeft: 20,
marginRight: 20,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
Graphcontainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 4,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 20,
},
buttonSpace: {
width: 10, // Adjust the space width as needed
},
});

Other info / logs Include any logs or source code that would be helpful to
diagnose the problem. If including tracebacks, please include the full
traceback. Large logs and files should be attached.

[gaikwadrahul8]

Hi, @pradnyayeram

Apologize for the delayed response and thank you for bringing this issue to our attention, if possible could you please do one favour to replicate the same issue from my end help me with either Github repo/codepen example or code snippet with steps so it will be helpful to do further investigation on your issue

Meanwhile, please refer this some kind of similar issue #7056 and which may help you to resolve your issue.

Thank you for your support and patience!

[github-actions]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[kenhuang1964]

I am also getting the same error. Please help me.

[shmishra99]

Hi @pradnyayeram ,

I apologize for the delayed response. You can switch your JSengine from hermas to jsc to resolve the issue.
You can refer to the following Stack Overflow thread.

Let me know if it helps.

Thank you!

[github-actions]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.