I was trying a module located on npm on snack.expo.
But the following error is given to me.
Invariant Violation: View config not found for name RNMaterialLetterIcon
Where am I doing wrong?
Link: https://snack.expo.io/SyZa8lUEQ
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import RNMaterialLetterIcon from 'react-native-material-letter-icon';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<RNMaterialLetterIcon
size={80}
border={true}
borderColor={"#dd2c00"}
borderSize={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Related
I installed #react-native-picker/picker and everything in my app was functioning correctly. When I implemented Auth and changed the export from export default App to export default withAuthenticator(App);
it broke and I have been receiving a Render Error saying that Picker has been removed from react. This happens regardless of if I import Picker or I delete Picker. enter image description here
import 'react-native-gesture-handler';
import React, {useState} from 'react';
import { StyleSheet, SafeAreaView} from 'react-native';
import Navigation from './src/navigation/index';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from '#aws-amplify/core';
import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);
const App = () => {
return (
<SafeAreaView style={{flex:1}}>
<Navigation />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
root: {
flex: 1,
},
pageContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
topNavigation: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
padding: 10,
},
});
export default withAuthenticator(App);
I am just importing my files from a custom created folder component to App.js file and import key in not working on manually created files while working on other imports on React and React native.
I am making an application of React-Native using Expo CliCode Image
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import test from './component/test'; // This line is producing error
export default function App() {
return (
<View style={styles.container}>
<test/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({`enter code here`
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TEST COMPONENT :----
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Test extends React.Component {
render(){
return (
<View style={styles.container}>
<Text>Login js file</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PLEASE VISIT CODE IMAGE line 3 is causing error
https://i.stack.imgur.com/WRYAt.png
I'm trying to add a logo to react-native code using Image tag but after I add Image tag it gives me below error
TypeError: (0, _reactNative.default) is not a function. (In '(0, _reactNative.default)("./../assets/logo.png")', '(0, _reactNative.default)' is an instance of Object)
* component\Login.js:12:34 in render
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 18 more stack frames from framework internals
below is my code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Image from "react-native";
import require from 'react-native'
import {ImageBackground} from "react-native";
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image sorce={require('./../assets/logo.png')}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
logoContainer:{
alignItems:'center',
justifyContent:'center',
},
});
my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './component/Login'
export default function App() {
return (
<View style={styles.container}>
<Login/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
so what is wrong here?
You have a wrong Image import.
Use it like this:
import { StyleSheet, Text, View, Image } from 'react-native';
const myImageSource = require('./../assets/logo.png'); // Double check that you have the image at that path
Fix the typo from image source:
<Image source={myImageSource}/>
If still not working add full content of your files and RN version to your question.
I'm getting an error when trying to load my React-Native App. It seems to be related to NavigatorIOS being undefined. When I try to use a text component, that works fine, so is the problem specific to how I'm using NavigatorIOS?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment, Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class SearchPage extends Component<{}> {
render() {
return (<Text style={styles.description}>Search for houses to buy! (Again)</Text>);
}
};
console.log(NavigatorIOS)
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
initialRoute={{
component: SearchPage,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I'm getting an error as follows:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
NavigatorIOS is Deprecated since 0.6.
Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
Example react-navigation:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
'use strict';
import React,{Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Button,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class HomePage extends Component<{}> {
render() {
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to SecondPage" onPress={() => this.props.navigation.push('SecondPage')}/>
</View>
}
};
class SecondPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Second Page</Text>
<Button title = "Go to Third Page" onPress={() => this.props.navigation.navigate('ThirdPage')}> </Button>
</View>
}
};
class ThirdPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Third Page</Text>
<Button title = "Go to Home Page" onPress={() => this.props.navigation.navigate('Home')}> </Button>
</View>
}
};
const AppNavigator = createStackNavigator(
{
Home : HomePage,
SecondPage : SecondPage,
ThirdPage : ThirdPage,
},
{
initialRouteName: 'Home',
}
);
const Appcontainer = createAppContainer(AppNavigator);
export default class App extends Component<{}> {
render() {
return <Appcontainer />;
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I have an error with a blue screen when I execute expo start, it says:
something went wrong. could not load exp://169.254.12.63:19000.Networkresponse time out
There is also a link that says:
view error log" and there say: "uncaught Error: java.net.SocketTimeOutExeption:connect timed out
This is my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I want to emulate this app on genymotion.