I am quiet new to react and I know this is something stupid but I really cant see it.
I get the following error : Unable to resolve "./app/components/Apptext" from "App.js"
import React, { Component } from 'react';
import { Text,StyleSheet,Platform } from 'react-native';
function AppText ({children})
{
return <Text style = {styles.text}>{children}</Text>
}
const styles = StyleSheet.create({
text:{
color:"tomato",
...Platform.select({
ios:{
fontSize:20,
fontFamily:"Avenir"
},
android:{
fontSize:18,
fontFamily:"Roboto"
}
})
},
})
export default AppText;
The above is my AppText script
this is the app.js
import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import {Dimensions ,SafeAreaView, StyleSheet,TouchableWithoutFeedback,Alert, Text, View ,Image, Button,Platform, BackHandler} from 'react-native';
import{ useDimensions,useDeviceOrientation } from '#react-native-community/hooks';
import WelcomeScreen from './app/screens/WelcomeScreen';
import AppText from './app/components/Apptext';
export default function App() {
return (
<View style ={{flex:1,justifyContent:"center",alignItems:"center",}}>
<AppText>I like react</AppText>
</View>
);
}
Please check the folder order from the app.js file/
No idea why but react had a issue with how i implmented this script, I changed it to the way below and it seems to be working fine.
import React from "react";
import { Text, StyleSheet, Platform } from "react-native";
function AppText({ children, style }) {
return <Text style={[styles.text, style]}>{children}</Text>;
}
const styles = StyleSheet.create({
text: {
fontSize: 18,
fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
},
});
export default AppText;
Better check the files of screens must be inside in the core project folder.. I made a mistake now I sort it out
Related
I have a real doozy here and I can't wrap my head around it.
I have this component:
<TouchableOpacity
onPress={() => {
if (myContext.value) {
alert('true');
//changes myContext.value to false
} else {
alert('false');
//changes myContext.value to true
}
}}>
<Text>{myContext.value ? 'working' : 'not working'}</Text>
</TouchableOpacity>
The weird thing that I don't understand is that the context IS changing the onPress function. So if I click the button it will alert true at first and then false and back and forth as expected. What's not changing is the text that should be going between "working" and "not working".
This component is definitely within the scope of my Provider. I'm using useContext to get access to myContext.
Does anyone know why this might be happening?
The point to be noted here is that just changing myContext.value = false or true Will not trigger a re-render.
I am not sure how are you handling the value change, But I've created a replica of what you want
Check out this Snack to see the working example.
Create a Context as shown below
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;
An example App.js component would look like
import * as React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import MyContext from './MyContext';
import MyComponent from './MyComponent';
export default function App() {
const [value, setValue] = React.useState(true);
return (
<MyContext.Provider value={{ value, setValue }}>
<MyComponent />
</MyContext.Provider>
);
}
And your component where you want to perform this operation should look like this
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import MyContext from './MyContext';
export default function MyComponent() {
const myContext = React.useContext(MyContext);
return (
<TouchableOpacity
onPress={() => {
if (myContext.value) {
alert('true');
myContext.setValue(false);
//changes myContext.value to false
} else {
alert('false');
myContext.setValue(true);
//changes myContext.value to true
}
}}>
<Text>{myContext.value ? 'working' : 'not working'}</Text>
</TouchableOpacity>
);
}
I am working on the Expo basic chat app, and I need to use Stack Navigator, which I updated manually to 4.x. When I do that, however, it gives me the error message: (0 , _native.createStackNavigator) is not a function
This is app.js:
import Main from './components/Main';
import Chat from './components/Chat';
// Import React Navigation
import { createStackNavigator } from '#react-navigation/native'
// Create the navigator
const navigator = createStackNavigator({
Main: { screen: Main },
Chat: { screen: Chat },
});
// Export it as the root component
export default navigator
Here is main.js:
import React, { Component } from 'react';
import {
StyleSheet,
TextInput, // 1. <- Add this
View,
} from 'react-native';
class Main extends React.Component {
state = { name: '' } // 2. <- Add the component state
render() {
return (
<View>
<TextInput
style={styles.nameInput}
placeHolder="John Cena"
value={this.state.name}
/>
</View>
);
}
}
const offset = 24;
const styles = StyleSheet.create({
nameInput: { // 3. <- Add a style for the input
height: offset * 2,
margin: offset,
paddingHorizontal: offset,
borderColor: '#111111',
borderWidth: 1,
},
});
Any possible solutions?
Update to react navigation 5.x, the import { createStackNavigator } from '#react-navigation/native' is a syntax for 5.x, you are using 4.x
It says I can use Expo.Apploading but I have no idea about that. If someone could help it would be great. This happens in either of device I am running. Below is code for App.js
import React, {useState}from 'react';
import {Text, View } from 'react-native';
import *as Font from 'expo-font';
import {AppLoading} from 'expo';
import {enableScreens} from 'react-native-screens';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';
enableScreens(); // useScreens has been changed to enableScreens - this helps screens load faster in background
const fetchFonts = () => { //fetching costum fonts for my app using Async
Font.loadAsync({
'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
});
};
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded
if (!fontLoaded) {
return(
<AppLoading
startAsync = {fetchFonts}
onFinish = {() => setFontLoaded(true) }
/> //if assets(fonts here) is not loaded we display loading screen and load assets for app
);
}
return <EstesGuideNavigator/>;
}
Is there any way to resolve this?
I don't know what's wrong but this is how i handle my font loading, Works perfectly
import { AppLoading } from "expo";
import { Asset } from "expo-asset";
import * as Font from "expo-font";
import React, { useState } from "react";
import { Platform, StatusBar, StyleSheet, View } from "react-native";
import { Ionicons } from "#expo/vector-icons";
import AppNavigator from "./navigation/AppNavigator";
export default function App(props) {
const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete && !props.skipLoadingScreen) {
return (
<AppLoading
startAsync={loadResourcesAsync}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === "ios" && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
}
async function loadResourcesAsync() {
await Promise.all([
Asset.loadAsync([
require("./assets/images/tick.png"),
require("./assets/images/error.png")
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free to
// remove this if you are not using it in your app
"space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
"Gilroy-Bold": require("./assets/fonts/Gilroy-Bold.otf"),
"Gilroy-Medium": require("./assets/fonts/Gilroy-Medium.otf"),
"Gilroy-Heavy": require("./assets/fonts/Gilroy-Heavy.otf")
})
]);
}
function handleLoadingError(error) {
// In this case, you might want to report the error to your error reporting
// service, for example Sentry
console.warn(error);
}
function handleFinishLoading(setLoadingComplete) {
setLoadingComplete(true);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
I just started learning React Native iOS recently and I am following raywenderlich tutorial
https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript#toc-anchor-001
I am using following versions:
react-native-cli: 2.0.1
react-native: 0.60.5
In the Adding Navigation Section, I am following the exact same steps but getting following errors
"you likely forgot to export your component from the file it's defined in and you might have mixed up with default and named imports"
Here is my App.js file code
'use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, NavigatorIOS, View } from 'react-native';
class SearchPage extends Component<{}> {
render() {
return <Text style={styles.description}>Search for houses to buy!
</Text>;
}
}
class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Property Finder',
component: SearchPage,
}}/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
export default App;
Index.js file code:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Please tell me what am I doing wrong? Thanks in advance!!!!
Try t ocheck import for registerComponent
import { AppRegistry } from 'react-native';
import App from './App'; // <--- check here
AppRegistry.registerComponent('PropertyFinder', () => App);
Hello i'm getting this error when tried to implement a header containing a logout button. The error i'm getting is to check the render method.But can't figure out the error.The file in which i'm getting error is the following
import React from "react";
import {
ScrollView,
View,
StyleSheet,
Image,
Text,
Button,
Title,
Header,
AsyncStorage,
Icon
} from "react-native";
import {
RkText,
} from "react-native-ui-kitten";
import Card from "./Card";
import CardSection from "./CardSection";
import Login from './Login';
export class GridV2 extends React.Component {
onPressLogout(){
AsyncStorage.removeItem(token);
}
render() {
return (
<View>
<Header style={{backgroundColor:'#B00000'}}>
<Button
transparent
onPress={() => this.onPressLogout()}
>
<Icon
style= {{color: '#ffffff', fontSize: 25, paddingTop:0}}
name="bars" />
</Button>
</Header>
<Card>
<CardSection>
</CardSection>
</Card>
</View>
);
}
}
I'm importing this GridV2 in my Login screen.Login screen is as follows. What is the mistake in this code?Please help..
import React, {Component} from 'react';
import { Container,
Title,
InputGroup,
Input,
Button,
Text,
View,
Spinner,
Item,
Label,
} from 'native-base';
import {
StyleSheet,
Image,
Navigator,
TouchableOpacity,
AsyncStorage,
Linking
} from 'react-native';
import QASection from './QASection';
import GridV2 from './grid2';
class Login extends Component{
state = { userdetail: [] };
constructor(props) {
super(props);
this.initialState = {
isLoading: false,
error: null,
username: '',
password: ''
};
this.state = this.initialState;
}
render() {
return();
}
You got your exports/imports wrong. Please remove all unused imports and check if the ones you are importing are in the package they are imported from. For example, as far as I know, there is no such thing as Header component in react-native (DOC
You should import GridV2 using named import:
import { GridV2 } from './grid2';
or export is as a default first:
export default class GridV2 extends React.Component {
Please check if your other imports are intact (you have correct filenames etc.).
This link explains exports/imports well.
Also you should not return like this return (); from render method. Instead return null like below:
return (null);