How can i fix this error i have done import the file but still that problem can anyone can tell how to fix this i just want to use my responsiveSize file in my otpverificaltion file earlier their was not error but after i want to test a function so i copy optveri code than test the function and than paste the same code as it was written earlier but now the error is coming the file was clear when i pasted my optveri code
error is
error: Error: Unable to resolve module ./styles from C:\Users\user\Desktop\project\project\src\Screens\OtpVerification\OtpVerifications.js:
None of these files exist:
* src\Screens\OtpVerification\styles(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
* src\Screens\OtpVerification\styles\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
8 | import strings from '../../constatns/lang';
9 | import navigationStrings from '../../constatns/navigationStrings';
> 10 | import { moderateScale, } from '../../styles/responsiveSize';
| ^
11 | import styles from './styles';
12 | import OtpInputs from 'react-native-otp-inputs';
13 | import actions from '../../reudx/actions';
My import code
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import HeaderComponent from '../../Components/HeaderComponent';
import HorizontalLine from '../../Components/HorizontalLine';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import { moderateScale, moderateScaleVertical } from '../../styles/responsiveSize';
import styles from './styles';
import OtpInputs from 'react-native-otp-inputs';
import actions from '../../reudx/actions';
why i am using responsiveSize file
i am just using that because i want that the app screen ui can change according to the user phone size you can see the code also
import { Dimensions, StatusBar } from 'react-native';
const { width, height } = Dimensions.get('window');
const guidelineBaseWidth = 375;
const guidelineBaseHeight = 812;
const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
const moderateScaleVertical = (size, factor = 0.5) => size + (verticalScale(size) - size) * factor;
const textScale = percent => {
const screenHeight = Dimensions.get('window').height;
//calculate absolute ratio for bigger screens 18.5:9 requiring smaller scaling
const ratio = Dimensions.get('window').height / Dimensions.get('window').width;
//Guideline sizes are based on standard ~5″ screen mobile device
const deviceHeight = 375
? screenHeight * (ratio > 1.8 ? 0.126 : 0.15) //Set guideline depending on absolute ratio
: Platform.OS === 'android'
? screenHeight - StatusBar.currentHeight
: screenHeight;
const heightPercent = (percent * deviceHeight) / 100;
return Math.round(heightPercent);
};
export { scale, verticalScale, textScale, moderateScale, moderateScaleVertical,width,height };
