Navigation works fine on other pages but doesn't work on this page particularly.I have tried various solutions but nothing worked.
picture:
github : https://github.com/danklad/CandleStickReactNative
here's my navigation code..I removed all the imports to lessen the code size here..
import Home from "./Home/Home";import CandlestickChart from "./CandleStickChart";import Account from "./Account/Account";const Tab = createMaterialBottomTabNavigator();export default function MyTabs() { return (<NavigationContainer ref={navigationRef}><Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color}) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'; } else if (route.name === 'Settings') { iconName = focused ? 'ios-list-box' : 'ios-list'; } else if (route.name === 'CandleStickChart'){ iconName = focused ? 'ios-list-box' : 'ios-list'; } // You can return any component that you like here! return <Ionicons icon={iconName} size={25} color={"red"}/> }, })}><Tab.Screen name="Home" component={Home} /><Tab.Screen name="Account" component={Account} /><Tab.Screen name="CandleStickChart" component={CandleStickChart} /></Tab.Navigator></NavigationContainer> );}the CandleStickChart page doesn't load up and is showing the above mentioned error!
here's the CandleStickChart.tsx code!
const candles = data.slice(0, 100);const bars = data.slice(0, 100);const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "black", },});const getDomain = (rows: Candle[]): [number, number] => { const values = rows.map(({ high, low }) => [high, low]).flat(); return [Math.min(...values), Math.max(...values)];};const domain = getDomain(candles);export default function CandleStickChart() { console.log("reached"); const [x, y, state] = useValues(0, 0, State.UNDETERMINED); console.log(x,y,state); const gestureHandler = onGestureEvent({ x, y, state, }); const caliber = size / candles.length; const translateY = diffClamp(y, 0, size); const translateX = add(sub(x, modulo(x, caliber)), caliber / 2); const opacity = eq(state, State.ACTIVE); return (<View style={styles.container}><ScrollView><View><Header /><Animated.View style={{ opacity }} pointerEvents="none"><Values {...{ candles, translateX, caliber }} /></Animated.View></View><PinchZoomView> <View><Chart {...{ candles, domain, bars }} /></View></PinchZoomView><Content /></ScrollView></View> );};