*** getting white screen while ***
I install React Native with Expo.
When I start the app its work normally.
After I play for a while with NativeBase UI, it gave me this white screen. Any help.
import { StatusBar } from "expo-status-bar";
import React from "react";
import Index from "./src/Home";
import { NativeBaseProvider, Box } from "native-base";
export default function App() {
return (
<NativeBaseProvider>
<Index />
</NativeBaseProvider>
);
}
Here is the white screen
here is the code
Related
Im trying to display video on react native application, but when I run the application I have the error TypeError: undefined is not an object (evaluating 'RCTVideoInstance.Constants')
I ran these commands but it doesnot work :
npm install react-native-video
react-native link react-native-video
And this is my code :
import React from "react";
import {View} from 'react-native';
import CustomBackground from '../Components/CustomBackground';
import Video from 'react-native-video';
import videooo from '../Images/videooo.mp4'
export default class WelcomeScreen extends React.Component{
render(){
return(
<CustomBackground>
<View style={styles.btnWelcome}>
<Video source={videooo} style={styles.images} onBuffer={this.onBuffer} onEnd={this.onEnd} onError={this.videoError}/>
</View>
</CustomBackground>
)
}
}
try to use expo-av instead of react-native-video
more information : https://github.com/react-native-video/react-native-video/issues/1738#issuecomment-575243702
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.
Recently I'm getting the message 'Unable to add output to camera session! Face detection aborted!' whenever recordAsync finishes recording. I need to use both the face detector and the recording feature--not necessarily at the same.
I upgraded my expo SDK version from 33.0.0 to 34.0.0 to see if that would make any difference.
My logic is similar to this:
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions,
AsyncStorage,
Button,
Image
} from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { NavigationActions } from 'react-navigation';
import * as FaceDetector from 'expo-face-detector';
import * as Location from 'expo-location';
import { ScreenOrientation } from 'expo';
import * as Permissions from 'expo-permissions';
import * as Progress from 'react-native-progress';
import { Camera } from 'expo-camera';
...
<Camera
ref={ref => { this.camera = ref; }}
style={{ flex: 1 }}
zoom={this.state.zoom}
onMountError={this.handleMountError}
onFacesDetected={this.state.shouldDetectFaces ? this.handleFacesDetected : null}
faceDetectorSettings={{
mode: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Landmarks.none,
runClassifications: FaceDetector.Constants.Classifications.none,
}}
onFaceDetectionError={this.onFaceDetectionError}
...
/>
I receive this abort error message when recording is completed, even though I set shouldDetectFaces to false.
Any ideas on how to prevent the abort error message?
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.
When switching the horizontal screen, the interface is fitted with vertical screen
This is my code
import React, { PureComponent } from 'react';
import { Text, View } from 'react-native';
import Root from './src/root';
import Orientation from 'react-native-orientation';
export class App extends PureComponent {
componentWillMount(){
Orientation.lockToLandscape()
};
render() {
return (
<Root />
)
}
}
export default App
Initial loading
and then I reload my app is Fine
How should I fix it
Did you try adding a this.forceUpdate() to trigger a rerender?
你只有在componentWillMount()的時候lockToLandscape()但app根本沒有被rerender所以當然顯示不出來啊