Im getting an error right where im declaring the app component in my react-native project app.js. It says: "Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return"
How can I solve this?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Navigation from './src/navigation';
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
* LTI update could not be added via codemod */
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
return (
<SafeAreaView style={{backgroundColor: '#121211', flex: 1}}>
<StatusBar barStyle={'light-content'} />
<Navigation />
</SafeAreaView>
);
};
export default App;
You need to import React with the types -
import * as React from 'react';
Related
how to use a functional custom component in react native??? i actualy build a login functional component like a custom react but not exsist a "div" i made a "View"
why should this not work??
import React from 'react';
import { Text, View } from 'react-native';
const Login = () => {
return (
<View>
<Text>Hi</Text>
</View>
);
}
export default Login;
---------------------------------
import React from 'react';
import {Login} from './components/Login/Login';
import { Text, View } from 'react-native';
const App = () => {
return (
<View>
<Login/>
</View>
)
}
export default App;
You've got your named exports and default exports turned around.
This would work instead:
import React from 'react';
import { Text, View } from 'react-native';
const Login = () => {
return (
<View>
<Text>Hi</Text>
</View>
);
}
export default Login;
---------------------------------
import React from 'react';
import Login from './components/Login/Login';
import { Text, View } from 'react-native';
const App = () => {
return (
<View>
<Login/>
</View>
)
}
export default App;
When you export default Login, you must import it as a default import with import Login from './components/Login/Login'
Here is an Expo Snack with the working code as well
I am using react-navigation to add custom header to my app. I am facing the same issue that is shown in the left image where the phone header overlaps with app's header. I tried to add SafeAreaView around my screen. But, it didn't make solve the problem.
it has two solutions. you can use
import React from 'react'
import {View,SafeAreaView, Text} from 'react-native'
const ConvertingFileScreen = () => {
return(
<SafeAreaView>
<Text>ConvertingFileScreen</Text>
</SafeAreaView>
)
}
export default ConvertingFileScreen;
or simply with giving a marginTop of StatusBar.height like this.
import React from 'react'
import {View,SafeAreaView,StatusBar, Text,} from 'react-native'
const ConvertingFileScreen = () => {
return(
<View style={{marginTop:StatusBar.currentHeight}}>
<Text>ConvertingFileScreen</Text>
</View>
)
}
export default ConvertingFileScreen;
You can use SafeAreaView or you can add some top spaces using useSafeAreaInsets from 'react-native-safe-area-context' It will solve the issue.
import React from 'react';
import { View,Text } from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
const ConvertingFileScreen = () => {
const { top } = useSafeAreaInsets();
return (
<View style={{marginTop: top}}>
<Text>HI React Native</Text>
</View>
)
}
Check for more details
I am learning to import files into React Native. I am trying to import the User.js file into the App.js file, but it displays an error and I don't understand where I'm wrong. Help me please.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import User from "../Components/User";
export default function App() {
return (
<View>
<User/>
</View>
)};
const styles = StyleSheet.create({});
User.js
import React from "react";
import {StyleSheet} from 'react-native';
import {View, Text} from 'react-native';
let User = () => {
return <View>
<Text>Hello My Darling</Text>
</View>
export default User;
let styles = StyleSheet.create({});
You need to close the bracker of your "User" export function.
import React from "react";
import {StyleSheet} from 'react-native';
import {View, Text} from 'react-native';
let User = () => {
return (
<View>
<Text>Hello My Darling</Text>
</View>
);
}; // << close this bracket.
export default User;
let styles = StyleSheet.create({});
Closing bracket of the 'User' function is missing. Currently, export statement is inside the functional component which is not allowed.
I am building a react-native app with a screen home.js file in screens/home.js folder by importing
with import Home from ./screens/home.js; in App.js
iam using expo cli
when i run expo start --web
error occurs cannot resolve ./screens/home.js. iam sure with the path and file name. what can be the problem
App.js
import React ,{useState}from 'react';
//import { View, Text } from 'react-native';
import Home from './screens/home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
const getFonts=()=>{
return Font.loadASync({
'nunito-regular':require('./assets/fonts/Nunito-Regular.ttf'),
'nunito-bold':require('./assets/fonts/Nunito-Bold.ttf'),
})
}
export default function App() {
const [fontsLoaded,setFontsLoaded]=useState(false);
if(fontsLoaded){
return(
<Home/>
);
}
else{
return(
< AppLoaded
startASync={getFonts}
onFinish={()=>setFontsLoaded(true)}
/>
)
}
}
screens/home.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { render } from 'react-dom';
export default function Home() {
render(){
return (
<View style={styles.container}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding:24,
},
titleText:{
fontFamily:'nunito-bold',
fontSize:18,
}
});
Remove render method from the home screen made some changes to your code try to do some thing like this:
import React ,{useState}from 'react';
import Home from './screens/Home';
import * as font from 'expo-font';
import {AppLoaded} from 'expo';
export default function App() {
return(
<Home/>
)
}
And home.js to
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Home() {
return (
<View style={{justifyContent:"center",alignItems:"center",flex:1}}>
<Text >Home Screen</Text>
</View>
);
}
////////////this is homescreen, here i try to go to 'Components'. it's not recognize 'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text>
<Button
onPress={() => props.navigation.navigate('Components')}
title="Go to Componetes demo"
/>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default HomeScreen;
/////////This is the index.js here i am using homescreen.
import React from 'react';
import { AppRegistry,View } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';
import ComponentsScreen from './src/screens/ComponentsScreen';
import Header from './src/screens/Header';
const App = () => {
return(
<View style={{ flex: 1 }}>
<Header headerText={'Hello ! '}/>
<HomeScreen />
</View>
);
};
AppRegistry.registerComponent('Tal', () => App);
This is the App.js,and the navigator is here. This is edited.
i Need help .///////////////////////////////////////////////
/////##########//////////
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
const navigator = createStackNavigator (
{
Home : HomeScreen,
Components : ComponentsScreen,
List : ListScreen
},
{
initialRouteName : 'Home',
defaultNavigationoptions : {
title : App
}
}
);
export default createAppContainer(navigator);
First, you need to understand how are you gonna have that navigation as prop inside a component.
Each screen component in your app is provided with the navigation prop automatically. It's important to highlight the navigation prop is not passed into all components; only screen components receive this prop automatically! React Navigation doesn't do anything magic here. For example, if you were to define a MyBackButton component and render it as a child of a screen component, you would not be able to access the navigation prop on it. If, however, you wish to access the navigation prop in any of your components, you may use the withNavigation HOC.
Please pass the navigation prop from the screen where you are introducing the homeScreen. It does not have access of navigation that is why it is throwing the error.