I am writing applications with React Native. I am using typescript. I am using Hook and getting an error in the application. When I searched, Hook is valid as of React-Native version 0.59.0 but I'm having trouble.
How can I solve it?
Hook Issue App
http://prnt.sc/vvkotk
import { useNavigation } from "#react-navigation/native";
import React from "react";
import { Dimensions, Image, StyleSheet } from "react-native";
import { Box, Header, Text } from "../../components";
import { useTheme } from "../../components/Theme";
const Drawer = () => {
const navigation = useNavigation();
const theme = useTheme();
return (
<Box flex={1}>
<Box flex={0.2} backgroundColor="white">
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
borderBottomRightRadius="xl"
backgroundColor="secondary"
>
It looks like it doesn't recognise your custom useTheme hook. Please make sure the filename starts with use so useTheme.tsx of useTheme.jsx. Check the filename of your Drawer component as well to be sure. It should contain .jsx or .tsx.
Related
I'm fairly new to React Native, so apologies if this is a basic question. I'm trying to apply a Dark Theme using React Native Paper, but it won't work for some reason. My code is as follows:
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { DarkTheme, Provider as PaperProvider } from 'react-native-paper';
import { Main } from './src/main';
const theme = {
...DarkTheme,
};
export default function App() {
return (
<SafeAreaProvider>
<PaperProvider theme={theme}>
<Main />
</PaperProvider>
</SafeAreaProvider>
);
}
It seems like this should be relatively simple. Am I missing something? Any help would be greatly appreciated.
I added the below to the theme and it now works.
colors: {
...DarkTheme.colors
}
I have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-
error: can't find variable navigation
I see this error in onSuccess method at line authorizationToken.
My code-
import React, { Component } from 'react';
import {
Text,
View,
Image,
TouchableOpacity,
Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class ScanScreen extends Component {
onSuccess(scanEvent) {
this.props.navigation.navigate("Result", {
'accessKey': scanEvent.data,
'authorizationToken':navigation.getParam('authorizationToken', undefined),
"userData": navigation.getParam('userData', undefined),
"methodName": "fetchData"
});
}
render() {
return (
<View style={styles.container}>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
Any idea what I m missing here. Any help is much appreciated.Thanks in advance.
Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).
Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do
export default withNavigation(ScanScreen);
Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';
Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).
navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.
I'm trying to make the UI for my app in the below picture:
My App's UI
I follow the instruction of React Navigation to make the Custom Navigator according to the UI but it doesn't work in Android. The red screen appears with the message "Cannot Add a child that doesn't have a YogaNode to a parent without a measure function". Here is my code:
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import TabAboutScreen from './TabAbout';
import TabMyLessonScreen from './TabMyLesson';
import TabTeacherScreen from './TabTeacher';
import { ScrollView, View, Text } from '../../../components';
import TabNavigator from './TabNavigator';
import TopBar from './TopBar';
import styles from './styles';
import CourseHeader from './CourseHeader';
import theme from '../../../theme';
import i18n from '../../../i18n';
export const CourseDetailStackNavigator = createStackNavigator({
TabAbout: TabAboutScreen,
TabMyLesson: TabMyLessonScreen,
TabTeacher: TabTeacherScreen,
}, {
headerMode: 'none',
initialRouteName: 'TabAbout',
});
export default class TabCourseDetail extends Component {
static router = CourseDetailStackNavigator.router;
constructor(props) {
super(props);
this._handleOnBackButtonPress = this._handleOnBackButtonPress.bind(this);
}
_handleOnBackButtonPress() {
// do something
}
render() {
return (
<View style={styles.container}>
<TopBar textButton={i18n.t('CMBack')} title={i18n.t('CDCourseDetail')} onPress={this._handleOnBackButtonPress} />
<ScrollView
style={styles.scrollContainer}
stickyHeaderIndices={[1]}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
>
<CourseHeader />
<TabNavigator />
<View style={styles.test}>
<CourseDetailStackNavigator navigation={this.props.navigation} />
</View>
</ScrollView>
</View>
);
}
}
My evironment: react-navigation: 2.12.1, react-native: 0.55.4
I found out that the problem was that I put inside component by following the document of react navigation. It works well in iOS but doesn't work in Android.
Have you ever faced this problem. I'm looking forward to your solutions. Best regard.
Make sure you have not left any commented code in the return method and also have not left any text (string) without Text tag of react native.
I spent a lot of time finding the solution for this question but I couldn't find the perfect answer for this.
This is header.js file
I am getting "Unable to resolve path to module './src/somponents/header' (import/no-unresolved)" in this file.
// Import Libraries to make components
import React from 'react';
import { Text } from 'react-native';
// Make a component
const Header = () => {
return <Text>Albums</Text>;
};
// Make the component available to the other parts of the app
export default Header;
This is index.android.js file
I am getting "Unexpected block statement surrounding arrow body" in this file near const App = () => (
// Importing the libraries
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/somponents/header';
// Creating a component
const App = () => (
<Header />
);
// Rendering the component
AppRegistry.registerComponent('albums', () => App);
I am totally new to React Native. Please help me solve this error.
Thank You
I am trying to create a counter with react-native and redux, but i'm getting the error Expected a component class, got [object Object].
This is my index.android.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Root from './src/containers/Root';
import configureStore from './configureStore';
export default class CounterReactNativeRedux extends Component {
render() {
return (<Root store={configureStore()} />)
}
}
AppRegistry.registerComponent('CounterReactNativeRedux', () => CounterReactNativeRedux);
My code can be found here.
Found answers about this saying that it might be because of the class name not being capitalize but this is not the case.
Anyone any idea?
Look inside of your Counter.js. You have used div tags there which do not exist in React Native.
So import View tag from React Native and use that.
import {View} from 'react-native'
const Counter = ({ value }) => (
<View>{value}</View>
);